AJAX = 異步 JavaScript 和 XML。

AJAX 是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)。

通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進(jìn)行更新。

傳統(tǒng)的網(wǎng)頁（不使用 AJAX）如果需要更新內(nèi)容，必需重載整個網(wǎng)頁面。

XMLHttpRequest 是 AJAX 的基礎(chǔ)

variable=new XMLHttpRequest(); //創(chuàng)建XMLHttpRequest

對于老版本瀏覽器，可能會不支持XMLHttpRequest，這時候需要 variable=new ActiveXObject("Microsoft.XMLHTTP");


var xmlhttp; if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();} else{// code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}

XMLHttpRequest 對象用于和服務(wù)器交換數(shù)據(jù)

open(method,url,async)

規(guī)定請求的類型、URL 以及是否異步處理請求。

• method：請求的類型；GET 或 POST
• url：文件在服務(wù)器上的位置
• async：true（異步）或 false（同步）

send(string)

將請求發(fā)送到服務(wù)器。

• string：僅用于 POST 請求

xmlhttp.open("GET","test1.txt",true); xmlhttp.send();

當(dāng)文件非常大的時候就需要使用post，并且post比get更穩(wěn)定

setRequestHeader(header,value)

向請求添加 HTTP 頭。

• header: 規(guī)定頭的名稱
• value: 規(guī)定頭的值?

（這個setRequestHeader然我聯(lián)想到，python的request.get()）

open() 方法的?url?參數(shù)是服務(wù)器上文件的地址：

xmlhttp.open("GET","ajax_test.asp",true);
該文件可以是任何類型的文件，比如 .txt 和 .xml，或者服務(wù)器腳本文件，比如 .asp 和 .php （在傳回響應(yīng)之前，能夠在服務(wù)器上執(zhí)行任務(wù)）。

服務(wù)器響應(yīng)

responseText :?獲得字符串形式的響應(yīng)數(shù)據(jù)。

responseXML :?獲得 XML 形式的響應(yīng)數(shù)據(jù)。

綜合上面知識點，我們可以分析以下代碼：

function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();} else { // code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");} //這里整個條件判斷都是用來申請異步內(nèi)容xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("myDiv").innerHTML=xmlhttp.responseText; //獲得字符串響應(yīng)，并且在id="myDiv"下顯示}}xmlhttp.open("GET","/ajax/test1.txt",true); //與服務(wù)器進(jìn)行交互xmlhttp.send(); }

?

onreadystatechange 事件

當(dāng)請求被發(fā)送到服務(wù)器時，我們需要執(zhí)行一些基于響應(yīng)的任務(wù)。

每當(dāng) readyState 改變時，就會觸發(fā) onreadystatechange 事件。

readyState 屬性存有 XMLHttpRequest 的狀態(tài)信息。

onreadystatechange：存儲函數(shù)（或函數(shù)名），每當(dāng) readyState 屬性改變時，就會調(diào)用該函數(shù)。

readyState：

存有 XMLHttpRequest 的狀態(tài)。從 0 到 4 發(fā)生變化。

• 0: 請求未初始化
• 1: 服務(wù)器連接已建立
• 2: 請求已接收
• 3: 請求處理中
• 4: 請求已完成，且響應(yīng)已就緒

status：

200: "OK"

404: 未找到頁面

?

當(dāng) readyState 等于 4 且狀態(tài)為 200 時，表示響應(yīng)已就緒：

xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}}

?

轉(zhuǎn)載于:https://www.cnblogs.com/ZQUACM-875180305/p/9598715.html

總結(jié)

以上是生活随笔為你收集整理的AJAX 异步加载技术的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。