Ajax异步请求的工作原理拆解、同步请求和异步请求的区别

Ajax（Asynchronous JavaScript and XML，异步的 JavaScript 和 XML）是一种通过使用 XMLHttpRequest对象与服务器进行异步通信的技术。主要功能是在不重新加载整个页面的情况下更新部分页面内容，提高用户体验。

同步请求和异步请求

同步请求和异步请求的区别在于，请求发送后 是否需要等待响应返回 才能继续执行后续的代码。

1、同步请求

同步请求是指在发送请求后，需要等待服务器响应后才能执行后续的代码。

也就是说，在发送请求时，代码会被阻塞，直到服务器返回响应结果为止。因此，同步请求会阻塞页面的加载，从而影响用户体验。

2、异步请求

异步请求是指在发送请求后，不需要等待服务器响应，可以继续执行后续的代码。当服务器返回响应结果时，会触发相应的回调函数来处理响应数据，从而更新部分网页内容，提高用户体验。

3、理解

拿生活中的例子类比来说，就像我们泡泡面的过程，要泡泡面肯定需要烧开水，把请求看作是烧开水这个步骤。同步请求就等于是在烧开水的时候，什么都不做，等开水烧好之后，再进行打开泡面，放调料，然后加水等操作。而在异步请求时，烧开水的过程中，就可以打开泡面放调料了，还可以找个你喜欢的剧看着，等开水烧开的时候再加开水即可。就用户的角度而言，肯定是异步请求的体验会好一些。

Ajax异步请求的实现过程

1、创建核心对象XMLHttpRequest。

XMLHttpRequest是 Ajax的基础，用于与服务器进行通信。

var xmlhttp = new XMLHttpRequest();

2、建立连接

调用XMLHttpRequest对象的open方法，设置请求方式、请求URL、是否为异步请求等参数.

xmlhttp.open("GET", "ajaxServlet?username=lisa", true);

3、发送请求。

调用send方法发送请求。

xmlhttp.send();

4、接受并处理响应结果

当XMLHttpRequest对象的就绪状态改变时，触发事件onreadystatechange，在XMLHttpRequest对象的就绪状态readyState为4且访问状态码为200时，获取服务器返回结果，并进行页面更新等操作。

xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
      var responseText = xmlhttp.responseText;
	  alert(responseText);
  }
};

5、完整的Ajax异步请求

//创建核心对象
var xmlhttp = new XMLHttpRequest();
//设置请求方式、URL、是否异步，建立连接
xmlhttp.open("GET", "ajaxServlet?username=lisa", true);
//发送请求
xmlhttp.send();
//接收并处理响应结果（onreadystatechange事件触发）
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
      var responseText = xmlhttp.responseText;
	  alert(responseText);
  }
};

XMLHttpRequest对象的三个重要属性

（1）onreadystatechange事件

当请求被发送到服务器时，需要执行一些基于响应的任务。每当readyState改变时，就会触发 onreadystatechange事件。readyState属性代表就绪状态，存有XMLHttpRequest的状态信息。

（2）readyState

存有XMLHttpRequest 的状态，从0到4发生变化。

readyState值	描述
0	请求未初始化。XMLHttpRequest 对象已经创建，但是尚未调用 open() 方法。
1	服务器连接已经建立。open() 方法已经被调用，但是 send() 方法尚未被调用。
2	请求已接收。send() 方法已经被调用，请求已经被服务器接收，但是尚未开始处理。
3	请求处理中。服务器正在处理请求。
4	请求已完成，且响应已就绪。响应已经被服务器接收，可以通过 XMLHttpRequest 对象的 responseText 或 responseXML 属性来获取响应结果。

（3）status

表示 HTTP 状态码。它的取值范围为 100 ~ 599，分别表示不同的状态码。常见的状态码如下：

status状态码	描述
200	请求成功。
301	请求的资源已被永久移动到新的 URL。
302	请求的资源已被临时移动到新的 URL。
400	请求无效。
401	请求需要身份验证。
403	服务器拒绝请求。
404	请求的资源不存在。
500	服务器内部错误。

JQuery方式实现异步请求

除了原生JS实现Ajax异步请求之外，JQuery也可以实现Ajax异步请求。

使用JQuery实现异步请求非常方便，可以使用JQuery的$.ajax()方法或者$.get()、$.post()、$.getJSON() 等简化方法来发送异步请求。

这里以 $.ajax() 方法为例：

$.ajax({
  url: '/api/data',
  type: 'POST',
  dataType: 'json',
  success: function(data) {
    console.log(data);
  },
  error: function() {
    console.log('请求出错');
  }
});

上面的代码通过$.ajax()方法发送一个POST请求，请求的URL为 /api/data，数据类型为 JSON。当请求成功时，会执行 success 回调函数并将响应数据作为参数传入使用；当请求失败时，会执行error回调函数并将打印错误提示。

相对于原生JS方式，使用 JQuery发送异步请求会更简单，可以大大提高开发效率。同时，JQuery 还提供了丰富的回调函数和错误处理机制，方便开发者进行异步请求的处理。