Ajax的理解

簡介：

是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。

是什么？

• 創建快速動態網頁的技術

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

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

AJAX基於因特網標准

• XMLHttpRequest對象（與服務器異步交換數據）
• JavaScript/DOM（顯示/取回信息）
• CSS(設置數據的樣式)
• XML(常用作數據傳輸的格式)

AJAX-創建XMLHttpRequest對象

創建XMLHttpRequest對象的語法:

variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象：

variable=new ActiveXObject("Microsoft.XMLHTTP");

為了應對所有的現代瀏覽器，包括 IE5 和 IE6，請檢查瀏覽器是否支持 XMLHttpRequest 對象。如果支持，則創建 XMLHttpRequest 對象。如果不支持，則創建 ActiveXObject ：

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 瀏覽器執行代碼
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

AJAX-向服務器發送請求

XMLHttpRequest對象用於和服務器交換數據

向服務器發送請求

如需將請求發送到服務器，我們使用 XMLHttpRequest 對象的 open() 和 send() 方法：

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

方法和描述

open(method,url,async)	規定請求的類型，URL以及是否異地處理請求 method:請求的類型；GET或POST url:文件在服務器上的位置 async:true(異步)或false(同步)
send(string)	將請求發送到服務器 string:僅用於POST請求

 

 

 

 

 

 

 

GET還是POST?

與 POST 相比，GET 更簡單也更快，並且在大部分情況下都能用。

然而，在以下情況中，請使用 POST 請求：

• 無法使用緩存文件（更新服務器上的文件或數據庫）
• 向服務器發送大量數據（POST 沒有數據量限制）
• 發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

GET請求

xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send();

POST請求

xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();

AJAX-服務器響應

如需獲得來自服務器的響應，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。

屬性	描述
responseText	獲得字符串形式的響應數據。
responseXML	獲得 XML 形式的響應數據。

 

 

 

responseText 屬性

如果來自服務器的響應並非 XML，請使用 responseText 屬性。

responseText 屬性返回字符串形式的響應，因此您可以這樣使用：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

responseXML 屬性

如果來自服務器的響應是 XML，而且需要作為 XML 對象進行解析，請使用 responseXML 屬性：

請求 cd_catalog.xml 文件，並解析響應：

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
    txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;

AJAX-onreadystatechange事件

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

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

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

下面是 XMLHttpRequest 對象的三個重要的屬性：

屬性	描述