1：基本概念

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

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

2：要实现和使用XMLHttpRequest

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

var xhr = new XMLHttpRequest();

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

xhr.send(data);等待接收

一般有如下属性：

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

是一个文件，如果响应头内容是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) } }}

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网络请求核心内容封装。