AJAX入門與實例.doc

AJAX入門與實例AJAX全稱為“Asynchronous JavaScript and XML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁應用的網(wǎng)頁開發(fā)技術。主要包含了以下幾種技術：Ajax（Asynchronous JavaScript + XML）的定義 基于web標準（standards-based presentation）XHTML+CSS的表示； 使用 DOM（Document Object Model）進行動態(tài)顯示及交互； 使用 XML 和 XSLT 進行數(shù)據(jù)交換及相關操作； 使用 XMLHttpRequest 進行異步數(shù)據(jù)查詢、檢索； 使用 JavaScript 將所有的東西綁定在一起。傳統(tǒng)的web應用允許用戶填寫表單(form)，當提交表單時就向web服務器發(fā)送一個請求。服務器接收并處理傳來的表單，然后返回一個新的網(wǎng)頁。這個做法浪費了許多帶寬，因為在前后兩個頁面中的大部分HTML代碼往往是相同的。由于每次應用的交互都需要向服務器發(fā)送請求，應用的響應時間就依賴于服務器的響應時間。這導致了用戶界面的響應比本地應用慢得多。 與此不同，AJAX應用可以僅向服務器發(fā)送并取回必需的數(shù)據(jù)，它使用SOAP或其它一些基于XML的web service接口，并在客戶端采用JavaScript處理來自服務器的響應。因為在服務器和瀏覽器之間交換的數(shù)據(jù)大量減少，結果我們就能看到響應更快的應用。同時很多的處理工作可以在發(fā)出請求的客戶端機器上完成，所以Web服務器的處理時間也減少了。 Ajax應用程序的優(yōu)勢在于： 1. 通過異步模式，提升了用戶體驗 2. 優(yōu)化了瀏覽器和服務器之間的傳輸，減少不必要的數(shù)據(jù)往返，減少了帶寬占用 3. Ajax引擎在客戶端運行，承擔了一部分本來由服務器承擔的工作，從而減少了大用戶量下的服務器負載。 *xmlhttp的屬性：onreadystatechange 指定當readyState屬性改變時的事件處理句柄，只寫 。readyState 返回當前請求的狀態(tài)，只讀。responseBody 將回應信息正文以unsigned byte數(shù)組形式返回，只讀 responseStream 以Ado Stream對象的形式返回響應信息，只讀 。responseText 將響應信息作為字符串返回，只讀 。responseXML 將響應信息格式化為Xml Document對象并返回，只讀 。status 返回當前請求的http狀態(tài)碼，只讀 。statusText 返回當前請求的響應行狀態(tài)，只讀 。xmlhttp的方法：abort 取消當前請求 getAllResponseHeaders 獲取響應的所有http頭 getResponseHeader 從響應信息中獲取指定的http頭 open 創(chuàng)建一個新的http請求，并指定此請求的方法、URL以及驗證信息(用戶名/密碼) /常用send 發(fā)送請求到http服務器并接收回應 /常用setRequestHeader 單獨指定請求的某個http頭 語法：onreadystatechang 指定當readyState屬性改變時的事件處理句柄，只寫xmlHttpObj.onreadystatechange=a;function a() if(xmlHttpObj.readyState=4) if(xmlHttpObj.stateus=200) alert(xmlHttpObj.responseText); else alert(加載失??！n原因：+xmlHttpObj.stateText); readyState 返回當前請求的狀態(tài)，只讀。xmlHttpObj.readyState;參見函數(shù)a;readyState，變量。定義如下：0 (未初始化) 對象已建立，但是尚未初始化（尚未調用open方法） 1 (初始化) 對象已建立，尚未調用send方法 2 (發(fā)送數(shù)據(jù)) send方法已調用，但是當前的狀態(tài)及http頭未知 3 (數(shù)據(jù)傳送中) 已接收部分數(shù)據(jù)，因為響應及http頭不全，這時通過responseBody和responseText獲取部分數(shù)據(jù)會出現(xiàn)錯誤， 4 (完成) 數(shù)據(jù)接收完畢,此時可以通過通過responseBody和responseText獲取完整的回應數(shù)據(jù) responseText 將響應信息作為字符串返回，只讀 。xmlHttpObj.responseText;responseBody ,responseStream ,responseText ,responseXML 與之相似responseXML可以返回一個文檔樹(DOM)，可以使用document.getElementsByTagName,document.getElementsByTagNameNS,document.getElementById等對其操作stateus 返回當前請求的http狀態(tài)碼，只讀 。xmlHttpObj.stateus;參見函數(shù)a;長整形標準http狀態(tài)碼，定義如下：值 描述100 Continue101 Switching protocols200 OK201 Created202 Accepted203 Non-Authoritative Information204 No Content205 Reset Content206 Partial Content300 Multiple Choices301 Moved Permanently302 Found303 See Other304 Not Modified305 Use Proxy307 Temporary Redirect400 Bad Request401 Unauthorized402 Payment Required403 Forbidden404 Not Found405 Method Not Allowed406 Not Acceptable407 Proxy Authentication Required408 Request Timeout409 Conflict410 Gone411 Length Required412 Precondition Failed413 Request Entity Too Large414 Request-URI Too Long415 Unsupported Media Type416 Requested Range Not Suitable417 Expectation Failed500 Internal Server Error501 Not Implemented502 Bad Gateway503 Service Unavailable504 Gateway Timeout505 HTTP Version Not SupportedstatusText 返回當前請求的響應行狀態(tài)xmlHttpObj.stateText;參考函數(shù)a;open 創(chuàng)建一個新的http請求，并指定此請求的方法、URL以及驗證信息xmlHttpObj.open(Method,URL,Async,User,PassWord);表示可選參數(shù)：Method:POST|GET(大小寫不敏感)URL:請求的URL地址，可以為絕對地址也可以為相對地址。Async:true|fase 是否同步，默認為true。User:如果服務器需要驗證，此處指定用戶名，如果未指定，當服務器需要驗證時，則會彈出驗證窗口。 Password：驗證信息中的密碼部分，如果用戶名為空，則此值將被忽略。send 發(fā)送請求到http服務器并接收回應xmlHttpObj.send(Text);參數(shù)：Text:要發(fā)送的數(shù)據(jù)，默認為空(null);*一個例子：創(chuàng)建一個xmlhttp對象：現(xiàn)在的絕對多數(shù)瀏覽器都增加了對XmlHttp的支持，IE中使用ActiveXObject方式創(chuàng)建XmlHttp對象，其他瀏覽器如：Firefox、Opera、NetScape等通過window.XMLHttpRequest來創(chuàng)建xmlhttp對象。var xmlhttp;function new_xmlHttp() var a=null; if(window.ActiveXObject)/IE(此處的IE泛指所有用IE內核的瀏覽器，下同) a=new ActiveXObject(Msxml2.XMLHTTP); if(!a) a=new ActiveXObject(Microsoft.XMLHTTP) else if(window.XMLHttpRequest)/Mozilla(FireFox,NS) a=new XMLHttpRequest() return a;xmlhttp=new_xmlhttp();xmlhttp.open(GET,http:/localhost/xmlfile.xml,false);/創(chuàng)建一個新的HTTP請求，并指定URLxmlhttp.send();/發(fā)送xmlhttp.onreadystatechange=function() if(xmlhttp.readyState=4) if(xmlhttp.stateus=200) alert(xmlhttp.responseText); else alert(加載失??！n原因：+xmlhttp.stateText); 一個簡單完整的XMLHTTP例子：將以下代碼保存為本地HTML文件再使用CODE:一個簡單的XMLHTTP例子var oDiv var xh function getXML()oDiv = document.all.moDiv.innerHTML = 正在裝載欄目數(shù)據(jù)，請稍侯.oDiv.style.display= xh = new ActiveXObject(Microsoft.XMLHTTP