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请求代码示例

<script>
    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);
</script>