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 對象的三個重要的屬性：

屬性

描述