：基本概念

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

avaScript对象标记是基于键值对和有序列表的结构化数据基于文本的表示。尽管JSON源自JavaScript，但它在大多数主要的编程语言中都是通过本地或库来支持的。JSON通常用于在Web客户端和Web服务器之间交换信息。

在过去15年，JSON已经在网络上普遍存在。今天，它几乎是所有公开Web服务的首选格式，同时也经常用于私人网络服务。

JSON的受欢迎程度导致许多数据库的本机JSON支持。关系数据库，如PostgreSQL和MySQL，现在支持存储和查询JSON数据。MongoDB和Neo4j等NoSQL数据库也支持JSON，尽管MongoDB在后台使用了稍微修改后的JSON二进制版本。

下面我们来看一下JSON，并讨论它的来源，它与XML相比的优势和它的缺点等等。首先，我们从一个例子开始：

上面的结构清楚定义了一个人的某些属性。它包括姓氏，已登录次数，是否为作家，所在公司名称以及所养宠物名单和类型（在本例中仅一个）。类似于上述的结构可以从服务器传递到web浏览器或移动应用，然后这些应用将执行诸如显示数据或保存数据之类的操作以备日后参考。

JSON是一种通用数据格式，其数值类型最少：字符串，数字，布尔值，列表，对象和空值。虽然符号是JavaScript的一个子集，但这些类型都以所有常见的编程语言表示，使得JSON成为跨越语言差距传输数据的良好候选者。

为什么要使用JSON？

要了解JSON的有用性和重要性，我们必须了解一下网络互动历史。

在21世纪初，网络上的互动开始发生转变。当时，浏览器主要作为一个愚蠢的客户端显示信息，服务器做了所有努力准备显示内容。当用户点击浏览器中的链接或按钮时，将向服务器发送请求，服务器将所需的信息转换为HTML，浏览器会向用户呈现一个HTML页面。当要求浏览器重新呈现页面上的所有内容，即使只有一部分页面已更改，这种模式都是缓慢而低效的。

由于全页面重新加载成本高昂，因此网页开发人员开始寻求更新的技术来改善用户体验。同时，在Internet Explorer 5中引入的页面显示时，在后台进行Web请求的能力被证明是加载数据以便显示的可行方法。点击刷新按钮不会重新加载页面的整个内容，而是触发在后台加载的Web请求。加载内容时，可以使用浏览器中的通用编程语言JavaScript（JavaScript）来操纵、保存和显示数据。

最初，数据以XML格式传输（参见下面的示例），但XML在JavaScript中是冗长和难以管理的。JavaScript已经有对象，这是一种在语言中表达数据的方法，所以Douglas Crockford将该表达式的一部分作为新的数据交换格式规范，并将其称为JSON。JSON可以让人们更容易阅读，并让浏览器进行解析，很快Web开发人员喜欢JSON就胜过XML了。

到目前为止，JSON是用于在网络和移动客户端和后端服务之间交换数据的事实标准。

JSON与XML

如上所述，JSON替代了XML，XML在新系统中越来越少见，很容易看出为什么。以下是上面那个示例的XML版本：

除此之外，XML在解析为JavaScript数据结构时也引入了一些歧义。将XML转换为JavaScript对象可能需要数十到数百行代码，最终需要根据解析对象进行定制。将JSON转换为JavaScript对象需要一行代码，并且不需要有关解析对象的任何知识。

JSON的限制

虽然JSON是一种相对简洁，灵活的数据格式，易于在许多编程语言中使用，但格式上还是有一些缺点。这里有五个主要的限制：

1、没有模式。一方面，这意味着程序员可以完全灵活地以任何方式表示数据。另一方面，这意味着可以非常轻松地创建错误数据。

2、仅一个数字类型：IEEE-754双精度浮点格式是很好用的，但它意味着不能利用许多编程语言中可用的多样和细微的数字类型。

3、没有日期类型。这意味着开发人员必须使用一些字符串表示日期，这会导致格式化差异，或者必须以1970年1月1日的形式表示日期。

4、没有注释。这使得程序员无法内联注释字段，需要添加额外的文档并会增加误解的可能性。

5、虽然JSON不像XML那么冗长，但它也不是最简洁的数据交换格式。对于大容量或专用服务，需要使用更高效的数据格式。

什么时候应该使用JSON？

如果程序员正在编写与浏览器或本地移动应用程序通信的软件，则应使用JSON作为数据格式，使用像XML这样的格式是一个过时的选择。

在服务器到服务器通信的情况下，可能最好使用像Apache Avro或Apache Thrift这样的序列化框架。JSON不是一个坏的选择，仍然可能正是你需要的，但不如上述两个效果好。

如果你正在使用NoSQL数据库，在支持JSON作为类型的关系数据库中，一个很好的经验法则是尽可能少地使用它。针对符合特定模式的结构化数据调整关系数据库。虽然大多数支持JSON形式更灵活的数据，但在查询这些JSON对象属性时，性能将会受到影响。

JSON是用于在Web服务器、浏览器和移动应用程序之间发送数据的格式。其简单的设计和灵活性使其易于阅读和理解，在大多数情况下，程序员可以轻松地以所选择的编程语言进行操作。缺乏严格的架构可以实现格式的灵活性，但这种灵活性有时难以确保正确阅读和编写JSON。

程序员可能需要多做一些工作来处理像Scala或Elm这样的强类型语言中的JSON，但广泛采用JSON意味着有库和实用程序来帮助完成所有最难的部分。 在构建新的Web服务时，选择JSON可能表示对相关领域缺乏了解。