AJAX = 異步 JavaScript 和 XML。

AJAX 是一種用于創建快速動態網頁的技術。

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

傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。

XMLHttpRequest 是 AJAX 的基礎

variable=new XMLHttpRequest(); //創建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 對象用于和服務器交換數據

open(method,url,async)

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

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

send(string)

將請求發送到服務器。

• string：僅用于 POST 請求

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

當文件非常大的時候就需要使用post，并且post比get更穩定

setRequestHeader(header,value)

向請求添加 HTTP 頭。

• header: 規定頭的名稱
• value: 規定頭的值?

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

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

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

服務器響應

responseText :?獲得字符串形式的響應數據。

responseXML :?獲得 XML 形式的響應數據。

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

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");} //這里整個條件判斷都是用來申請異步內容xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("myDiv").innerHTML=xmlhttp.responseText; //獲得字符串響應，并且在id="myDiv"下顯示}}xmlhttp.open("GET","/ajax/test1.txt",true); //與服務器進行交互xmlhttp.send(); }

?

onreadystatechange 事件

當請求被發送到服務器時，我們需要執行一些基于響應的任務。

每當 readyState 改變時，就會觸發 onreadystatechange 事件。

readyState 屬性存有 XMLHttpRequest 的狀態信息。

onreadystatechange：存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。

readyState：

存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。

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

status：

200: "OK"

404: 未找到頁面

?

當 readyState 等于 4 且狀態為 200 時，表示響應已就緒：

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

?

轉載于:https://www.cnblogs.com/ZQUACM-875180305/p/9598715.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。