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头信息。
HTTP协议要求客户端在向服务器发送请求时，必须发送HTTP协议的头文件。
在HTTP协议头信息中设置要获取数据的相关信息及参数。
setRequestHeader()方法则是XMLHTTP为添加或修改http头信息提供的一个接口方法。
语法：xhr.setRequestHeader('header','value');
参数header，规定头信息的名称；参数value，规定头的值。
说明：
本方法必须在 open() 之后、send() 之前被调用；
该方法用于设置在请求发送时，一并被发出的一些辅助信息；
需要设置或修改系统默认头信息是使用此方法。
如：xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
使用POST方法提交时，value参数为Content-Type默认编码类型（url编码）。
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Content-Length', JSON.stringify(data).length);
⑻ 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>