：基本概念

jQuery的Ajax請求實際上是封裝的一個XHLHttpRequest，從字面意思來看是，XML是一種文件格式，Http是一個網(wǎng)絡請求，Request最開始是用于請求XML文件的，后來不斷擴展可以請求多種類型的文件。

XHLHttpRequest，網(wǎng)絡請求模塊，或者是一個瀏覽器網(wǎng)絡線程。用于從URL網(wǎng)絡上獲取數(shù)據(jù)，有了對象，就可以實現(xiàn)頁面的無刷新請求數(shù)據(jù)，就可以做到一個局部的更新，也可以獲取多種類型的數(shù)據(jù)(ftp、文件)。

2：要實現(xiàn)和使用XMLHttpRequest

它是一個對象，首先我們需要實例化，定義一個：

var xhr=new XMLHttpRequest();

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

//Ajax請求時的參數(shù)設(shè)置
method 請求方式
url 請求地址
async 是否異步
user 用戶名
password 密碼
?
xhr.open(method,url,async,user,password);

4：發(fā)送請求(encodeURLComponent)

xhr.send(data);
等待接收

5：接收網(wǎng)絡請求返回

一般有如下屬性：

• responseText，請求返回的數(shù)據(jù)內(nèi)容，可以是一段文本，是一段二進制或者是一個json
• responseXML

是一個文件，如果響應頭內(nèi)容是text/xml，這個屬性將保留響應數(shù)據(jù)的XML、DOM文檔。

• status，響應的HTTP狀態(tài)，如 200(正常，200-300之間都表示成功) 304(使用緩存) 404(沒找到) 500(服務器內(nèi)部錯誤)等
• statusText，HTTP狀態(tài)說明
• readyStatus，請求/響應過程的當前活動階段，一共有5個值：0(未被調(diào)用open)，1(已被調(diào)用open但未發(fā)送)，2(已調(diào)用send)，3(已接收到請求返回的數(shù)據(jù))，4(請求已完成)。
• timeout，設(shè)置請求超時時間

xhr.onreadystatechange=()=> {
 if (xhr.readyStatus===4) {
 /* HTTP 狀態(tài)在 200-300 之間表示請求成功 */
 /* HTTP 狀態(tài)為 304 表示請求內(nèi)容未發(fā)生改變，可直接從緩存中讀取 */
 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數(shù)據(jù) */
 const data=options.data;
 /* 實例化XMLHttpRequest */
 const xhr=new XMLHttpRequest();
 /* 設(shè)置超時時間 */
 if (options.timeout && options.timeout > 0) {
 xhr.timeout=options.timeout
 }
?
 return new Promise ( (resolve, reject)=> {
 /* 添加超時回調(diào) */
 xhr.ontimeout=()=> reject && reject('請求超時');
 /* 成功回調(diào) */
 xhr.onreadystatechange=()=> {
 if (xhr.readyState==4) {
 if (xhr.status >=200 && xhr.status < 300 || xhr.status==304) {
 resolve && resolve(xhr.responseText);
 } else {
 reject && reject();
 }
 }
 }
?
 /* 失敗回調(diào) */
 xhr.onerror=err=> reject && reject(err);
?
 /* 拼接參數(shù) */
 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直接發(fā)送拼接的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)
 }
 })
}

總結(jié)：關(guān)于網(wǎng)絡請求，一般常用的有四種：

一個是get，獲取網(wǎng)絡資源

然后是post，一般用于提交數(shù)據(jù)，提交數(shù)據(jù)的參數(shù)是放在請求的body里面的

delete，刪除

put，標準的一個修改

關(guān)于Http的簡單請求和非簡單請求或者是跨域，在跨域時由于瀏覽器的安全機制，涉及到一個問題關(guān)于在Ajax請求 ，是在請求之后還是請求之前判斷跨域，這時候就需要了解一下簡單請求和復雜請求。

