ajax教程 同步请求—ajax请求同步和异步的区别：示例代码

Ajax（Asynchronous JavaScript and XML）是一种用于创建交互式网页的技术。它允许网页通过异步请求与服务器进行通信，从而实现动态更新页面内容的功能。

在Ajax中，请求可以分为同步请求和异步请求。同步请求是指当发起请求后，浏览器会等待服务器返回响应后再继续执行后续的代码。而异步请求则是指发起请求后，浏览器会继续执行后续的代码，不会等待服务器返回响应。

下面是一个示例代码，用于演示同步请求和异步请求的区别：

// 同步请求示例
var xhrSync = new XMLHttpRequest();
xhrSync.open("GET", "example.com/api/data", false); // 设置同步请求
xhrSync.send();
console.log(xhrSync.responseText); // 在控制台输出服务器返回的响应
// 异步请求示例
var xhrAsync = new XMLHttpRequest();
xhrAsync.open("GET", "example.com/api/data", true); // 设置异步请求
xhrAsync.onreadystatechange = function() {
  if (xhrAsync.readyState === 4 && xhrAsync.status === 200) {
    console.log(xhrAsync.responseText); // 在控制台输出服务器返回的响应
  }
};
xhrAsync.send();

在上面的示例中，我们使用XMLHttpRequest对象创建了两个请求：xhrSync和xhrAsync。这两个请求都是向"example.com/api/data"发送GET请求。

我们通过xhrSync对象发起了一个同步请求。在发送请求之后，代码会暂停执行，直到服务器返回响应。然后，我们通过console.log()将服务器返回的响应输出到控制台。

接着，我们使用xhrAsync对象发起了一个异步请求。在发送请求之后，代码会继续执行后续的操作，不会等待服务器返回响应。当服务器返回响应时，onreadystatechange事件会被触发，我们通过判断readyState和status来确定响应已经完成。然后，我们通过console.log()将服务器返回的响应输出到控制台。

从上面的示例中可以看出，同步请求会阻塞浏览器的执行，直到服务器返回响应，而异步请求则不会阻塞浏览器的执行，可以继续执行后续的代码。这就是同步请求和异步请求的区别。