大家好，又見面了，我是你們的朋友全棧君。
什麼是 Ajax
Ajax ： 即 異步JavaScript 和 XML ，Ajax 是一種用于建立快速動态網頁的技術。通過在背景與伺服器進行少量資料交換，Ajax 可以使網頁實作異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新，而傳統不使用Ajax的網頁，如果需要更新内容，必需重載整個網頁面。
Ajax 的工作原理
Ajax 的工作原理相當關于在使用者和伺服器之間加了一個中間層（Ajax 引擎），使使用者操作與伺服器響應異步化，并不是所有的使用者請求都送出給伺服器。像一些資料驗證和資料處理等都交給Ajax 引擎自己來做，隻有确定需要從伺服器讀取新資料時再由Ajax 引擎代為向伺服器送出請求。
傳統的Web 應用模型
Ajax Web 應用模型
實作 AJAX 的基本步驟
要完整實作一個AJAX 異步調用和局部重新整理，通常需要以下幾個步驟：
1、建立XML HttpRequest 對象，即建立一個異步調用對象。
2、建立一個新的HTTP 請求，并指定該HTTP 請求的方法，URL及驗證資訊
3、設定響應HTTP請求狀态變化的函數。
4、發送HTTP 請求。
5、擷取異步調用傳回的資料。
6、使用JavaScript和DOM 實作局部重新整理
1、建立XMLHttpRequest對象
不同浏覽器使用得異步調用對象有所不同，在 IE浏覽器中異步調用使用得是XMLHTTP元件中的XMLHttpRequest對象，而在 Netscape 、 Firefox 浏覽器 中則直接使用 XMLHttpRequest 元件，是以，在不同浏覽器中建立 XMLHttpRequest 對象的方式有所不同。
在IE浏覽器中建立XMLHttpRequest對象的方式
var XMLHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); 複制
在 Netscape 、 Firefox 浏覽器 中建立 XMLHttpRequest 對象的方式
var XMLHttpRequest = new XMLHttpRequest(); 複制
由于無法确定使用者使用的是什麼浏覽器，是以在建立XMLHttpRequest對象時，最好把兩種方法都寫上，如下代碼所示。
var xmlHttpRequest ; // 建立一個變量，用于存放 XMLHttpRequest 對象
function createXMLHttpRequest() {
if(window.ActiveXObject()){
// 判斷是否是IE浏覽器
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP")
}
else if(window.XMLHttpRequest){
// 判斷是否是 Netscape 或者其它 支援 XMLHttpRequest 元件的浏覽器
xmlHttpRequest = new XMLHttpRequest()
}
}
createXMLHttpRequest() // 調用建立對象的方法 複制
如果浏覽器既不支援ActiveX控件,也不支援XMLHttpRequest元件,那麼就不會對xmlHttpRequest變量指派.
2、建立HTTP 請求
建立 XMLHttpRequest 對象後，必須為 該對象建立HTTP 請求，用于說明 XMLHttpRequest 對象從哪裡擷取資料。
XMLHttpRequest.open(method,URL,async,username,password) 複制
各參數的解析：
1、method 參數是用于請求的 HTTP 方法。值包括 GET 、POST、HEAD、PUT、DELETE（不區分大小寫）
2、url 參數是請求的主體。大多數浏覽器實施了一個同源安全政策，并且要求這個URL 與包含腳本的文本具有相同的主機名和端口
3、async 參數訓示請求使用應該異步執行。如果這個參數為 false，代表請求是同步的，後續對 send() 的調用将阻塞，直到響應完全接受；如果這個參數是 true 或省略，請求是異步的，且通常需要一個 onreadystatechange 事件句柄。
4、username 和 password 參數是可選的，為 url 所需的授權提供認證資格。如果指定了，它們會覆寫 url 自己指定的任何資格。
3、設定響應HTTP 請求狀态變化的函數
建立完 HTTP 請求之後，就可以将HTTP請求發送給Web 伺服器了，發送 HTTP 請求的目的是為了接受從伺服器中傳回的資料。從建立XMLHttpRequest對象，到發送資料、接收資料，一共會經曆5種狀态
1、未初始化狀态。在建立完XMLHttpRequest對象時，該對象處于未初始化狀态，此時XMLHttpRequest對象的readyState屬性值為0。
2、初始化狀态。在建立完XMLHttpRequest對象後使用open()方法建立了HTTP請求時，該對象處于初始化狀态。此時XMLHttpRequest對象的readyState屬性值為1。
3、發送資料狀态。在初始化XMLHttpRequest對象後，使用send()方法發送資料時，該對象處于發送資料狀态，此時XMLHttpRequest對象的readyState屬性值為2。
4、接收資料狀态。Web伺服器接收完資料并進行處理完畢之後，向用戶端傳送傳回的結果。此時，XMLHttpRequest對象處于接收資料狀态，XMLHttpRequest對象的readyState屬性值為3。
5、完成狀态。XMLHttpRequest對象接收資料完畢後，進入完成狀态，此時XMLHttpRequest對象的readyState屬性值為4。此時接收完畢後的資料存入在用戶端計算機的記憶體中，可以使用responseText屬性或responseXml屬性來擷取資料。
XMLHttpRequest對象 隻有完後了以上5個步驟後，才可以擷取從伺服器端傳回的資料，是以要想從伺服器端獲得傳回的資料，就必須要先判斷 XMLHttpRequest 對象的狀态。
XMLHttpRequest 對象可以響應 readystatechange 事件，該事件在 XMLHttpRequest 對象狀态改變時激發，也就是在 readyState 屬性發生變化時，是以可以通過 readystatechange 事件調用一個函數，在函數裡判斷 XMLHttpRequest 對象的 readyState 屬性值，如果readyState === 4 則使用 responseText 屬性或 responseXml 屬性來擷取資料。
XMLHttpRequest.onreadystatechange = getData; // 設定 XMLHttpRequest 對象狀态發生改變時調用的函數
function getData(){
// 判斷XMLHttpRequest對象的readyState屬性值是否為 4 ，如果為4則表示異步調用完成
if(xmlHttpRequest.readyState === 4){
// 擷取資料的語句
}
} 複制
4、設定擷取伺服器傳回資料的語句
如果XMLHttpRequest對象的readyState屬性值等于4，表示異步調用過程完畢。這時候就可以擷取資料了。異步調用過程完畢，并不代表異步調用成功了，如果要判斷異步調用是否成功，還要判斷 XMLHttpRequest 對象的status屬性值，隻有status === 200 ，才表示異步調用成功。
如果HTML檔案不是在Web 伺服器上運作，而是在本地運作，則 xmlHttpRequest.status 的傳回值為 0 ，
XMLHttpRequest.onreadystatechange = getData; // 設定 XMLHttpRequest 對象狀态發生改變時調用的函數
function getData(){
// 判斷XMLHttpRequest對象的readyState屬性值是否為 4 ，如果為4則表示異步調用完成
if(xmlHttpRequest.readyState === 4){
if(xmlHttpRequest.status === 200 || xmlHttpRequest.status === 0 ){
// 擷取資料的語句
document.write(xmlHttpRequest.responseText);//将傳回結果以字元串形式輸出
}
}
} 複制
5、發送HTTP請求
經過上面四個步驟後，就可以将HTTP 請求發到Web 伺服器上去了，使用 XMLHttpRequest 的send() 方法。
XMLHttpRequest.send(data)
// 其中data是個可選參數，如果請求的資料不需要參數，即可以使用null來替代。 複制
執行個體代碼：
<html>
<head>
<title>AJAX執行個體</title>
<script language="javascript" type="text/javascript">
var xmlHttpRequest; //定義一個變量用于存放XMLHttpRequest對象
//定義一個用于建立XMLHttpRequest對象的函數
function createXMLHttpRequest(){
if(window.ActiveXObject){
//IE浏覽器的建立方式
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
//Netscape浏覽器中的建立方式
xmlHttpRequest = new XMLHttpRequest();
}
}
//響應HTTP請求狀态變化的函數
function httpStateChange(){
if(xmlHttpRequest.readyState == 4){
//判斷異步調用是否成功,若成功開始局部更新資料
if(xmlHttpRequest.status == 200||xmlHttpRequest.status == 0) {
var node = document.getElementById("myDIv");//查找節點
node.firstChild.nodeValue = xmlHttpRequest .responseText;//更新資料
} else {
//如果異步調用未成功,彈出警告框,并顯示出錯資訊
alert("error:HTTP狀态碼為:"+xmlHttpRequest.status + ",HTTP狀态資訊為:" + xmlHttpRequest.statusText);
}
}
}
//異步調用伺服器段資料
function getData(name,value){
createXMLHttpRequest();//建立XMLHttpRequest對象
if(xmlHttpRequest!=null){
xmlHttpRequest.open("get","ajax.text",true);//建立HTTP請求
xmlHttpRequest.onreadystatechange = httpStateChange;//HTTP請求狀态變化的函數
xmlHttpRequest.send(null);//發送請求
}
}
</script>
</head>
<body>
<div id="myDiv">原資料</div>
<input type = "button" value = "更新資料" onclick = "getData()">
</body>
</html> 複制
釋出者：全棧程式員棧長，轉載請注明出處：https://javaforall.cn/145346.html原文連結：https://javaforall.cn