Ajax应用

一、Ajax简介

Ajax是对前端和后端进行数据、文本的传输；使网页实现异步更新，在不重新加载整个网页下，进行部分更新。

Ajax的工作原理

通过XMLHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面

实现过程

实现Ajax异步交互需要服务器逻辑进行配合

    （1）创建一个XMLHttpRequest对象

            var xhr=new XMLHttpRequest();

    （2）使用open()方法打开一个HTTP请求

            xhr.open('GET', 'http://example.com', true);

    （3）设置onreadystatechange事件处理程序

            xhr.onreadystatechange = function() {

             if (xhr.readyState === 4 && xhr.status === 200) { 

                    console.log(xhr.responseText); 

                } };

    （4）发送HTTP请求

            xhr.send();

二、XMLHttpRequest简介

1、XMLHttpRequest常用属性

（1）readyState
XMLHttpRequest.readyState返回一个整数，表示实例对象的当前状态。该属性只读。它可能返回以下值。

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

(2)onreadystatechange

XMLHttpRequest.onreadystatechange属性指向一个监听函数。

通信过程中，每当实例对象发生状态变化，它的readyState属性值就会改变，这个值每改变一次便会触发一次readyStateChange事件。readyStateChange事件就会执行这个属性

（3）responseText

XMLHttpReques.responseText属性返回从服务器收到的字符串，该属性状态为只读，当http请求完成后，该属性才会包含完成的数据

（4）XMLHttpReques.state属性返回一个整数（状态码），表示服务器回应的http。（200：成功；403：禁止；404：未找到）

2、XMLHttpReques常用方法

（1）open():

XMLHttpReques.open()方法用于指定http请求的参数，即初始化XMLHttpReques实例对象

•	open(method:string, url:string, async?:boolean=true, username?:string, password: string)

• 用于创建HTTP请求，但请求并未发送。
• method：请求类型，如GET、POST等，大小写不敏感。
• url：URL地址
• async：是否异步，默认true。

	若为同步请求时：
		
	•	xhr.timeout值必须为 0。
	
	•	xhr.withCredentials值必须为 false。

	•	xhr.responseType值必须为"",(text 也不允许)。

• username, 用户名，一般不用。
• password, 密码，一般不用。
（2）send():
XmlHttpReques.send(）方法用于实际发出http请求。

（3）getResponseHeader：获取响应某个头信息
（4）setRequestHeader()：设置请求消息的内容类型
（5）post：发送请求
（6）abort:用于响应中断

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
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
  const xhr= new XMLHttpRequest();  
  //事件处理函数
  xhr.onreadystatechange = function() {    
    if (this.readyState == 4 && this.status == 200) {
        console.log(this.response);     //响应成功
    }
};  
 //发送Ajax请求
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1");
xhr.responseType = "json";
request.send();
//PUT方法更新资源
var updateData = {
  id: 1,
  title: 'Updated Title',
  body: 'Updated Body Text'

};
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/json');  
xhr.send(JSON.stringify(updateData));