Ajax及其应用

AJAX的工作原理

简介

AJAX用于实现与服务器进行异步交互功能；异步（发送请求后，无需等待结果，由回调函数处理）。

核心在于：

1.XHR对象；

2.由浏览器提供；

3.无需刷新页面，AJAX通过异步请求加载后台数据，并在网页上呈现出来；

工作原理

核心依赖XHR对象，使得浏览器可以发出HTTP请求与接收HTTP响应，浏览器接着做其他的事情，等收到XHR返回来的数据再渲染页面。

XMLHttpRequest对象的属性、方法与事件

常用属性汇总

response

返回响应的正文,返回的类型取决于请求的responseType属性。

onreadystatechange

用法：XMLHttpRequest.onreadystatechange；

用于指定状态改变时所触发的事件处理器,当readyState属性发生变化时，调用的事件处理器。

readyState

用法同上；

用于获取请求状态的属性，返回一个数字，代表请求的状态码；

状态码：0-未初始化；1-正在加载；2-已加载；3-交互中；4-完成。

responseText

用法同上；

用于获取服务器相应的属性；

当readyState为0、1、2时，responseText是空字符串（表示请求未成功或尚未发送）；当readyState为3时，responseText是还未完成的响应信息；当readyState为4时，responseText是响应信息。

responseXML

用法同上；

用于当接收到完整的HTTP响应时描述XML响应（readyState为4时），否则取值是null。

status

用法同上；

用于描述HTTP状态代码的属性，代表请求的响应状态，readyState为3、4时此属性才可以使用。

statusText

用法同上；

用于描述HTTP状态的代码文本，包含HTTP服务器返回的响应状态，但不用在于它包含完整的响应状态文本（如：“200 ok”），readyState为3、4时此属性才可以使用。

常用方法汇总

open（）

用法：XMLHttpRequest.open()；

初始化请求，用于设置异步请求的URL、请求方法及其他参数信息。

GET-获取；POST-创建、新增；PUT-修改；DELETE-删除。

send（）

用法同上；

发送请求，若请求时异步的，则该方法将在请求发送后立即返回，否则要等到接收到响应为止。

setRequestHeader（）

用法同上；

用于设置HTTP请求头的值，必须在open（）方法调用之后、send（）方法调用之前才可以使用

getRequestHeader（）

用法同上；

返回指定的响应头，字符串形式，若未收到则返回null。

getAllRequestHeader（）

用法同上；

返回所有用CRLF（回车符）分隔的响应头，字符串形式，若未收到则返回null。

事件汇总

abort

请求被中断的时候触发（onabort）；

error

请求遭遇错误的时候触发（onerror）；

load

XHR请求成功完成时触发（onload）；

loadend

请求结束时触发，不管请求是成功（load）还是失败（abort、error）（onloadend）；

loadstart

接收到响应数据时触发（onloadstart）；

案例编写（以JSONPlaceHolder为数据服务）

使用AJAX获取JSONPlaceHolder的数据，具体步骤如下：（该部分参考了“掘金”）

1. 创建AJAX核心对象XHR

let xhr=new XHMHttpRequest()

2. 事件处理函数

xhr.onreadystatechange=function(){
    if(this.readyState==4&&this.status==200){//成功
        s(this.response);//响应成功函数
    }else{//失败
        f(new Error("error!"));//响应失败函数
    }
};

3. 发送AJAX请求

xhr.open("GET","http://jsonplaceholder.typicode.com/posts");
xhr.responseType="json"//返回类型是JSON
xhr.send();