js中的XMLHttpRequest
Ajax广泛应用于web网络请求中，它的核心是XMLHttpRequest对象
Ajax，Asynchronous JavaScript + XML简称，能够服务器请求额外的数据而无须卸载页面，会带来很好的用户体验。
XMLHttpRequest对象（简称XHR），首先由微软在IE5中引入，其他浏览器提供商后来都提供了相同的实现。
在XHR出现之前，ajax式的通信必须借助一些hack手段来实现，大多数是使用隐藏的框架或内嵌框架。
XHR向服务器发送请求和解析服务器响应提供了流场的接口，能够以异步方式从服务器取得更多信息。虽然名字中包含XML的成分，但Ajax通信与数据格式无关。
同步请求
示例：
var url = 'https://www.zhihu.com/commercial_api/banners_v3/home_up?';
var xhr = new XMLHttpRequest();
xhr.open('get', url, false);
xhr.send(null);
if ((xhr.status >= 200 && xhr.status< 300) || xhr.status == 304) {
console.log(xhr.response);
}
异步请求
需先绑定回调函数，示例：
var url = 'https://www.zhihu.com/commercial_api/banners_v3/home_up?';
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status< 300) || xhr.status == 304) {
console.log(xhr.response);
}
}
}
xhr.open('get', url, true);
xhr.send();
open()参数：
- 发送请求的类型，"get","post"
- 请求的URL
- 表示是否异步发送请求的布尔值，false为同步，true为异步
异步回调状态
异步请求时，xhr.readyState的值改变都会触发 onreadystatechange 事件
xhr.readyState代表状态：
0：未初始化，尚未调用open()方法
1：启动，已经调用open()，尚未调用send()
2：发送，已经调用send()，尚未接收到响应
3：接收，已经接收到部分响应数据
4：完成，已经接收到全部响应数据，请求完成
xhr.status 为http状态码，200为请求成功标志，304表示请求的资源没有修改，直接使用浏览器中缓存的版本，其他详细状态查阅协议文档。
HTTP头
每个http请求和响应都会带有相应的头部信息，并提供对应操作头部信息的方法
头部信息包括：
- Accept：浏览器能够处理的内容类型
- Accept-Chartset：浏览器能够显示的字符集
- Accept-Encoding：浏览器能够处理的压缩编码
- Accept-Language：浏览器当前设置的语言
- Connection：浏览器与服务器之间连接的类型
- Cookie：当前页面设置的任何Cookie
- Host：发出请求的页面所在的域
- Referer：发出请求页面的URI，http规范拼写错了(referrer)，只能将错就错
- User-Agent：浏览器的用户代理字符串
操作请求头部的方法：
- setRequestHeader() 设置自定义的请求头部信息
- getRequestHeader() 获取请求头部中指定字段的信息
超时设定
xhr.open('get', url, true);
xhr.timeout = 2000;
xhr.ontimeout = function () {
console.log('request time out');
}
xhr.send();
跨域请求
受同源策略限制，默认情况下，XHR对象只能访问同域中的资源，这种安全策略可以预防某些恶意行为。但某些情况下需要实现合理的跨域访问资源，就用到了CORS
CORS(Cross-Origin Resource Sharing，跨域资源共享)定义了在必须访问跨域资源时，浏览器与服务器应该如何沟通。
CORS的基本思想是在HTTP头中定义Origin，包含请求页面的源信息，服务器获取后决定是否给予响应。如果认为可以响应，就在Access-Control-Allow-Origin头部中回发相同的源信息。
简单介绍，更多细节后续解析。
