AJAX入門與實(shí)例.doc

AJAX入門與實(shí)例AJAX全稱為“Asynchronous JavaScript and XML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。主要包含了以下幾種技術(shù)：Ajax（Asynchronous JavaScript + XML）的定義 基于web標(biāo)準(zhǔn)（standards-based presentation）XHTML+CSS的表示； 使用 DOM（Document Object Model）進(jìn)行動(dòng)態(tài)顯示及交互； 使用 XML 和 XSLT 進(jìn)行數(shù)據(jù)交換及相關(guān)操作； 使用 XMLHttpRequest 進(jìn)行異步數(shù)據(jù)查詢、檢索； 使用 JavaScript 將所有的東西綁定在一起。傳統(tǒng)的web應(yīng)用允許用戶填寫表單(form)，當(dāng)提交表單時(shí)就向web服務(wù)器發(fā)送一個(gè)請(qǐng)求。服務(wù)器接收并處理傳來的表單，然后返回一個(gè)新的網(wǎng)頁。這個(gè)做法浪費(fèi)了許多帶寬，因?yàn)樵谇昂髢蓚€(gè)頁面中的大部分HTML代碼往往是相同的。由于每次應(yīng)用的交互都需要向服務(wù)器發(fā)送請(qǐng)求，應(yīng)用的響應(yīng)時(shí)間就依賴于服務(wù)器的響應(yīng)時(shí)間。這導(dǎo)致了用戶界面的響應(yīng)比本地應(yīng)用慢得多。 與此不同，AJAX應(yīng)用可以僅向服務(wù)器發(fā)送并取回必需的數(shù)據(jù)，它使用SOAP或其它一些基于XML的web service接口，并在客戶端采用JavaScript處理來自服務(wù)器的響應(yīng)。因?yàn)樵诜?wù)器和瀏覽器之間交換的數(shù)據(jù)大量減少，結(jié)果我們就能看到響應(yīng)更快的應(yīng)用。同時(shí)很多的處理工作可以在發(fā)出請(qǐng)求的客戶端機(jī)器上完成，所以Web服務(wù)器的處理時(shí)間也減少了。 Ajax應(yīng)用程序的優(yōu)勢(shì)在于： 1. 通過異步模式，提升了用戶體驗(yàn) 2. 優(yōu)化了瀏覽器和服務(wù)器之間的傳輸，減少不必要的數(shù)據(jù)往返，減少了帶寬占用 3. Ajax引擎在客戶端運(yùn)行，承擔(dān)了一部分本來由服務(wù)器承擔(dān)的工作，從而減少了大用戶量下的服務(wù)器負(fù)載。 *xmlhttp的屬性：onreadystatechange 指定當(dāng)readyState屬性改變時(shí)的事件處理句柄，只寫 。readyState 返回當(dāng)前請(qǐng)求的狀態(tài)，只讀。responseBody 將回應(yīng)信息正文以u(píng)nsigned byte數(shù)組形式返回，只讀 responseStream 以Ado Stream對(duì)象的形式返回響應(yīng)信息，只讀 。responseText 將響應(yīng)信息作為字符串返回，只讀 。responseXML 將響應(yīng)信息格式化為Xml Document對(duì)象并返回，只讀 。status 返回當(dāng)前請(qǐng)求的http狀態(tài)碼，只讀 。statusText 返回當(dāng)前請(qǐng)求的響應(yīng)行狀態(tài)，只讀 。xmlhttp的方法：abort 取消當(dāng)前請(qǐng)求 getAllResponseHeaders 獲取響應(yīng)的所有http頭 getResponseHeader 從響應(yīng)信息中獲取指定的http頭 open 創(chuàng)建一個(gè)新的http請(qǐng)求，并指定此請(qǐng)求的方法、URL以及驗(yàn)證信息(用戶名/密碼) /常用send 發(fā)送請(qǐng)求到http服務(wù)器并接收回應(yīng) /常用setRequestHeader 單獨(dú)指定請(qǐng)求的某個(gè)http頭 語法：onreadystatechang 指定當(dāng)readyState屬性改變時(shí)的事件處理句柄，只寫xmlHttpObj.onreadystatechange=a;function a() if(xmlHttpObj.readyState=4) if(xmlHttpObj.stateus=200) alert(xmlHttpObj.responseText); else alert(加載失??！n原因：+xmlHttpObj.stateText); readyState 返回當(dāng)前請(qǐng)求的狀態(tài)，只讀。xmlHttpObj.readyState;參見函數(shù)a;readyState，變量。定義如下：0 (未初始化) 對(duì)象已建立，但是尚未初始化（尚未調(diào)用open方法） 1 (初始化) 對(duì)象已建立，尚未調(diào)用send方法 2 (發(fā)送數(shù)據(jù)) send方法已調(diào)用，但是當(dāng)前的狀態(tài)及http頭未知 3 (數(shù)據(jù)傳送中) 已接收部分?jǐn)?shù)據(jù)，因?yàn)轫憫?yīng)及http頭不全，這時(shí)通過responseBody和responseText獲取部分?jǐn)?shù)據(jù)會(huì)出現(xiàn)錯(cuò)誤， 4 (完成) 數(shù)據(jù)接收完畢,此時(shí)可以通過通過responseBody和responseText獲取完整的回應(yīng)數(shù)據(jù) responseText 將響應(yīng)信息作為字符串返回，只讀 。xmlHttpObj.responseText;responseBody ,responseStream ,responseText ,responseXML 與之相似responseXML可以返回一個(gè)文檔樹(DOM)，可以使用document.getElementsByTagName,document.getElementsByTagNameNS,document.getElementById等對(duì)其操作stateus 返回當(dāng)前請(qǐng)求的http狀態(tài)碼，只讀 。xmlHttpObj.stateus;參見函數(shù)a;長(zhǎng)整形標(biāo)準(zhǔn)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 返回當(dāng)前請(qǐng)求的響應(yīng)行狀態(tài)xmlHttpObj.stateText;參考函數(shù)a;open 創(chuàng)建一個(gè)新的http請(qǐng)求，并指定此請(qǐng)求的方法、URL以及驗(yàn)證信息xmlHttpObj.open(Method,URL,Async,User,PassWord);表示可選參數(shù)：Method:POST|GET(大小寫不敏感)URL:請(qǐng)求的URL地址，可以為絕對(duì)地址也可以為相對(duì)地址。Async:true|fase 是否同步，默認(rèn)為true。User:如果服務(wù)器需要驗(yàn)證，此處指定用戶名，如果未指定，當(dāng)服務(wù)器需要驗(yàn)證時(shí)，則會(huì)彈出驗(yàn)證窗口。 Password：驗(yàn)證信息中的密碼部分，如果用戶名為空，則此值將被忽略。send 發(fā)送請(qǐng)求到http服務(wù)器并接收回應(yīng)xmlHttpObj.send(Text);參數(shù)：Text:要發(fā)送的數(shù)據(jù)，默認(rèn)為空(null);*一個(gè)例子：創(chuàng)建一個(gè)xmlhttp對(duì)象：現(xiàn)在的絕對(duì)多數(shù)瀏覽器都增加了對(duì)XmlHttp的支持，IE中使用ActiveXObject方式創(chuàng)建XmlHttp對(duì)象，其他瀏覽器如：Firefox、Opera、NetScape等通過window.XMLHttpRequest來創(chuàng)建xmlhttp對(duì)象。var xmlhttp;function new_xmlHttp() var a=null; if(window.ActiveXObject)/IE(此處的IE泛指所有用IE內(nèi)核的瀏覽器，下同) 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)建一個(gè)新的HTTP請(qǐng)求，并指定URLxmlhttp.send();/發(fā)送xmlhttp.onreadystatechange=function() if(xmlhttp.readyState=4) if(xmlhttp.stateus=200) alert(xmlhttp.responseText); else alert(加載失?。原因：+xmlhttp.stateText); 一個(gè)簡(jiǎn)單完整的XMLHTTP例子：將以下代碼保存為本地HTML文件再使用CODE:一個(gè)簡(jiǎn)單的XMLHTTP例子var oDiv var xh function getXML()oDiv = document.all.moDiv.innerHTML = 正在裝載欄目數(shù)據(jù)，請(qǐng)稍侯.oDiv.style.display= xh = new ActiveXObject(Microsoft.XMLHTTP