圖解Ajax工作原理

    轉載請注明原文地址：http://www.cnblogs.com/ygj0930/p/6126542.html

    Ajax指Asynchronous JavaScript and XML（異步的 JavaScript 和 XML），最大的優點是在不重新加載整個頁面的情況下，可以與服務器交換數據並更新部分網頁內容。而實現的原理基礎就是：網頁DOM對象可以精確地對網頁中的部分內容進行操作、XML作為單純的數據存儲載體使得客戶端與服務器交換的只是網頁內容的數據而沒有網頁樣式等等的附屬信息、XMLHttpRequest是與瀏覽器本身內置的request相互獨立的與服務器交互的請求對象。

    網頁應用Ajax與服務器交互的抽象過程如下圖：

   

    過程詳解：

   1： 要使用Ajax技術，基礎中的基礎，就是要創建一個XMLHttpRequest對象，無它就沒有異步傳輸的可能：

var xmlhttp;
if (window.XMLHttpRequest) { //檢查瀏覽器的XMLHttpRequest屬性，如果為真則支持XMLHttpRequest
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
xmlhttp=new XMLHttpRequest(); 
} else {
// IE6, IE5 瀏覽器執行代碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
}

    2：在網頁中為某些事件的響應綁定異步操作：通過上面創建的xmlhttp對象傳輸請求、攜帶數據。在發出請求前要先定義請求對象的method、要提交給服務器中哪個文件進行請求的處理、要攜帶哪些數據、是否異步。

    其中，與普通的request提交數據一樣，這里也分兩種方法：GET/POST

  

 xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
 xmlhttp.send();

xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

    3：服務器收到請求后，把附帶的數據作為輸入傳給處理請求的文件，例如這里：把fname=Henry&lname=Ford作為輸入，傳給  /try/ajax/demo_get2.php  這個文件。然后文件根據傳入的數據做出處理，最終返回結果，通過response對象發回去。客戶端根據xmlhttp對象來獲取response內容，然后調用DOM對象根據response內容來局部修改網頁內容。

    

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)//請求處理完畢且狀態為成功
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;//用response內容來修改DOM中的元素的內容
    }
  

    其中，response的類型有兩種：字符串類型和XML文本。兩種回應的不同提取如下：

responseText 屬性返回字符串形式的響應：

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

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

xmlDoc=xmlhttp.responseXML; //獲取服務器響應的XML文本並轉換得到XMLDOM對象
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");//通過XMLDOM對象調用方法來獲取XML對象中的內容
for (i=0;i<x.length;i++) {
txt=txt + x[i].childNodes[0].nodeValue + "<br>"; }
 
document.getElementById("myDiv").innerHTML=txt;//把獲取到的內容通過document對象更新到網頁內容去