http ajax web,WEB前端第六十课——原生Ajax与HTTP协议

1.Ajax简述

全名：Asynchronous JavaScript and xml，

是指围绕“由js向服务器发起http请求”这个功能而开发的一整套完整的方法。

因此，引入jQuery封装好的Ajax会浪费很多资源，实际利用到的功能只是很少一部分，

而原生ajax则可以根据实际需求编写代码，减少内存耗用。

原生Ajax模块在处理网络请求时，包括以下四步骤：

⑴ 创建“xhr”对象

⑵ 构建“xhr”属性和方法

⑶ 通过“xhr”对象发出HTTP请求

⑷ 通过“xhr”对象的方法接收服务器回传的数据

说明：

Ajax可以发出同步请求，也可以发出异步请求。

但多数情况下指的是异步请求，因为同步的Ajax请求对浏览器会产生“阻塞效应”。

2.xhr对象

在Ajax中对整个请求从创建到发送，有着一整套严格的流程标准。

需要至少以下几个步骤：

⑴ 通过 XMLHttpRequest 类创建 xhr 对象；

⑵ 为 xhr 对象添加属性和回调方法；

⑶ xhr 对象执行 open() 方法，设置请求发送的目标url地址；

⑷ xhr 对象执行 send() 方法，发出请求。

语法：var xhr = new XMLHttpRequest();

说明：

XMLHttpRequest 对象用于在“浏览器”与“服务器”之间传送数据。

3.xhr对象常用属性和方法

⑴ onreadystatechange 属性

该属性指向一个回调函数，当页面加载状态发生改变时，readyState属性值就会随即发生变化，

此时，readystatechange属性所对应的回调函数就会自动被调用。

语法：xhr.onreadystatechange = function(){}

⑵ readyState 属性

该属性为只读属性，用一个整数和对应的常量来表示XMLHttpRequest请求当前所处的状态。

一般只会用在 onreadystatechange 事件的回调函数中，

通过判断 readyState属性的值，进而执行不同状态对应的函数。

语法：xhr.onreadystatechange = function(){

if(xhr.readystate==n){

//执行相应的函数

}

}

readyState属性值说明：

0 值，对应常量“UNSENT”，

表示XMLHttpRequest实例已经生成，但是 open() 方法还没有被调用；

1 值，对应常量“OPEND”，

表示 send() 方法还没被调用，仍可以使用 setRequestHeader() 设定HTTP请求头；

2 值，对应常量“HEADERS_RECEIVED”

表示 send() 方法已经执行，并且头信息和状态码已经收到；

3 值，对应常量“LOADING”，

表示正在接收服务器传来的body部分的数据，如果 responseType的属性

是 text 或者 空字符串，responseText 就会包含已经收到的部分信息；

4 值，对应常量“DONE”，

表示服务器数据已经完全接收，或者本次接收已经失败了。

⑶ status 属性

表示本次请求所得到的的HTTP状态码，是一个整数。

语法：if(xhr.readyState==4){

if(xhr.status==200){

//请求通信成功

}

}

说明：

该属性为只读属性；

该属性有以下几种可能值：

200，OK，访问正常；　　//一般情况下作为通信成功的标志。

301，Moved Permanently，永久移动；

302，Move Temporarily，暂时移动；

304，Not Modified，未修改；

307，Temporary Redirect，暂时重定向；

401，Unauthorized，未授权；

403，Forbidden，禁止访问；

404，Not Found，未发现指定网址；

500，Internal Server Error，服务器发生错误。

⑷ statusText 属性

表示服务器发送的状态提示，是一个只读字符串。

语法：xhr.shtatusText;

说明：该属性不同于 status，属性值为返回状态码所对应的状态信息，如“OK”。

⑸ responseText 属性

用于获取从服务器接收到的 字符串 内容，该属性为只读。

如果本次请求没有成功或者数据不完整，则属性值等于 null；

如果服务器返回的数据格式是 JSON，则可以使用 responseText属性进行数据解析。

语法：xhr.responseText;

说明：

后台返回数据时，使用 echo json_encode();进行编码；

前台接收数据时，直接接收到的返回结果为字符串，使用 JSON.parse();进行解析。

⑹ open() 方法

表示要将请求发往目标地址，但只是设置而不是发送。

语法：xhr.open('请求类型','目标url地址',是否异步);

说明：

第一个参数“请求类型”用于设置 get 或 post 请求；

第二个参数“url地址”用于设置请求要发送到的地址链接；

第三个参数为布尔值，用于设置是否异步发送，默认false表示同步发送

⑺ setRequestHeader() 方法

用于设置HTTP头信息。

语法：xhr.setRequestHeader('key','value');

说明：

本方法必须在 open() 之后、send() 之前被调用；

该方法用于设置在请求发送时，一并被发出的一些补充信息。

⑻ send() 方法

用于实际发出HTTP请求。

语法：xhr.send(formData);

说明：

send() 方法的参数是表单数据，为post请求准备；

如果请求类型是 get请求，则参数直接写 null 即可。

4.Ajax请求代码示例

var uName = document.querySelector('.userName').value;

var uCode = document.querySelector('.userCode').value;

var xhr=new XMLHttpRequest();   //创建对象，准备发送Ajax请求

xhr.onreadystatechange=function () {    //监听后台接收请求状态的变化

if (xhr.readyState==4){             //判断当前请求进行到何种状态，属性值 4 表示后台已经接收到前台请求

if (xhr.status==200){           //判断前台是否准确接收到后台反馈的数据，属性值 200 表示通信成功

console.log(xhr.responseText);  //获取后台反馈的完整数据，json串

console.log(typeof xhr.responseText);   //返回结果为 string 类型

console.log(JSON.parse(xhr.responseText));   //将返回结果转换为对象

}

}

}

xhr.open('get','xhr.php?name=uName&code=uCode',true);

xhr.send(null);