一、对Ajax工作原理进行分析。
1.网页中发生一个事件(页面加载、按钮点击)
2.由 JavaScript 创建 XMLHttpRequest 对象
3.XMLHttpRequest 对象向 web 服务器发送请求
4.服务器处理该请求
5.服务器将响应发送回网页
6.由 JavaScript 读取响应
7.由 JavaScript 执行正确的动作(比如更新页面)
二、对XMLHttpRequest对象的属性、方法和事件进行深入理解。
1.XMLHttpRequest 对象属性
属性 | 描述 |
onreadystatechange | 定义当 readyState 属性发生变化时被调用的函数 |
readyState | 保存 XMLHttpRequest 的状态。
|
responseText | 以字符串返回响应数据 |
responseXML | 以 XML 数据返回响应数据 |
status | 返回请求的状态号
|
statusText | 返回状态文本(比如 "OK" 或 "Not Found") |
2.XMLHttpRequest 对象方法
方法 | 描述 |
new XMLHttpRequest() | 创建新的 XMLHttpRequest 对象 |
abort() | 取消当前请求 |
getAllResponseHeaders() | 返回头部信息 |
getResponseHeader() | 返回特定的头部信息 |
open(method, url, async, 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();