簡單請求是先把資源請求回來，然后再去判斷是否跨域。如果是一個復雜請求，瀏覽器會先去發(fā)送一個嗅探或者是欲請求（一般是一個option），先判斷是否跨域，如果不是跨域那就執(zhí)行，如果是跨域那就直接不請求了。一般來講，如果get不修改它的Content-Type，那么基本上都是簡單請求。post如果采用www-form的形式，也是一個簡單請求。

這篇文章主要是分享了Javascript中XMLHttpRequest對象的基本屬性和方法, 從實例化、初始化、發(fā)送和接受四個階段完成了Ajax網(wǎng)絡請求核心內(nèi)容封裝。

avaScript對象標記是基于鍵值對和有序列表的結(jié)構(gòu)化數(shù)據(jù)基于文本的表示。盡管JSON源自JavaScript，但它在大多數(shù)主要的編程語言中都是通過本地或庫來支持的。JSON通常用于在Web客戶端和Web服務器之間交換信息。

在過去15年，JSON已經(jīng)在網(wǎng)絡上普遍存在。今天，它幾乎是所有公開Web服務的首選格式，同時也經(jīng)常用于私人網(wǎng)絡服務。

JSON的受歡迎程度導致許多數(shù)據(jù)庫的本機JSON支持。關(guān)系數(shù)據(jù)庫，如PostgreSQL和MySQL，現(xiàn)在支持存儲和查詢JSON數(shù)據(jù)。MongoDB和Neo4j等NoSQL數(shù)據(jù)庫也支持JSON，盡管MongoDB在后臺使用了稍微修改后的JSON二進制版本。

下面我們來看一下JSON，并討論它的來源，它與XML相比的優(yōu)勢和它的缺點等等。首先，我們從一個例子開始：

上面的結(jié)構(gòu)清楚定義了一個人的某些屬性。它包括姓氏，已登錄次數(shù)，是否為作家，所在公司名稱以及所養(yǎng)寵物名單和類型（在本例中僅一個）。類似于上述的結(jié)構(gòu)可以從服務器傳遞到web瀏覽器或移動應用，然后這些應用將執(zhí)行諸如顯示數(shù)據(jù)或保存數(shù)據(jù)之類的操作以備日后參考。

JSON是一種通用數(shù)據(jù)格式，其數(shù)值類型最少：字符串，數(shù)字，布爾值，列表，對象和空值。雖然符號是JavaScript的一個子集，但這些類型都以所有常見的編程語言表示，使得JSON成為跨越語言差距傳輸數(shù)據(jù)的良好候選者。

為什么要使用JSON？

要了解JSON的有用性和重要性，我們必須了解一下網(wǎng)絡互動歷史。

在21世紀初，網(wǎng)絡上的互動開始發(fā)生轉(zhuǎn)變。當時，瀏覽器主要作為一個愚蠢的客戶端顯示信息，服務器做了所有努力準備顯示內(nèi)容。當用戶點擊瀏覽器中的鏈接或按鈕時，將向服務器發(fā)送請求，服務器將所需的信息轉(zhuǎn)換為HTML，瀏覽器會向用戶呈現(xiàn)一個HTML頁面。當要求瀏覽器重新呈現(xiàn)頁面上的所有內(nèi)容，即使只有一部分頁面已更改，這種模式都是緩慢而低效的。

由于全頁面重新加載成本高昂，因此網(wǎng)頁開發(fā)人員開始尋求更新的技術(shù)來改善用戶體驗。同時，在Internet Explorer 5中引入的頁面顯示時，在后臺進行Web請求的能力被證明是加載數(shù)據(jù)以便顯示的可行方法。點擊刷新按鈕不會重新加載頁面的整個內(nèi)容，而是觸發(fā)在后臺加載的Web請求。加載內(nèi)容時，可以使用瀏覽器中的通用編程語言JavaScript（JavaScript）來操縱、保存和顯示數(shù)據(jù)。

