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()参数：

1. 发送请求的类型，"get","post"
2. 请求的URL
3. 表示是否异步发送请求的布尔值，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头部中回发相同的源信息。

简单介绍，更多细节后续解析。