1：基本概念

jQuery的Ajax请求实际上是封装的一个XHLHttpRequest，从字面意思来看是，XML是一种文件格式，Http是一个网络请求，Request最开始是用于请求XML文件的，后来不断扩展可以请求多种类型的文件。

XHLHttpRequest，网络请求模块，或者是一个浏览器网络线程。用于从URL网络上获取数据，有了对象，就可以实现页面的无刷新请求数据，就可以做到一个局部的更新，也可以获取多种类型的数据(ftp、文件)。

2：要实现和使用XMLHttpRequest

它是一个对象，首先我们需要实例化，定义一个：

var xhr = new XMLHttpRequest();

3：初始化请求，给定一些必要的配置，给它一些property

//Ajax请求时的参数设置
method 请求方式
url 请求地址
async 是否异步
user 用户名
password 密码
?
xhr.open(method,url,async,user,password);

4：发送请求(encodeURLComponent)

xhr.send(data);
等待接收

5：接收网络请求返回

一般有如下属性：

• responseText，请求返回的数据内容，可以是一段文本，是一段二进制或者是一个json
• responseXML

是一个文件，如果响应头内容是text/xml，这个属性将保留响应数据的XML、DOM文档。

• status，响应的HTTP状态，如 200(正常，200-300之间都表示成功) 304(使用缓存) 404(没找到) 500(服务器内部错误)等
• statusText，HTTP状态说明
• readyStatus，请求/响应过程的当前活动阶段，一共有5个值：0(未被调用open)，1(已被调用open但未发送)，2(已调用send)，3(已接收到请求返回的数据)，4(请求已完成)。
• timeout，设置请求超时时间

xhr.onreadystatechange = () => {
 if (xhr.readyStatus === 4) {
 /* HTTP 状态在 200-300 之间表示请求成功 */
 /* HTTP 状态为 304 表示请求内容未发生改变，可直接从缓存中读取 */
 if (xhr.status >= 200 &&
 xhr.status < 300 ||
 xhr.status == 304) {
 console.log('请求成功', xhr.responseText)
 }
 }
}

6：封装(promise)

function ajax (options) {
 /* 获取请求地址 */
 let url = options.url;
 /* 获取请求方法 */
 const method = options.method.toLocaleLowerCase() || 'get';
 /* 默认异步 */
 const async = options.async != false;
 /* 获取请求request数据 */
 const data = options.data;
 /* 实例化XMLHttpRequest */
 const xhr = new XMLHttpRequest();
 /* 设置超时时间 */
 if (options.timeout && options.timeout > 0) {
 xhr.timeout = options.timeout
 }
?
 return new Promise ( (resolve, reject) => {
 /* 添加超时回调 */
 xhr.ontimeout = () => reject && reject('请求超时');
 /* 成功回调 */
 xhr.onreadystatechange = () => {
 if (xhr.readyState == 4) {
 if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
 resolve && resolve(xhr.responseText);
 } else {
 reject && reject();
 }
 }
 }
?
 /* 失败回调 */
 xhr.onerror = err => reject && reject(err);
?
 /* 拼接参数 */
 let paramArr = [];
 let encodeData;
 if (data instanceof Object) {
 for (let key in data) {
 paramArr.push( encodeURIComponent(key) + '=' + encodeURIComponent(data[key]) );
 }
 encodeData = paramArr.join('&');
 }
?
 /* get请求 */
 if (method === 'get') {
 const index = url.indexOf('?')
 if (index === -1) url += '?'
 else if (index !== url.length -1) url += '&'
 url += encodeData
 }
?
 /* 初始化请求 */
 xhr.open(method, url, async);
?
 /* get直接发送拼接的URL */
 if (method === 'get') xhr.send(null);
?
 if (method === 'post') {
 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8')
 xhr.send(encodeData)
 }
 })
}

总结：关于网络请求，一般常用的有四种：

一个是get，获取网络资源

然后是post，一般用于提交数据，提交数据的参数是放在请求的body里面的

delete，删除

put，标准的一个修改

关于Http的简单请求和非简单请求或者是跨域，在跨域时由于浏览器的安全机制，涉及到一个问题关于在Ajax请求 ，是在请求之后还是请求之前判断跨域，这时候就需要了解一下简单请求和复杂请求。

简单请求是先把资源请求回来，然后再去判断是否跨域。如果是一个复杂请求，浏览器会先去发送一个嗅探或者是欲请求（一般是一个option），先判断是否跨域，如果不是跨域那就执行，如果是跨域那就直接不请求了。一般来讲，如果get不修改它的Content-Type，那么基本上都是简单请求。post如果采用www-form的形式，也是一个简单请求。

这篇文章主要是分享了Javascript中XMLHttpRequest对象的基本属性和方法, 从实例化、初始化、发送和接受四个阶段完成了Ajax网络请求核心内容封装。