【精品】Ajax總結.doc

【精品】Ajax總結 AJAX-Asynchronous異步-javascript-XML ajaxAJAX全稱為“Asynchronous JavaScriptand XML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁應用的網(wǎng)頁開發(fā)技術。 主要包含了以下幾種技術Ajax（Asynchronous JavaScript+XML）的定義基于web標準（standards-based presentation）XHTML+CSS的表示；使用DOM（Document ObjectModel）進行動態(tài)顯示及交互；使用XML和XSLT進行數(shù)據(jù)交換及相關操作；使用XMLHttpRequest進行異步數(shù)據(jù)查詢、檢索；使用JavaScript將所有的東西綁定在一起。 英文參見Ajax的提出者Jesse JamesGarrett的原文a類似于DHTML或LAMP，AJAX不是指一種單一的技術，而是有機地利用了一系列相關的技術。 事實上，一些基于AJAX的“派生/合成”式（derivative/posite）的技術正在出現(xiàn)，如“AFLAX”。 AJAX的應用使用支持以上技術的web瀏覽器作為運行平臺。 這些瀏覽器目前包括Mozilla、Firefox、Inter Explorer、Opera、Konqueror及Safari。 但是Opera不支持XSL格式對象，也不支持XSLT。 與傳統(tǒng)的web應用比較傳統(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引擎在客戶端運行，承擔了一部分本來由服務器承擔的工作，從而減少了大用戶量下的服務器負載。 Ajax的工作原理Ajax的核心是JavaScript對象XmlHttpRequest。 該對象在Inter Explorer5中首次引入，它是一種支持異步請求的技術。 簡而言之，XmlHttpRequest使您可以使用JavaScript向服務器提出請求并處理響應，而不阻塞用戶。 在創(chuàng)建Web站點時，在客戶端執(zhí)行屏幕更新為用戶提供了很大的靈活性。 下面是使用Ajax可以完成的功能動態(tài)更新購物車的物品總數(shù)，無需用戶單擊Update并等待服務器重新發(fā)送整個頁面。 提升站點的性能，這是通過減少從服務器下載的數(shù)據(jù)量而實現(xiàn)的。 例如，在某購物車頁面，當更新籃子中的一項物品的數(shù)量時，會重新載入整個頁面，這必須下載整個頁面的數(shù)據(jù)。 如果使用Ajax計算新的總量，服務器只會返回新的總量值，因此所需的帶寬僅為原來的百分之一。 消除了每次用戶輸入時的頁面刷新。 例如，在Ajax中，如果用戶在分頁列表上單擊Next，則服務器數(shù)據(jù)只刷新列表而不是整個頁面。 直接表格數(shù)據(jù)，而不是要求用戶導航到新的頁面來數(shù)據(jù)。 對于Ajax，當用戶單擊Edit時，可以將靜態(tài)表格刷新為內容可的表格。 用戶單擊Done之后，就可以發(fā)出一個Ajax請求來更新服務器，并刷新表格，使其包含靜態(tài)、只讀的數(shù)據(jù)。 一切皆有可能！但愿它能夠激發(fā)您開始開發(fā)自己的基于Ajax的站點。 然而，在開始之前，讓我們介紹一個現(xiàn)有的Web站點，它遵循傳統(tǒng)的提交/等待/重新顯示的范例，我們還將討論Ajax如何提升用戶體驗。 Ajax的工作原理相當于在用戶和服務器之間加了個中間層，使用戶操作與服務器響應異步化。 這樣把以前的一些服務器負擔的工作轉嫁到客戶端，利于客戶端閑置的處理能力來處理，減輕服務器和帶寬的負擔，從而達到節(jié)約ISP的空間及帶寬租用成本的目的。 我們以兩個驗證通行證帳號是否存在的例子來講述AJAX在實際中的應用 (1)用文本字符串的方式返回服務器的響應來驗證網(wǎng)易通行證帳號是否存在； (2)以XMLDocument對象方式返回響應來驗證金山通行證帳號是否存在；首先，我們需要用JavaScript來創(chuàng)建XMLHttpRequest類向服務器發(fā)送一個請求，XMLHttpRequest類首先由Inter Explorer以ActiveX對象引入，被稱為XML。 后來MozillaNetscapeSafari和其他瀏覽器也提供了XMLHttpRequest類，不過它們創(chuàng)建XMLHttpRequest類的方法不同。 對于Inter Explorer瀏覽器，創(chuàng)建XMLHttpRequest方法如下xml_request=new ActiveXObject(Msxml2.XML.3.0);/3.0或4.0,5.0xml_request=new ActiveXObject(Msxml2.XML);xml_request=new ActiveXObject(Microsoft.XML);由于在不同Inter Explorer瀏覽器中XML版本可能不一致，為了更好的兼容不同版本的Inter Explorer瀏覽器，因此我們需要根據(jù)不同版本的Inter Explorer瀏覽器來創(chuàng)建XMLHttpRequest類，上面代碼就是根據(jù)不同的Inter Explorer瀏覽器創(chuàng)建XMLHttpRequest類的方法。 對于MozillaNetscapeSafari等瀏覽器，創(chuàng)建XMLHttpRequest方法如下xml_request=new XMLHttpRequest();如果服務器的響應沒有XML mime-type header，某些Mozilla瀏覽器可能無法正常工作。 為了解決這個問題，如果服務器響應的header不是text/xml，可以調用其它方法修改該header。 xml_request=new XMLHttpRequest();xml_request.overrideMimeType(text/xml);在實際應用中，為了兼容多種不同版本的瀏覽器，一般將創(chuàng)建XMLHttpRequest類的方法寫成如下形式tryif(window.ActiveXObject)for(var i=5;i;i-)tryif(i=2)xml_request=new ActiveXObject(Microsoft.XML);elsexml_request=new ActiveXObject(Msxml2.XML.+i+.0);xml_request.setRequestHeader(Content-Type,text/xml);xml_request.setRequestHeader(Content-Type,gb2312);break;catch(e)xml_request=false;else if(window.XMLHttpRequest)xml_request=new XMLHttpRequest();if(xml_request.overrideMimeType)xml_request.overrideMimeType(text/xml);catch(e)xml_request=false;在定義了如何處理響應后，就要發(fā)送請求了。 可以調用請求類的open()和send()方法，如下所示xml_request.open(GET,URL,true);xml_request.send(null);open()的第一個參數(shù)是請求方式GET，POST或任何服務器所支持的您想調用的方式。 按照規(guī)范，該參數(shù)要大寫；否則，某些瀏覽器(如Firefox)可能無法處理請求。 第二個參數(shù)是請求頁面的URL。 第三個參數(shù)設置請求是否為異步模式。 如果是TRUE，JavaScript函數(shù)將繼續(xù)執(zhí)行，而不等待服務器響應。 這就是AJAX中的A。 用JavaScript來創(chuàng)建XMLHttpRequest類向服務器發(fā)送一個請求后，接下來要決定當收到服務器的響應后，需要做什么。 這需要告訴請求對象用哪一個JavaScript函數(shù)處理這個響應。 可以將對象的onreadystatechange屬性設置為要使用的JavaScript的函數(shù)名，如下所示xml_request.onreadystatechange=FunctionName;FunctionName是用JavaScript創(chuàng)建的函數(shù)名，注意不要寫成FunctionName()，當然我們也可以直接將JavaScript代碼創(chuàng)建在onreadystatechange之后，例如xml_request.onreadystatechange=function()/JavaScript代碼段;在這個函數(shù)中。 首先要檢查請求的狀態(tài)。 只有當一個完整的服務器響應已經(jīng)收到了，函數(shù)才可以處理該響應。 XMLHttpRequest提供了readyState屬性來對服務器響應進行判斷。 readyState的取值如下0(未初始化)1(正在裝載)2(裝載完畢)3(交互中)4(完成)所以只有當readyState=4時，一個完整的服務器響應已經(jīng)收到了，函數(shù)才可以處理該響應。 具體代碼如下if(_request.readyState=4)/收到完整的服務器響應else/沒有收到完整的服務器響應當readyState=4時，一個完整的服務器響應已經(jīng)收到了，接著，函數(shù)會檢查服務器響應的狀態(tài)值。 完整的狀態(tài)取值可參見W3C文檔。 當服務器響應的值為200時，表示狀態(tài)正常。 在檢查完請求的狀態(tài)值和響應的狀態(tài)值后，就可以處理從服務器得到的數(shù)據(jù)了。 有兩種方式可以得到這些數(shù)據(jù) (1)以文本字符串的方式返回服務器的響應 (2)以XMLDocument對象方式返回響應實例一用文本字符串的方式返回服務器的響應來驗證網(wǎng)易通行證帳號是否存在首先，我們登陸網(wǎng)易通行證注冊頁面，可以看到檢測用戶名是否存在是將用戶名提交給checkssn.jsp頁面進行判斷，格式為reg.163./register/checkssn.jsp?username=用戶名根據(jù)上面講到的方法，我們可以利用AJAX技術對網(wǎng)易通行證用戶名進行檢測第一步新建一個基于Xhtml標準的網(wǎng)頁，在區(qū)域插入Javascript函數(shù)如下function getXMLRequester()var xml_request=false;tryif(window.ActiveXObject)for(var i=5;i;i-)tryif(i=2)xml_request=new ActiveXObject(Microsoft.XML);elsexml_request=new ActiveXObject(Msxml2.XML.+i+.0);xml_request.setRequestHeader(Content-Type,text/xml);xml_request.setRequestHeader(Content-Type,gb2312);break;catch(e)xml_request=false;else if(window.XMLHttpRequest)xml_request=new XMLHttpRequest();if(xml_request.overrideMimeType)xml_request.overrideMimeType(text/xml);catch(e)xml_request=false;return xml_request;function IDRequest(n)/定義收到服務器的響應后需要執(zhí)行的JavaScript函數(shù)url=n+document.getElementById(163id).value;/定義網(wǎng)址參數(shù)xml_request=getXMLRequester();/調用創(chuàng)建XMLHttpRequest的函數(shù)xml_request.onreadystatechange=doContents;/調用doContents函數(shù)xml_request.open(GET,url,true);xml_request.send(null);function doContents()if(xml_request.readyState=4)/收到完整的服務器響應if(xml_request.status=200)/服務器響應的值OK document.getElementById(message).innerHTML=xml_request.responseText;/將服務器返回的字符串寫到頁面中ID為message的區(qū)域elsealert(_request.status);在區(qū)域建立一個文本框，id為163id再建一個id為messsge的空白區(qū)域用來顯示返回字符串(也可以通過Javascript函數(shù)截取一部分字符串顯示)這樣，一個基于AJAX技術的用戶名檢測頁面就做好了，不過這個頁面將返回服務器響應生成頁面的所有字符串，當然還可以對返回的字符串進行一些操作，便于應用到不同的需要當中。 實例二以XMLDocument對象方式返回響應來驗證金山通行證帳號是否存在在上面的例子中，當服務器對請求的響應被收到后，我們會調用請求對象的reponseText屬性。 該屬性包含了服務器返回響應文件的內容。 現(xiàn)在我們以XMLDocument對象方式返回響應，此時將不再需要reponseText屬性而使用responseXML屬性。 首先登陸金山通行證注冊頁面，我們發(fā)現(xiàn)金山通行證用戶名的檢測方式為pass.kingsoft./ksgweb/jsp/login/uid.jsp?uid=用戶名,并且返回XML數(shù)據(jù):isExistedUid-2當result值為-1時表示此用戶名已被注冊，當result值為-2時表示此用戶名尚未注冊，因此通過對result值的判斷可以知道用戶名是否被注冊。 對上例代碼進行修改首