1.Ajax 簡介
1.1Ajax 是什麼？
Ajax (Asynchronous JavaScript and XML) 是一種Web應用技術,可以借助用戶端腳本(javascript)與服務端應用進行異步通訊，擷取服務端資料以後,可以進行局部重新整理。進而提高資料的響應和渲染速度。
1.2Ajax 技術應用場景？
Ajax技術最大的優勢就是底層異步,然後局部重新整理,進而提高使用者體驗,這種技術現在在很多項目中都有很好的應用,例如:
商品系統。
評價系統。
地圖系統。
……
AJAX可以僅向伺服器發送并取回必須的資料，并在用戶端采用JavaScript處理來自伺服器的響應。這樣在伺服器和浏覽器之間交換的資料大量減少，伺服器響應的速度就更快了。但Ajax技術也有劣勢，最大劣勢是不能直接進行跨域通路。
1.3Ajax 技術時序模型分析？
傳統Web應用中的，同步請求應用時序模型分析，如圖-3所示：
在圖-3中，用戶端向服務端向服務端發送請求需要等待服務端的響應結果，服務端傳回資料以後，用戶端可以繼續發送請求。
基于Ajax技術的Web異步請求響應模型如圖-4所示：
在圖-4中，用戶端可以向服務端發送異步請求，用戶端無需等待服務端的響應結果，可以不斷向服務端發送請求。
2.Ajax 快速入門
2.1 Ajax 請求響應過程分析
所有的Ajax 請求都會基于DOM(HTML元素)事件，通過XHR（XMLHttpRequest）對象實作與服務端異步通訊局部更新，如圖-4所示：
2.2 Ajax 程式設計基本步驟分析
第一步：基于dom事件建立XHR對象(XMLHttpRequest對象)
第二步：注冊XHR對象狀态監聽，通過回調函數(callback)處理狀态資訊。
第三步：建立與服務端的連接配接
第四步：發送異步請求實作與服務端的通訊
第五步：通過回調（callback）函數，獲得響應結果并進行資料更新.(非阻塞)
2.3. Ajax Get 請求操作實作
基于ajax技術中的XMLHttpRequest對象，向服務端發起異步Get請求，關鍵代碼分析如下：
function doAjaxGet(url,params,callback){
//1.建立XmlHttpRequest對象
var xhr=new XMLHttpRequest();
//2.設定狀态監聽，監聽XmlHttpRequest對象與服務端通訊的過程(例如連接配接是否建立，請求是否在處理，響應是否已産生)
xhr.onreadystatechange=function(){//callback(回調函數)
//基于xhr對象擷取的通訊狀态，對響應資料進行處理
if(xhr.readyState==4&&xhr.status==200){//500表示服務端出錯了
//服務端響應的結果會傳遞給XHR對象，我們可以借助responseText擷取響應結果
callback(xhr.responseText);
}
}
//3.建立與服務端的連接配接
xhr.open("GET",url+"?"+params,true);//true表示異步
//4.發送請求
xhr.send(null); //Get請求，send方法不傳内容
//5.對響應結果進行處理(在回調函數中處理)。
}
2.3.Ajax Post 請求操作實作
基于ajax中XMLHttpRequest對象，向服務端發起異步Post請求。對于post請求在發送請求執行需要設定請求頭,見紅色代碼部分。
function doAjaxPost(url,params,callback){
//1.建立XmlHttpRequest對象
var xhr=new XMLHttpRequest();
//2.設定狀态監聽，監聽XmlHttpRequest對象與服務端通訊的過程.
xhr.onreadystatechange=function(){//callback(回調函數)
//基于xhr對象擷取的通訊狀态，對響應資料進行處理
if(xhr.readyState==4&&xhr.status==200){//500表示服務端出錯了
//服務端響應的結果會傳遞給XHR對象，
//我們可以借助xhr.responseText擷取響應結果
callback(xhr.responseText);
}
}
//3.建立與服務端的連接配接
xhr.open("POST",url,true);//true表示異步
xhr.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
//4.發送請求
xhr.send(params); //post請求将參數寫到send方法
//5.對響應結果進行處理(在回調函數中處理)。
}
給個關注不迷路哦!或者點選收藏也可以的哦!