ajax和XMLHTTP原理

ajax|xml Ajax的原理簡單來說通過XmlHttpRequest對象來向伺服器發非同步請求，從伺服器獲得資料，然後用javascript來操作DOM而更新頁面。這其中最關鍵的一步就是從伺服器獲得請求資料。要清楚這個過程和原理，我們必須對 XMLHttpRequest有所瞭解。 XMLHttpRequest是ajax的核心機制，它是在IE5中首先引入的，是一種支援非同步請求的技術。簡單的說，也就是javascript可以及時向伺服器提出請求和處理響應，而不阻塞使用者。達到無重新整理的效果。 所以我們先從XMLHttpRequest講起，來看看它的工作原理。 首先，我們先來看看XMLHttpRequest這個對象的屬性。 它的屬性有： onreadystatechange 每次狀態改變所觸發事件的事件處理常式。 responseText     從伺服器處理序返回資料的字串形式。 responseXML    從伺服器處理序返回的DOM相容的文檔資料對象。 status           從伺服器返回的數字代碼，比如常見的404（未找到）和200（已就緒） status Text       伴隨狀態代碼的字串資訊 readyState       對象狀態值0 (未初始化) 對象已建立，但是尚未初始化（尚未調用open方法）1 (初始化) 對象已建立，尚未調用send方法2 (發送資料) send方法已調用，但是當前的狀態及http頭未知3 (資料傳送中) 已接收部分資料，因為響應及http頭不全，這時通過responseBody和responseText擷取部分資料會出現錯誤，4 (完成) 資料接收完畢,此時可以通過通過responseXml和responseText擷取完整的回應資料  但是，由於各瀏覽器之間存在差異，所以建立一個XMLHttpRequest對象可能需要不同的方法。這個差異主要體現在IE和其它瀏覽器之間。下面是一個比較標準的建立XMLHttpRequest對象的方法。   function CreateXmlHttp()   {      //非IE瀏覽器建立XmlHttpRequest對象    if(window.XmlHttpRequest)    {     xmlhttp=new XmlHttpRequest();    }    //IE瀏覽器建立XmlHttpRequest對象     if(window.ActiveXObject)    {    try    {     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");         }    catch(e)    {    try{     xmlhttp=new ActiveXObject("msxml2.XMLHTTP");     }     catch(ex){}    }    }   } function Ustbwuyi()   {    var data=document.getElementById("username").value;           CreateXmlHttp();        if(!xmlhttp)        {         alert("建立xmlhttp對象異常！");         return false;        }               xmlhttp.open("POST",url,false);        xmlhttp.onreadystatechange=function()        {            if(xmlhttp.readyState==4)           {           document.getElementById("user1").innerHTML="資料正在載入...";             if(xmlhttp.status==200)             {              document.write(xmlhttp.responseText);             }                 }          }        xmlhttp.send();       }如上所示，函數首先檢查XMLHttpRequest的整體狀態並且保證它已經完成（readyStatus=4），即資料已經發送完畢。然後根據伺服器的設定詢問請求狀態，如果一切已經就緒（status=200），那麼就執行下面需要的操作。對於XmlHttpRequest的兩個方法，open和send，其中open方法指定了：a、向伺服器提交資料的類型，即post還是get。b、請求的url地址和傳遞的參數。c、傳輸方式，false為同步，true為非同步。預設為true。如果是非同步通訊方式(true)，客戶機就不等待伺服器的響應；如果是同步方式(false)，客戶機就要等到伺服器返回訊息後才去執行其他動作。我們需要根據實際需要來指定同步方式，在某些頁面中，可能會發出多個請求，甚至是有組織有計劃有隊形大規模的高強度的request，而後一個是會覆蓋前一個的，這個時候當然要指定同步方式。    Send方法用來發送請求。  知道了XMLHttpRequest的工作流程，我們可以看出，XMLHttpRequest是完全用來向伺服器發出一個請求的，它的作用也局限於此，但它的作用是整個ajax實現的關鍵，因為ajax無非是兩個過程，發出請求和響應請求。並且它完全是一種用戶端的技術。而XMLHttpRequest正是處理了伺服器端和用戶端通訊的問題所以才會如此的重要。 現在，我們對ajax的原理大概可以有一個瞭解了。我們可以把伺服器端看成一個資料介面，它返回的是一個純文字流，當然，這個文字資料流可以是XML格式，可以是Html，可以是Javascript代碼，也可以只是一個字串。這時候，XMLHttpRequest向伺服器端請求這個頁面，伺服器端將文本的結果寫入頁面，這和普通的web開發流程是一樣的，不同的是，用戶端在非同步擷取這個結果後，不是直接顯示在頁面，而是先由javascript來處理，然後再顯示在頁面。至於現在流行的很多ajax控制項，比如magicajax等，可以返回DataSet等其它資料類型，只是將這個過程封裝了的結果，本質上他們並沒有什麼太大的區別。