程序员教程

异步请求和回调函数

什么是异步请求？

异步（Asynchronous）请求是指在等待服务器处理请求期间，客户端并不会阻塞其他操作。这意味着用户可以在等待响应时继续进行其他操作，提高了应用程序的响应速度和使用体验。

与异步相对的是同步（Synchronous）请求，在发送请求后，客户端会等待服务器响应过程中处于阻塞状态，无法进行其他操作。直到收到服务器响应后，才能恢复正常运行。

AJAX技术的一大优势就是支持异步通信，使得前端与后端的数据交互更为高效。

XMLHttpRequest对象的异步属性

在创建XMLHttpRequest对象并配置请求信息时，可以通过设置 open()方法的第三个参数来控制是否采用异步方式进行通信。该参数默认为 true，表示进行异步通信。

                xhr.open(method, url, async);
                

其中：

• method：请求类型，如"GET"或"POST"。
• url：请求目标URL。
• async：是否进行异步通信。为true表示异步，false表示同步。

回调函数

当使用异步AJAX请求时，需要定义一个回调函数来处理服务器返回的数据。回调函数通常绑定在XMLHttpRequest对象的 onreadystatechange事件上，当请求状态发生变化时触发。

示例：使用回调函数处理异步GET请求的响应

                var xhr = new XMLHttpRequest();
                xhr.open("GET", "example.txt", true);

                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        var responseData = xhr.responseText;
                        handleResponse(responseData);
                    }
                };

                xhr.send();

                function handleResponse(data) {
                    document.getElementById("demo").innerHTML = data;
                }
                

在这个例子中，我们定义了名为 handleResponse的回调函数，该函数接收服务器返回的文本数据，并将其显示在页面上。

使用回调函数处理嵌套异步请求

有时候，您可能需要根据一个异步请求的结果来发起另一个异步请求。此时，可以使用嵌套的回调函数来实现。

示例：使用回调函数处理嵌套的异步请求

                function requestData1() {
                    var xhr1 = new XMLHttpRequest();
                    xhr1.open("GET", "example1.txt", true);

                    xhr1.onreadystatechange = function() {
                        if (xhr1.readyState === 4 && xhr1.status === 200) {
                            var responseData1 = xhr1.responseText;
                            requestData2(responseData1);
                        }
                    };

                    xhr1.send();
                }

                function requestData2(param) {
                    var xhr2 = new XMLHttpRequest();
                    xhr2.open("GET", "example2.txt?param=" + encodeURIComponent(param), true);

                    xhr2.onreadystatechange = function() {
                        if (xhr2.readyState === 4 && xhr2.status === 200) {
                            var responseData2 = xhr2.responseText;
                            handleFinalResponse(responseData2);
                        }
                    };

                    xhr2.send();
                }

                function handleFinalResponse(data) {
                    document.getElementById("demo").innerHTML = data;
                }

                requestData1();
                

在本示例中，requestData1()函数发起第一个异步请求，当其完成时触发回调函数 requestData2(param)。requestData2(param)根据第一个请求的结果发起第二个异步请求，并在其完成时触发最终处理函数 handleFinalResponse(data)。

结束语

通过本教程，您已经学会了如何使用回调函数处理AJAX异步请求的响应数据，以及如何处理嵌套的异步请求场景。实际项目中，可能还会遇到更复杂的情况，例如多个并行请求、错误处理等。