DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> ajax和XMLHTTP原理
ajax和XMLHTTP原理
編輯:AJAX詳解     
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等其它數據類型,只是將這個過程封裝了的結果,本質上他們並沒有什麼太大的區別。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved