What does ajax do?-Front-end Q&A-php.cn

What does ajax do?

青灯夜游

Release： 2022-01-17 16:41:50

Original

10042 people have browsed it

AJAX is a technology used to create fast dynamic web pages. It can be used to: 1. Make partial requests to achieve partial refresh (update the web page without refreshing the page); 2. Request from the server after the page is loaded. Data; 3. Receive data from the server after the page is loaded; 4. Send data to the server in the background.

What does ajax do?

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

What is Ajax?

AJAX = Asynchronous JavaScript and XML.

AJAX is a technology for creating fast, dynamic web pages.

AJAX allows web pages to be updated asynchronously by exchanging a small amount of data with the server in the background. This means that parts of a web page can be updated without reloading the entire page.

Traditional web pages (not using AJAX) must reload the entire page if the content needs to be updated.

There are many examples of applications that use AJAX: Google Maps, Gmail, Youtube and Facebook.

Used to use asynchronous data transmission (HTTP request) between the browser and the server to achieve partial requests to achieve partial refresh

What does ajax do?

Ajax What is it for? What is the use?

1. Update the web page without refreshing the page (partial refresh)

2. Request data from the server after the page is loaded

3. After the page is loaded, from The server receives data

4. Sends data to the server in the background

How to use Ajax?

1. Create an XMLHttpRequest object

2. Use the open method to set the interaction information with the server

3. Set requestHeader() request.setRequestHeader(property name, Attribute value);

4. send() sets the sent data and starts interacting with the server

5. Gets the response and registers the event

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="getData()">获取数据</button>
    <script>
        function getData() {
            // 1.创建XMLHttpRequest对象
            var request = new XMLHttpRequest();
            // 2.使用open方法设置和服务器的交互信息
            // 请求的主体
            request.open(&#39;get&#39;, &#39;https://api.muxiaoguo.cn/api/lishijr/&#39;)
            // 3.设置requestHeader()    request.setRequestHeader(属性名称, 属性值);  
            // 这里用默认就好，不写了
            // 4. send()  设置发送的数据，开始和服务器端交互            
            request.send(); //调用send()之后,请求就会发送到服务器
            // 5.取得响应，注册事件
            request.onreadystatechange = function () {
                if (request.readyState === 4 && request.status === 200) { //4  响应完成 DONE
                    // console.log(request.responseText);
                    var res = JSON.parse(request.responseText);
                    console.log(res);
                    // 根据数据添加对应的节点
                    for (var arrIndex in res.data) {
                        // 创建一个节点
                        var p = document.createElement(&#39;p&#39;);
                        p.innerHTML = res.data[arrIndex].title;
                        document.body.appendChild(p);
                    }
                }
            }
            // 6.如果请求完成，并且响完成，可以获取到响应数据        

        }
    </script>
</body>
</html>

Copy after login

Summary of AJAX:

AJAX is asynchronous JavaScript and XML;

AJAX is a way to create better, faster and more interactive Web application technology;

AJAX is a browser technology independent of Web server software;

AJAX is not a new programming language, but a technology;

AJAX uses JavaScript to send and receive data between the web browser and the web server (front-end and back-end interaction);

AJAX uses asynchronous data transmission between the browser and the web server (HTTP request ).

[Related tutorial recommendations: AJAX video tutorial]

The above is the detailed content of What does ajax do?. For more information, please follow other related articles on the PHP Chinese website!