一.Ajax简介

AJAX（Asynchronous JavaScript and XML），中文译为异步的JavaScript和XML技术。

它是通过异步编程技术（异步地向服务器发送请求，在等待响应的过程中，不会阻塞当前页面，在这种情况下，浏览器可以做自己的事情。直到成功获取响应后，浏览器才开始处理响应数据。）与后台和服务器进行少量数据交换从而实现对部分网页进行更新。

在传统网页中（即没有实现Ajax时）如果需要更新内容，必须重新载入整个网页，所以Ajax能够很好的提高服务器性能并且能够带来良好的用户体验。

二.Ajax工作原理

首先用户与浏览器页面进行交互，用户操作某一个事件后，浏览器会开始创建一个XMLHttpRequest对象，发送HttpRequest到后台服务器，服务器处理HttpRequest，再创建响应并将数据返回浏览器，浏览器使用JS处理被返回的数据，然后更新页面内容。

三.XMLHttpRequest对象

XMLHttpRequest是Ajax的基础

XMLHttpRequest对象常用属性：

XMLHttpRequest对象常用方法

四.Ajax通常使用步骤：

1. 创建XMLHttpRequest对象

const xhr = new XMLHttpRequest();

2. 利用onreadystatechange属性，封装一个函数，用于监听readyState的变化。

xhr.onreadystatechange = function(){
    //判断readyState是否为4且status为200
    if (this.readyState === XMLHttpRequest.DONE) {
        if (this.status === 200) {
          //打印响应成功返回的数据
          console.log(xhr.responseTest);
        } 
    }
}

上述的readyStateChange事件是专门用来监听xhr对象的Ajax状态码，只要readyState（也就是Ajax状态码）发生了变化，就会触发这个事件。

在xhr对象执行收发数据的时候，readyState会经历五种状态：

0：尚未初始化，对应XMLHttpRequest.UNSENT
1：正在加载，对应XMLHttpRequest.OPENED
2：加载完毕，对应XMLHttpRequest.HEADERS_RECEIVED
3：正在处理，对应XMLHttpRequest.LOADING
4：处理完毕，对应XMLHttpRequest.DONE

只是单纯判断readyState为4是不够的，这仅仅表明收到服务器端响应的全部数据，并不能保障数据都是正确的。

所以，我们还需要判断HTTP的状态码，判断xhr对象的status属性值是否在200到300之间（200-299 用于表示请求成功）常见的状态码：

200：服务器响应正常，并正确返回。
304：该目标资源在上次请求后没有任何修改（通常用于浏览器的缓存机制，使用GET请求时尤其需要注意）。
404：找不到访问的对象，或者要访问的目标资源不存在。
500：服务器内部发生错误。

3. 设置异步请求的URL、请求方法以及其他参数，准备发送请求

xhr.open("GET",url);

参数1：请求方法，通常为"GET"或者"POST"方法
参数2：发送请求的地址
参数3：是否异步，默认为true

4. 向服务器发送请求

xhr.send();

当请求方法为GET时，send()中不传参数，为POST时，send()中需要传入新增的数据，此时还需要设定Content-Type头信息。

五.Ajax实例

通过获取JSONPlaceHolder里的posts数据资源为例，编写Ajax代码：

ajaxTest.js代码如下：

ajaxTest.html代码如下：

获取数据结果如图：

初学Ajax

一.Ajax简介

二.Ajax工作原理

三.XMLHttpRequest对象

四.Ajax通常使用步骤：

五.Ajax实例