这是我参与「第五届青训营」伴学笔记创作活动的第 12 天

Ajax

一、初步了解异步编程与Ajax

(1)Ajax的定义

Ajax即为异步的async javascript and XML(异步JavaScript和XML)。它是一种用于快速创建动态页面的技术。使用Ajax可以在后台与服务器发生少量数据交换以达到网页异步更新的效果。如果不使用Ajax更新所需内容，则就需要重载整个网页

(2)同步与异步

同步：当请求发送时，当前页面不可以使用，必须等待服务器响应页面到客户端，响应完成用户的请求才可以继续使用页面
异步：当用户请求发送，页面仍可以使用，等异步请求的数据响应给页面，页面就会将数据显示出来

(3)Ajax工作原理

客户端发送请求，请求被提交至xhr (XMLHttpRequest) 。xhr再将该请求提交到服务器，服务器根据该请求对其进行业务处理。处理完毕后服务器将响应数据交给xhr对象，xhr对象接收数据并由js把数据显示到页面上

二、实现Ajax的基本步骤

概述基本步骤

创建一个XMLHttpRequest对象，即创建一个异步调用对象
创建一个新的Http请求，并指定该Http请求的方法、URL及验证信息
设置响应HTTP请求状态变化的函数
发送HTTP请求
获取异步调用返回的数据
使用JS和DOM实现局部刷新

详解实现Ajax步骤

(一) 创建XMLHttpRequest对象

因为不同浏览器对xhr的支持不同，所以通常有两种创建xhr对象的方式
- 主流浏览器中：
```
var xmlHttpRequest = new XMLHttpRequest();
```
- IE浏览器中：
```
var xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
```

由于无法确定用户用的是什么浏览器，因此我们应该将两种创建情况都包含在内。故 在创建时我们首先要对当前浏览器进行判断，再根据结果进行xhr对象的创建

let xmlHttpRequest;  //定义一个变量,用于存放XMLHttpRequest对象
createXMLHttpRequst();   //调用创建对象的方法
//创建XMLHttpRequest对象的方法 
function createXMLHttpRequest(){                                                 
    if(window.ActiveXObject) {//判断是否是IE浏览器
        xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");//创建IE的XMLHttpRequest对象
    }else if(window.XMLHttpRequest){//判断是否是Netscape等其他支持XMLHttpRequest组件的浏览器
        xmlHttpRequest = new XMLHttpRequest();//创建其他浏览器上的XMLHttpRequest对象
    }
}

(二)创建Http请求

当我们成功创建了一个xhr对象后，就可以通过xhr对象来创建一个HTTP请求。该请求需要说明xhr对象 从哪里获取数据 ，可以是本地也可以是网站中的数据
通过 **xhr.open(method,URL[flag,name,password]) **来创建一个HTTP请求
- method： 指定HTTP的请求方法，get、post、head、put、delete等..
- URL： 指定HTTP请求的URL地址(目标地址) ，可以是绝对URL也可以是相对URL
- flag： 可选参数，布尔值。指定当前HTTP请求是否使用异步。默认值为true
- name： 可选参数，输入用户名。如果服务器需要验证则必填
- password： 可选参数，输入密码。如果服务器需要验证则必填

举例：

访问某网站中的内容：

xhr.open("get","https://www.xxxx.com",true);

访问本地文件
```
xhr.open("get","ajax.htm",true);
```

(三)HTTP请求状态变化—readyState（AJAX状态码）

readystate：取值0~4,共五个值。表示XMLHttpRequest对象当前状态，从创建xhr对象开始，到发送数据、接收数据的过程xhr对象经历的五个状态
- 0：未初始化状态。 刚创建完xhr对象时，该对象处于 未初始化状态
- 1：初始化状态。 xhr对象调用open()方法创建了一个HTTP请求时，该对象处于 初始化状态
- 2：发送数据状态。 xhr对象调用send()方法发送数据时，该对象处于 发送数据状态
- 3：接收数据状态。 服务器接收完请求并处理完毕开始向xhr返回结果的过程，该对象处于 接收数据状态
- 4：完成状态。 当xhr接收完毕服务器返回的数据时，一整个网络请求的过程也就完成了，该对象处于 完成状态 对于接收完毕的数据可以通过responseText或者responseXML来获取
**onreadystatechange() **: xhr对象自带的一个事件，监听 ajax 对象的 readyState 值改变的的行为，当 xhr对象的readystate状态码改变时会自动调用该方法
综上可知，在一个ajax的请求过程中，只有当ajax状态码readystate === 4 的时候，我们才可以正常使用服务端给我们的数据，因此我们可以借助onreadystatechange()来对readystate的值进行判断，当值为4时表示当前异步调用过程完毕，从而对服务器返回的数据进行处理
```
//设置当前xhr对象状态改变时调用的函数，注意不要再onreadystatechange后面加()
xhr.onreadystatechange = () => {
    //当xhr.readystate === 4 表示异步调用完成
    if(xhr.readystate === 4){
        //处理语句
        ....
    }
}
```

(四)设置获取服务器返回数据的语句

当xhr.readystate属性值等于4时只能表示异步调用过程完毕，但不能表示异步调用成功了。我们还需要对xhr对象的status属性值进行判断，只有当该值为2xx时才表示异步调用成功(请求本地文件的话该值为0)。因此我们不仅要对readystate的值进行判断，当readystate的值为4后我们还需要对xhr.status的值进行判断
- 白话·：当xhr.readystate === 4时说明服务器已经有返回的数据了，但这个数据是否为我们预期的数据而并非其他的报错信息，我们还需要对status的值进行判断(网络请求为2xx，本地请求为0)
关于http状态码(status)：cloud.tencent.com/document/pr…

//设置当前xhr对象状态改变时调用的函数，注意不要再onreadystatechange后面加()
xhr.onreadystatechange = () => {
    //当xhr.readystate === 4 表示异步调用完成
    if(xhr.readystate === 4){
        //对status进行判断
        if(200<xhr.status<=299){
            //对返回的数据进行处理，如下仅是举例
             document.write(xmlHttpRequest.responseText);//将返回结果以字符串形式输出
            //document.write(xmlHttpRequest.responseXML);//或者将返回结果以XML形式输出
        }
    }
}

(五)发送HTTP请求

当我们完成以上四个步骤时，就已经做完了对请求从创建到接收结果处理的准备。这时候我们就可以调用xhr对象的send()方法来将我们创建的HTTP请求发出到指定的服务器上，语法如下：
```
xhr.send(data); 
```
- data：可选参数，表示请求数据的参数。如果请求的数据不需要参数则可忽略或用null代替。data参数的格式同URL中传递参数的格式，如下所示：
```
data = "name=myName&value=myValue"
```
只有当我们调用了send()之后，xhr对象的readyState属性值才会开始改变！

(六)封装Ajax

我们可以根据需求封装ajax对象，这里省略

Ajax|青训营笔记

Ajax

一、初步了解异步编程与Ajax

(1)Ajax的定义

(2)同步与异步

(3)Ajax工作原理

二、实现Ajax的基本步骤

概述基本步骤

详解实现Ajax步骤

(一) 创建XMLHttpRequest对象

(二)创建Http请求

(三)HTTP请求状态变化—readyState（AJAX状态码）

(四)设置获取服务器返回数据的语句

(五)发送HTTP请求

(六)封装Ajax