温馨提示：
本文所述内容不具普遍性，可能因操作环境差异而与实际有所出入，故请勿照搬照抄，仅供参考。
之前有研究过《非 jQuery 实现 Ajax、Jsonp 方法》，是利用原生 JavaScript 构造了类似 jQuery 的异步请求方法，有时候我们并没有那么复杂的需求，因此可以直接使用原生 JavaScript 发起 GET 或 POST 请求。
步骤
不管是 GET 还是 POST 请求，主要分三步：
- 第一步：创建需要的对象，这里主要用到的是
XMLHttpRequest，可能注意需要考虑早期的 IE； - 第二步：打开连接；
- 第三步：发送请求；
- 第三步：接收处理返回的数据；
GET 请求
代码示例：
var xhr= new XMLHttpRequest(),
method = "GET",
url = "https://www.vircloud.net/";
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));setRequestHeader
XMLHttpRequest.setRequestHeader() 是设置 HTTP 请求头部的方法。此方法必须在 open() 方法和 send() 之间调用。如果多次对同一个请求头赋值，只会生成一个合并了多个值的请求头。
如果没有设置 Accept 属性，则此发送出 send() 的值为此属性的默认值 */* 。
安全起见，有些请求头的值只能由 user agent 设置，而不能自定义，具体参见：forbidden header names 和 forbidden response header names。
关于 JavaScript 的 XMLHttpRequest() 方法的详细说明，可以参考《Mozilla MDN 在线文档》。
参考文章：
