Ajax及其应用

1. Ajax工作原理

ajax是几种原有技术的结合体

• CSS、HTML

• DOM

• XMLHttpRequest——核心

• javacript

1. Ajax的工作原理

Ajax的工作原理即在用户和服务器之间加了一个AJAX引擎，让用户的操作和服务器的响应异步化。但是只有类似于数据验证和数据处理等用户请求才交给Ajax来做，并非所有的用户请求都要提交给服务器。=

Ajax Web应用模型

浏览器的Ajax交互方式。

2. XMLHttpRequest对象的属性、方法和事件

1.相关属性

1. onreadystatechange 属性——存有服务器响应的函数

其用法为：

xmlHttp.onreadystatechange = function() {
//函数体
}

2. readyState 属性——存有服务器响应的状态信息

每当readyState改变时，onereadystatechange函数被执行

其用法为：

xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {   //请求已完成
//从服务器的response获得数据
}
}

其中if语句中的值代表响应的状态，用于判断响应是否完成，能否获得数据

状态	描述
0	请求未初始化（在调用 open() 之前）
1	请求已提出（调用 send() 之前）
2	请求已发送（这里通常可以从响应得到内容头部）
3	请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
4	请求已完成（可以访问服务器响应并使用它）

3.responseText 属性——取回服务器返回的数据

xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
document.myForm.time.value = xmlHttp.responseText;
}
}

4其他属性

• responseXML——返回数据兼容DOM的XML文档对象，可以解析为一个DOM对象

• resposeBody——服务器返回的主题

• resposeStream——服务器返回的数据流

• status——服务器的状态码

• statusText——服务器返回的状态文本信息

2.方法

1. open( )

xmlHttp.open("GET","test.php",true);

其中的参数分别为定义发送请求所使用的方法，规定服务器端脚本的URL，对请求进行的异步处理

2. send（）——向服务器发送请求

3. abort（）——停止当前请求

4. getAllResponseHeaders()——把http请求的所有响应首部作为键值对返回

5. getResponseHeaders(”header Label“)——返回指定首部的串值

6. setRequestHeader（”label“，”value“）——把指定首部设置为所提供的值，在设置任何首部之前必须先调用open（）

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 事件。

在请求正常情况下，事件的触发顺序为：

1. 触发 xhr.onreadystatechange (之后每次 readyState 变化时，都会触发一次)

2. 触发 xhr.onloadstart //上传阶段开始：

3. 触发 xhr.upload.onloadstart

4. 触发 xhr.upload.onprogress

5. 触发 xhr.upload.onload

6. 触发 xhr.upload.onloadend //上传结束，下载阶段开始：

7. 触发 xhr.onprogress

8. 触发 xhr.onload

9. 触发 xhr.onloadend

当发生 abort / timeout / error 时事件触发顺序：

1. 触发 xhr.onreadystatechange 事件，此时 readystate 为 4

2. 如果上传阶段还没有结束，则依次触发以下事件：

• xhr.upload.onprogress

• xhr.upload.[onabort或ontimeout或onerror]

• xhr.upload.onloadend

3. 触发 xhr.onprogress 事件

4. 触发 xhr.[onabort或ontimeout或onerror] 事件

5. 触发 xhr.onloadend 事件

3. 实例

使用XMLHTTPRequest.onreadystatechange包含要在readystatechanged事件触发时调用的事件处理程序的属性将HTTP响应记录到控制台：

const xhr = new XMLHttpRequest(); //初始化一个新XMLHttpRequest()方法
const url='https://jsonplaceholder.typicode.com/posts';
xhr.open("GET", url);
xhr.send();
 
xhr.onreadystatechange=(e)=>{
    console.log(xhr.responseText)
}

其中的xhr.onreadystatechange有两个方法，即readyState和status，这两个方法可让我们检查请求的状态

Http.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
        console.log(Http.responseText)
    }
}