原生 JavaScript 发起异步 GET 或 POST 请求方法

不管是 GET 还是 POST 请求，主要分三步：

第一步：创建需要的对象，这里主要用到的是 XMLHttpRequest，可能注意需要考虑早期的 IE；
第二步：打开连接；
第三步：发送请求；
第三步：接收处理返回的数据；
GET 请求
代码示例：

var xhr= new XMLHttpRequest(),
    method = "GET",
    url = "https://www.ozabc.com/";
xhr.open(method, url, true);
xhr.send();
xhr.onreadystatechange = function () {
  if(xhr.readyState === 4 && xhr.status === 200) {
    var json = xhr.responseText;  //如果获取到 json 字符串，还需解析
    console.log(json);
  }
}

readyState

XMLHttpRequest.readyState 属性返回一个 XMLHttpRequest 代理当前所处的状态。一个 XHR 代理总是处于下列状态中的一个：

值    状态    描述
0    UNSENT    代理被创建，但尚未调用 open() 方法。
1    OPENED    open() 方法已经被触发，在这个状态中，可以通过 setRequestHeader() 方法来设置请求的头部， 可以调用 send() 方法来发起请求。
2    HEADERS_RECEIVED    send() 方法已经被调用，并且头部和状态已经可获得（已接收）。
3    LOADING    响应内容正在接收中（不完整），responseText 属性已经包含部分数据。
4    DONE    下载操作已完成，数据传输已经彻底完成或失败。
在 IE 中，状态与其他浏览器不一样，而是 READYSTATE_UNINITIALIZED (0)、READYSTATE_LOADING (1)、READYSTATE_LOADED (2)、READYSTATE_INTERACTIVE (3) 和READYSTATE_COMPLETE (4)，因此建议直接使用值来表示，如 xhr.readyState === 4。

POST请求

var xhr= new XMLHttpRequest(),
    method = "POST",
    url = "https://www.vircloud.net/";
xhr.open(method, url, true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //POST 方式必须设置请求头。
xhr.send('name=teswe&ee=ef'); //将数据直接发送
xhr.onreadystatechange = function () {
  if(xhr.readyState === 4 && xhr.status === 200) {
    var json = xhr.responseText;  //如果获取到 json 字符串，还需解析
    console.log(json);
  }
}

POST 请求也支持将数据以 JSON 的方式发送：

xhr.setRequestHeader("Content-type","application/json");
var obj = { name: 'zhansgan', age: 18 };
xhr.send(JSON.stringify(obj));
JsCopy
setRequestHeader

XMLHttpRequest.setRequestHeader() 是设置 HTTP 请求头部的方法。此方法必须在 open() 方法和 send() 之间调用。如果多次对同一个请求头赋值，只会生成一个合并了多个值的请求头。

如果没有设置 Accept 属性，则此发送出 send() 的值为此属性的默认值 / 。

安全起见，有些请求头的值只能由 user agent 设置，而不能自定义，具体参见：forbidden header names 和 forbidden response header names。