圖解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對象更新到網頁內容去