AJAX 異步加載技術

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, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=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, Safari
      xmlhttp=new XMLHttpRequest();
  }
  else {  // code for IE6, IE5
      xmlhttp=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;
    }
  }