Ajax及其应用

一、对Ajax工作原理进行分析。

 

1.网页中发生一个事件（页面加载、按钮点击）

2.由 JavaScript 创建 XMLHttpRequest 对象

3.XMLHttpRequest 对象向 web 服务器发送请求

4.服务器处理该请求

5.服务器将响应发送回网页

6.由 JavaScript 读取响应

7.由 JavaScript 执行正确的动作（比如更新页面）

二、对XMLHttpRequest对象的属性、方法和事件进行深入理解。

1.XMLHttpRequest 对象属性

属性	描述
onreadystatechange	定义当 readyState 属性发生变化时被调用的函数
readyState	保存 XMLHttpRequest 的状态。 0：请求未初始化 1：服务器连接已建立 2：请求已收到 3：正在处理请求 4：请求已完成且响应已就绪
responseText	以字符串返回响应数据
responseXML	以 XML 数据返回响应数据
status	返回请求的状态号 200: "OK" 403: "Forbidden" 404: "Not Found"
statusText	返回状态文本（比如 "OK" 或 "Not Found"）

2.XMLHttpRequest 对象方法

方法	描述
new XMLHttpRequest()	创建新的 XMLHttpRequest 对象
abort()	取消当前请求
getAllResponseHeaders()	返回头部信息
getResponseHeader()	返回特定的头部信息
open(method, url, async, user, psw)	规定请求 method：请求类型 GET 或 POST url：文件位置 async：true（异步）或 false（同步） user：可选的用户名称 psw：可选的密码
send()	将请求发送到服务器，用于 GET 请求
send(string)	将请求发送到服务器，用于 POST 请求
setRequestHeader()	向要发送的报头添加标签/值对

3.事件

事件	触发条件
onreadystatechange	每当xhr.readyState改变时触发；但xhr.readyState由非0值变为0时不触发。
onloadstart	调用xhr.send()方法后立即触发，若xhr.send() 未被调用则不会触发此事件。
onprogress	xhr.upload.onprogress在上传阶段(xhr.send() 之后，xhr.readystate=2之前)触发，每50ms触发一次；xhr.onprogress在下载阶段（即 xhr.readystate=3时）触发，每50ms触发一次。
onload	当请求成功完成时触发，此xhr.readystate=4
onloadend	当请求结束（包括请求成功和请求失败）时触发
onabort	当调用xhr.abort()后触发
ontimeout	xhr.timeout不等于0，由请求开始onloadstart 开始算起，当到达xhr.timeout所设置时间请求还未结束即onloadend，则触发此事件。
onerror	在请求过程中，若发生Network error则会触发此事件（若发生Network error时,上传还没有结束，则会先触发xhr.upload.onerror，再触发xhr.onerror；若发生Network error时，上传已经结束，则只会触发xhr.onerror）。 注意，只有发生了网络层级别的异常才会触发此事件，对于应用层级别的异常，如响应返回的xhr.statusCode是4xx时，并不属于Network error，所以不会触发onerror事件，而是会触发onload事件。

三、以JSONPlaceHolder为数据服务，编写案例，以进一步阐述Ajax及XMLHttpRequest对象的用法，尽可能涉及更多的应用场景。

//创建Ajax核心对象 
var xhr=new XMLHttpRequest() 
 
//事件处理函数 
xhr.onreadystatechange=function(){ 
if(this.readyState==4 && this.status==200)
{ 
    console.log(this.response);    
}
else{ 
    //fail(new Error("HTTP status Rxception")); 
    console.log(this.status); 
} };     
 
//发送Ajax请求 
xhr.open("GET","http://1.14.69.117:5000/posts"); 
xhr.responseType="json"; 
xhr.send();