最初，數(shù)據(jù)以XML格式傳輸（參見下面的示例），但XML在JavaScript中是冗長和難以管理的。JavaScript已經(jīng)有對象，這是一種在語言中表達數(shù)據(jù)的方法，所以Douglas Crockford將該表達式的一部分作為新的數(shù)據(jù)交換格式規(guī)范，并將其稱為JSON。JSON可以讓人們更容易閱讀，并讓瀏覽器進行解析，很快Web開發(fā)人員喜歡JSON就勝過XML了。

到目前為止，JSON是用于在網(wǎng)絡和移動客戶端和后端服務之間交換數(shù)據(jù)的事實標準。

JSON與XML

如上所述，JSON替代了XML，XML在新系統(tǒng)中越來越少見，很容易看出為什么。以下是上面那個示例的XML版本：

除此之外，XML在解析為JavaScript數(shù)據(jù)結(jié)構(gòu)時也引入了一些歧義。將XML轉(zhuǎn)換為JavaScript對象可能需要數(shù)十到數(shù)百行代碼，最終需要根據(jù)解析對象進行定制。將JSON轉(zhuǎn)換為JavaScript對象需要一行代碼，并且不需要有關(guān)解析對象的任何知識。

JSON的限制

雖然JSON是一種相對簡潔，靈活的數(shù)據(jù)格式，易于在許多編程語言中使用，但格式上還是有一些缺點。這里有五個主要的限制：

1、沒有模式。一方面，這意味著程序員可以完全靈活地以任何方式表示數(shù)據(jù)。另一方面，這意味著可以非常輕松地創(chuàng)建錯誤數(shù)據(jù)。

2、僅一個數(shù)字類型：IEEE-754雙精度浮點格式是很好用的，但它意味著不能利用許多編程語言中可用的多樣和細微的數(shù)字類型。

3、沒有日期類型。這意味著開發(fā)人員必須使用一些字符串表示日期，這會導致格式化差異，或者必須以1970年1月1日的形式表示日期。

4、沒有注釋。這使得程序員無法內(nèi)聯(lián)注釋字段，需要添加額外的文檔并會增加誤解的可能性。

5、雖然JSON不像XML那么冗長，但它也不是最簡潔的數(shù)據(jù)交換格式。對于大容量或?qū)Ｓ梅?，需要使用更高效的?shù)據(jù)格式。

什么時候應該使用JSON？

如果程序員正在編寫與瀏覽器或本地移動應用程序通信的軟件，則應使用JSON作為數(shù)據(jù)格式，使用像XML這樣的格式是一個過時的選擇。

在服務器到服務器通信的情況下，可能最好使用像Apache Avro或Apache Thrift這樣的序列化框架。JSON不是一個壞的選擇，仍然可能正是你需要的，但不如上述兩個效果好。

如果你正在使用NoSQL數(shù)據(jù)庫，在支持JSON作為類型的關(guān)系數(shù)據(jù)庫中，一個很好的經(jīng)驗法則是盡可能少地使用它。針對符合特定模式的結(jié)構(gòu)化數(shù)據(jù)調(diào)整關(guān)系數(shù)據(jù)庫。雖然大多數(shù)支持JSON形式更靈活的數(shù)據(jù)，但在查詢這些JSON對象屬性時，性能將會受到影響。

JSON是用于在Web服務器、瀏覽器和移動應用程序之間發(fā)送數(shù)據(jù)的格式。其簡單的設(shè)計和靈活性使其易于閱讀和理解，在大多數(shù)情況下，程序員可以輕松地以所選擇的編程語言進行操作。缺乏嚴格的架構(gòu)可以實現(xiàn)格式的靈活性，但這種靈活性有時難以確保正確閱讀和編寫JSON。

程序員可能需要多做一些工作來處理像Scala或Elm這樣的強類型語言中的JSON，但廣泛采用JSON意味著有庫和實用程序來幫助完成所有最難的部分。 在構(gòu)建新的Web服務時，選擇JSON可能表示對相關(guān)領(lǐng)域缺乏了解。