前端程序員進階：詳解Ajax

AJAX全稱“Asynchronous JavaScript and XML”（異步JavaScript和XML），是指一種創建交互式網頁應用的網頁開發技術。今天就給大家詳解一下Ajax，前端程序員進階必備哦！

AJAX有機地包含了以下幾種技術：基於web標準（standards-based presentation）XHTML+CSS的表示；使用 DOM（Document Object Model）進行動態顯示及交互；

使用 XML 和 XSLT 進行數據交換及相關操作； 使用 XMLHttpRequest 進行異步數據查詢、檢索；

使用 JavaScript 將所有的東西綁定在一起。

Ajax的實現流程是怎樣的？

創建XMLHttpRequest對象，也就是創建一個異步調用對象。

創建一個新的HTTP請求，並指定該HTTP請求的方法、URL及驗證信息。

設置響應HTTP請求狀態變化的函數。

發送HTTP請求。

獲取異步調用返回的數據。

使用JavaScript和DOM實現局部刷新。

基本步驟：

var xhr =null;//創建對象

if(window.XMLHttpRequest){

xhr = new XMLHttpRequest();

}else{

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

xhr.open(“方式”,”地址”,”標誌位”);//初始化請求 `請輸入代碼`

xhr.setRequestHeader(“”,””);//設置http頭信息

xhr.onreadystatechange =function(){}//指定回調函數

xhr.send();//發送請求

默認情況下，在發送XHR請求的同時，還會發送下列頭部信息

Accept: 瀏覽器能夠處理的內容類型

Accept-Charset: 瀏覽器能夠顯示的字符集

Accept-Encoding: 瀏覽器能夠處理的壓縮編碼

Accept-Language: 瀏覽器當前設置的語言

Connection: 瀏覽器與服務器之間連接的類型

Cookie: 當前頁麵設置的任何Cookie

Host: 發出請求的頁麵所在的域

User-Agent: 瀏覽器的用戶代理字符串

Referer: 發出請求的頁麵的URI

1、open()方法的第一個參數用於指定發送請求的方式，這個字符串，不區分大小寫，但通常使用大寫字母。

"GET"和"POST"是得到廣泛支持的"GET"用於常規請求，它適用於當URL完全指定請求資源，當請求對服務器沒有任何副作用以及當服務器的響應是可緩存的情況下。"POST"方法常用於HTML表單。它在請求主體中包含額外數據且這些數據常存儲到服務器上的數據庫中。相同URL的重複POST請求從服務器得到的響應可能不同，同時不應該緩存使用這個方法的請求。除了"GET"和"POST"之外，參數還可以是"HEAD"、"OPTIONS"、"PUT"。而由於安全風險的原因，"CONNECT"、"TRACE"、"TRACK"被禁止使用。

2、open()方法的第二個參數是URL，該URL相對於執行代碼的當前頁麵，且隻能向同一個域中使用相同端口和協議的URL發送請求。如果URL與啟動請求的頁麵有任何差別，都會引發安全錯誤。

3、open()方法的第三個參數是表示是否異步發送請求的布爾值，如果不填寫，默認為true，表示異步發送。

4、如果請求一個受密碼保護的URL，把用於認證的用戶名和密碼作為第4和第5個參數傳遞給open()方法。

send()

send()方法接收一個參數，即要作為請求主體發送的數據。調用send()方法後，請求被分派到服務器。

如果是GET方法，send()方法無參數，或參數為null；如果是POST方法，send()方法的參數為要發送的數據。

什麼是同步請求：(false)

同步請求即是當前發出請求後，瀏覽器什麼都不能做，必須得等到請求完成返回數據之後，才會執行後續的代碼，相當於是排隊，前一個人辦理完自己的事務，下一個人才能接著辦。也就是說，當JS代碼加載到當前AJAX的時候會把頁麵裏所有的代碼停止加載，頁麵處於一個假死狀態，當這個Ajax執行完畢後才會繼續運行其他代碼頁麵解除假死狀態(即當Ajax返回數據後，才執行後麵的function)。

什麼是異步請求：(true)

異步請求就當發出請求的同時，瀏覽器可以繼續做任何事，Ajax發送請求並不會影響頁麵的加載與用戶的操作，相當於是在兩條線上，各走各的，互不影響。

一般默認值為true，異步。異步請求可以完全不影響用戶的體驗效果，無論請求的時間長或者短，用戶都在專心的操作頁麵的其他內容，並不會有等待的感覺。

下麵來區別一下同步和異步有什麼不同：

異步：在異步模式下，當我們使用Ajax發送完請求後，可能還有代碼需要執行。這個時候可能由於種種原因導致服務器還沒有響應我們的請求，但是因為我們采用了異步執行方式，所有包含Ajax請求代碼的函數中的剩餘代碼將繼續執行。如果我們是將請求結果交由另外一個JS函數去處理的，那麼，這個時候就好比兩條線程同時執行一樣。

同步：在同步模式下，當我們使用Ajax發送完請求後，後續還有代碼需要執行，我們同樣將服務器響應交由另一個JS函數去處理，但是這時的代碼執行情況是：在服務器沒有響應或者處理響應結果的JS函數還沒有處理完成return時，包含請求代碼的函數的剩餘代碼是不能夠執行的。就好比單線程一樣，請求發出後就進入阻塞狀態，直到解除阻塞，餘下的代碼才會繼續執行。

Ajax的優點：

1、最大的一點是頁麵無刷新，用戶的體驗非常好。

2、使用異步方式與服務器通信，具有更加迅速的響應能力。。

3、可以把以前一些服務器負擔的工作轉嫁到客戶端，利用客戶端閑置的能力來處理，減輕服務器和帶寬的負擔，節約空間和寬帶租用成本。並且減輕服務器的負擔，Ajax的原則是“按需取數據”，可以最大程度的減少冗餘請求，和響應對服務器造成的負擔。

4、基於標準化的並被廣泛支持的技術，不需要下載插件或者小程序。

5、Ajax可使因特網應用程序更小、更快，更友好。

Ajax的缺點：

1、Ajax不支持瀏覽器back按鈕。

2、安全問題Ajax暴露了與服務器交互的細節。

3、對搜索引擎的支持比較弱。

4、破壞了程序的異常機製。

來源：技術學派頭條號