Ajax基礎知識介紹

Ajax基礎知識介紹1用傳統方式校驗用戶名是否重復用傳統方式校驗用戶名是否重復2傳統方式校驗用戶名是否重復的設計分析RegUserUIReguser.jspRegUserMain.jsp注冊校驗用戶名是否重復VerifyUserName?返回怎樣的一個頁面傳統方式校驗用戶名是否重復的設計分析RegUserUIReg3傳統實現方式1：在原來的主窗口中回顯結果問題：1：回顯的頁面在原來網頁效果的基礎上增加一點內容，可是服務器的響應結果會覆蓋掉窗口中原來顯示的那個網頁內容，如果服務器在響應時僅僅回送要新增的內容，則會覆蓋掉原來的整個網頁，怎樣做才能看到原來網頁效果的基礎上增加一點內容？2：怎樣用javascript代碼將請求發送給服務器，在發送請求時，怎樣將文本框中填寫的用戶名作為參數傳遞給服務器。3：怎樣在<a>標簽中觸發javascript函數調用？觸發函數時要注意返回值。實現思路：讓VerifyUserName仍然返回Reguser.jsp，這時候需要在Reguser.jsp頁面中增加一條有時候顯示，有時候不顯示的提示信息。或者是通過生成一段javascript代碼，然后用一個彈出對話框來顯示提示信息。先用瀏覽器直接測試VerifyUserName。在<a>標簽中可以使用javascript協議或onclick事件來觸發javascript函數調用，先用靜態數據測試一下，然后用window.location.href屬性（replace方法）或模擬表單提交的方式向服務器發送請求，把兩種方式都要做一下。缺點：要為電腦增加一個鼠標，由于瀏覽器的特點是買回鼠標就會覆蓋掉原來的電腦，所以，要想顯示出電腦加鼠標的效果，只能同時去買回一個電腦和鼠標。好比舞臺要切換帷幕一樣，上一場的帷幕上貼的是花，當下一場要換成貼龍時，最快的方式不是把原來帷幕上的花揭下來再換上龍，而是做兩個帷幕，直接把上一個帷幕收起，同時把下一個帷幕拉開。每次都送出一個帷幕，帷幕上貼不同內容。傳統實現方式1：在原來的主窗口中回顯結果問題：4傳統實現方式2：用彈出的新窗口回顯結果實現方式：在彈出窗口中回顯結果彈出窗口演示模態對話框演示實現思路：由彈出窗口打開一個網頁的方式發出校驗用戶名的請求，回送的應該是一個網頁，只是這個網頁的內容很簡單，但是，如果要有關閉按鈕，必須加上相應的按鈕和javascript代碼。模態對話框的好處在于避免了受瀏覽器顯示新窗口的方式的差異的影響，并可要求用戶必須關閉彈出窗口后才能進行其他操作。特點：服務器回送的結果給新窗口，不影響原始窗口。一個帷幕收起，同時把下一個帷幕拉開。每次都送出一個帷幕，帷幕上貼不同內容。傳統實現方式2：用彈出的新窗口回顯結果實現方式：在彈出窗口5什么是AjaxAjax的概念：是asynchronousjavascriptandxml的簡寫。不是一項具體的技術，而是幾門技術的綜合應用。其核心只不過是要在javascript中調用一個叫XMLHttpRequest的javascript類，這個類可以與Web服務器使用HTTP協議進行交互，程序不通過瀏覽器發出請求，而是用這個特殊的JavaScript對象發送請求，再由這個JavaScript對象接收響應，并將響應結果用DOM編程方式掛到原來的網頁上（見下頁的圖），從而使得javascript借助這個api類可以干出比較有意義的事情。XMLHttpRequest對象在網絡上的俗稱為XHR對象。什么是AjaxAjax的概念：6Ajax的特點Ajax的特點：瀏覽器中顯示一個頁面后，這個頁面以后一直不改變，所有的操作請求都由這個網頁中的javascript代碼發出，所有的結果都由javascript代碼接受并增加到這個頁面上，瀏覽器窗口中顯示的網頁始終都是初始的那個網頁。（見下面兩頁的圖）增強用戶體驗：可以在用戶瀏覽網頁的同時與服務器進行異步交互和實現網頁內容的局部更新，例如，126郵箱密碼安全性判斷和googlesuggest；可以按需取數據，改善頁面顯示速度，例如，樹狀菜單和babasport的首頁（整合多個信息的頁面）；視覺流暢的定時刷新，例如，聊天室。（用下幾頁的圖舉例說明）學習ajax和應用ajax的難點不在于XMLHttpRequest本身，而在于javascript和DOM編程，沒有較好的javascript和DOM編程基礎，你就很難做出有意義的ajax應用。Ajax的特點Ajax的特點：7瀏覽器的普通交互方式瀏覽器的普通交互方式8Ajax的交互方式Ajax的交互方式9同步交互和異步交互

舉個例子：普通B/S模式(同步)AJAX技術(異步)

*同步：提交請求->等待服務器處理->處理完畢返回這個期間客戶端瀏覽器不能干任何事*異步:請求通過事件觸發->服務器處理（這時瀏覽器仍然可以作其他事情）->處理完畢

同步是指：發送方發出數據后，等接收方發回響應以后才發下一個數據包的通訊方式。

異步是指：發送方發出數據后，不等接收方發回響應，接著發送下個數據包的通訊方式

易懂的理解:異步傳輸:

你傳輸吧，我去做我的事了，傳輸完了告訴我一聲

同步傳輸:

你現在傳輸，我要親眼看你傳輸完成，才去做別的事

同步交互和異步交互舉個例子：普通B/S模式(同步)10AJAX案例之googlesuggestAJAX案例之googlesuggest11AJAX案例之GoogleMapsAJAX案例之GoogleMaps12Ajax的應用場景：財富通網吧充值界面Ajax的應用場景：財富通網吧充值界面13成都傳智播客cd.Ajax的應用場景：密碼安全性檢測成都傳智播客Ajax的應用場景：密14Ajax的應用場景：RIA應用Ajax的應用場景：RIA應用15Ajax的應用場景：郵箱系統Ajax的應用場景：郵箱系統16Ajax的應用場景：藍源批發零售業連鎖管理系統Ajax的應用場景：藍源批發零售業連鎖管理系統17究竟什么是AjaxAjax：一種不用刷新整個頁面便可與服務器通訊的辦法圖1Web的傳統模型?？蛻舳讼蚍掌靼l送一個請求，服務器返回整個頁面，如此反復圖2在Ajax模型中，數據在客戶端與服務器之間獨立傳輸。服務器不再返回整個頁面究竟什么是AjaxAjax：一種不用刷新整個頁面便可與服務器18Ajax的實現方式不用刷新整個頁面便可與服務器通訊的辦法：FlashJavaapplet框架：如果使用一組框架構造了一個網頁，可以只更新其中一個框架，而不必驚動整個頁面隱藏的iframeXMLHttpRequest：該對象是對JavaScript的一個擴展，可使網頁與服務器進行通信。是創建Ajax應用的最佳選擇。實際上通常把Ajax當成XMLHttpRequest對象的代名詞

Ajax的實現方式不用刷新整個頁面便可與服務器通訊的辦法：19Ajax的工作原理Ajax的核心是JavaScript對象XmlHttpRequest。該對象在InternetExplorer5中首次引入，它是一種支持異步請求的技術。簡而言之，XmlHttpRequest使您可以使用JavaScript向服務器提出請求并處理響應，而不阻塞用戶。Ajax的工作原理Ajax的核心是JavaScript對象X20Ajax的工作原理AJAX采用異步交互過程。AJAX在用戶與服務器之間引入一個中間媒介，從而消除了網絡交互過程中的處理—等待—處理—等待缺點。用戶的瀏覽器在執行任務時即裝載了AJAX引擎。AJAX引擎用JavaScript語言編寫，通常藏在一個隱藏的框架中。它負責編譯用戶界面及與服務器之間的交互。AJAX引擎允許用戶與應用軟件之間的交互過程異步進行，獨立于用戶與網絡服務器間的交流?，F在，可以用Javascript調用AJAX引擎來代替產生一個HTTP的用戶動作，內存中的數據編輯、頁面導航、數據校驗這些不需要重新載入整個頁面的需求可以交給AJAX來執行。

使用AJAX，可以為JSP、開發人員、終端用戶帶來可見的便捷：

用戶界面AJAX引擎服務器用戶界面服務器Ajax的工作原理AJAX采用異步交互過程。AJAX在用戶與21AJAX包含的技術AJAX:(AsynchronousJavaScriptandXML)并不是一項新技術,其實是多種技術的綜合，包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest.服務器端語言：服務器需要具備向瀏覽器發送特定信息的能力。Ajax與服務器端語言無關。XML(eXtensibleMarkupLanguage，可擴展標記語言)是一種描述數據的格式。AJAX程序需要某種格式化的格式來在服務器和客戶端之間傳遞信息，XML是其中的一種選擇XHTML（eXtendedHypertextMarkupLanguage,使用擴展超媒體標記語言）和CSS（CascadingStyleSheet,級聯樣式單）標準化呈現；DOM（DocumentObjectModel,文檔對象模型）實現動態顯示和交互；使用XMLHTTP組件XMLHttpRequest對象進行異步數據讀取使用JavaScript綁定和處理所有數據AJAX包含的技術AJAX:(Asynchron22AJAX的缺陷AJAX不是完美的技術。也存在缺陷：1AJAX大量使用了Javascript和AJAX引擎，而這個取決于瀏覽器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla雖然也支持AJAX，但是提供XMLHttpRequest的方式不一樣。所以，使用AJAX的程序必須測試針對各個瀏覽器的兼容性。

2AJAX更新頁面內容的時候并沒有刷新整個頁面，因此，網頁的后退功能是失效的；有的用戶還經常搞不清楚現在的數據是舊的還是已經更新過的。這個就需要在明顯位置提醒用戶“數據已更新”。3對流媒體的支持沒有FLASH、JavaApplet好。4一些手持設備（如手機、PDA等）現在還不能很好的支持Ajax。AJAX的缺陷AJAX不是完美的技術。也存在缺陷：23XMLHttpRequest對象XMLHttpRequest對象

XMLHttpRequest是XMLHTTP組件的對象，通過這個對象，AJAX可以像桌面應用程序一樣只同服務器進行數據層面的交換，而不用每次都刷新界面，也不用每次將數據處理的工作都交給服務器來做；這樣既減輕了服務器負擔又加快了響應速度、縮短了用戶等待的時間。XMLHttpRequest最早是在IE5中以ActiveX組件的形式實現的。非W3C標準.創建XMLHttpRequest對象（由于非標準所以實現方法不統一）InternetExplorer把XMLHttpRequest實現為一個ActiveX對象其他瀏覽器（Firefox、Safari、Opera…）把它實現為一個本地的JavaScript對象。XMLHttpRequest在不同瀏覽器上的實現是兼容的，所以可以用同樣的方式訪問XMLHttpRequest實例的屬性和方法，而不論這個實例創建的方法是什么。XMLHttpRequest對象XMLHttpRequest24XMLHttpRequest對象初始化functioncreateXmlHttpRequest(){varxmlhttp=null;try{

//Firefox,Opera8.0+,Safarixmlhttp=newXMLHttpRequest(); }catch(e){//IEIE7.0以下的瀏覽器以ActiveX組件的方式來創建XMLHttpRequest對象varMSXML=['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP'];for(varn=0;n<MSXML.length;n++){try{xmlhttp=newActiveXObject(MSXML[n]);break;}catch(e){}}}returnxmlhttp;}XMLHttpRequest對象初始化function25XMLHttpRequest對象方法方法描述abort()停止當前請求getAllResponseHeaders()把http請求的所有響應首部作為鍵/值對返回getResponseHeader("headerLabel")返回指定首部的串值open(“method”,”url”)建立對服務器的調用，method參數可以是GET,POST。url參數可以是相對URL或絕對URL。這個方法還包括3個可選參數。send(content)向服務器發送請求setRequestHeader("label","value")把指定首部設置為所提供的值。在設置任何首部之前必須先調用open()XMLHttpRequest對象方法方法描述abort(26XMLHttpRequest對象屬性XMLHttpRequest對象屬性27發送請求--方法和屬性介紹利用XMLHttpRequest實例與服務器進行通信包含以下3個關鍵部分：onreadystatechange事件處理函數open方法send方法發送請求--方法和屬性介紹利用XMLHttpRequest28發送請求--方法和屬性介紹onreadystatechange:該事件處理函數由服務器觸發，而不是用戶在Ajax執行過程中，服務器會通知客戶端當前的通信狀態。這依靠更新XMLHttpRequest對象的readyState來實現。改變readyState屬性是服務器對客戶端連接操作的一種方式。每次readyState屬性的改變都會觸發readystatechange事件發送請求--方法和屬性介紹onreadystatechang29發送請求--方法和屬性介紹open(method,url,asynch)XMLHttpRequest對象的open方法允許程序員用一個Ajax調用向服務器發送請求。method：請求類型，類似“GET”或”POST”的字符串。若只想從服務器檢索一個文件，而不需要發送任何數據，使用GET(可以在GET請求里通過附加在URL上的查詢字符串來發送數據，不過數據大小限制為2000個字符)。若需要向服務器發送數據，用POST。在某些情況下，有些瀏覽器會把多個XMLHttpRequest請求的結果緩存在同一個URL。如果對每個請求的響應不同，這就會帶來不好的結果。把當前時間戳追加到URL的最后，就能確保URL的惟一性，從而避免瀏覽器緩存結果。

url：路徑字符串，指向你所請求的服務器上的那個文件。可以是絕對路徑或相對路徑。asynch：表示請求是否要異步傳輸，默認值為true(異步)。指定true，在讀取后面的腳本之前，不需要等待服務器的相應。指定false，當腳本處理過程經過這點時，會停下來，一直等到Ajax請求執行完畢再繼續執行。var

url

=

"GetAndPostExample?timeStamp="

+

new

Date().getTime();

發送請求--方法和屬性介紹open(method,url,30發送請求--方法和屬性介紹send(data)：open方法定義了Ajax請求的一些細節。send方法可為已經待命的請求發送指令data：將要傳遞給服務器的字符串。若選用的是GET請求，則不會發送任何數據，給send方法傳遞null即可：request.send(null);當向send()方法提供參數時，要確保open()中指定的方法是POST，如果沒有數據作為請求體的一部分發送，則使用null.完整的Ajax的GET請求示例：使用get請求時send方法參數時null,如果傳值的話，服務器也接受不到發送請求--方法和屬性介紹send(data)：使用get請31發送請求--方法和屬性介紹setRequestHeader(header,value)當瀏覽器向服務器請求頁面時，它會伴隨這個請求發送一組首部信息。這些首部信息是一系列描述請求的元數據(metadata)。首部信息用來聲明一個請求是GET還是POST。Ajax請求中，發送首部信息的工作可以由setRequestHeader完成參數header：首部的名字;參數value：首部的值。如果用POST請求向服務器發送數據，需要將“Content-type”的首部設置為“application/x-www-form-urlencoded”.它會告知服務器正在發送數據，并且數據已經符合URL編碼了。該方法必須在open()之后才能調用完整的Ajax的POST請求示例：發送請求--方法和屬性介紹setRequestHeader(32接收--方法和屬性介紹用XMLHttpRequest的方法可向服務器發送請求。在Ajax處理過程中，XMLHttpRequest的如下屬性可被服務器更改：readyStatestatusresponseTextresponseXML接收--方法和屬性介紹用XMLHttpRequest的方33接收--方法和屬性介紹readyStatereadyState屬性表示Ajax請求的當前狀態。它的值用數字代表。0代表未初始化。還沒有調用open方法1代表正在加載。open方法已被調用，但send方法還沒有被調用2代表已加載完畢。send已被調用。請求已經開始3代表交互中。服務器正在發送響應4代表完成。響應發送完畢每次readyState值的改變，都會觸發readystatechange事件。如果把onreadystatechange事件處理函數賦給一個函數，那么每次readyState值的改變都會引發該函數的執行。readyState值的變化會因瀏覽器的不同而有所差異。但是，當請求結束的時候，每個瀏覽器都會把readyState的值統一設為4接收--方法和屬性介紹readyState34接收--方法和屬性介紹status服務器發送的每一個響應也都帶有首部信息。三位數的狀態碼是服務器發送的響應中最重要的首部信息，并且屬于超文本傳輸協議中的一部分。常用狀態碼及其含義：404沒找到頁面(notfound)403禁止訪問(forbidden)500內部服務器出錯(internalserviceerror)200一切正常(ok)304沒有被修改(notmodified)(服務器返回304狀態，表示源文件沒有被修改

)在XMLHttpRequest對象中，服務器發送的狀態碼都保存在status屬性里。通過把這個值和200或304比較，可以確保服務器是否已發送了一個成功的響應接收--方法和屬性介紹status35接收--方法和屬性介紹responseTextXMLHttpRequest的responseText屬性包含了從服務器發送的數據。它是一個HTML,XML或普通文本，這取決于服務器發送的內容。當readyState屬性值變成4時,responseText屬性才可用，表明Ajax請求已經結束。接收--方法和屬性介紹responseText36接收--方法和屬性介紹responseXML如果服務器返回的是XML，那么數據將儲存在responseXML屬性中。只用服務器發送了帶有正確首部信息的數據時，responseXML屬性才是可用的。MIME類型必須為text/xml接收--方法和屬性介紹responseXML37成都傳智播客cd.AJAX開發框架AJAX實質上也是遵循Request/Server模式，所以這個框架基本的流程是：對象初始化發送請求服務器接收服務器返回客戶端接收修改客戶端頁面內容。只不過這個過程是異步的。成都傳智播客AJAX開發框架AJA38A、初始化XMLHttpRequest對象functioncreateXmlHttpRequest(){varxmlhttp=null;try{

//Firefox,Opera8.0+,Safarixmlhttp=newXMLHttpRequest(); }catch(e){//IEIE7.0以下的瀏覽器以ActiveX組件的方式來創建XMLHttpRequest對象varMSXML=['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP'];for(varn=0;n<MSXML.length;n++){try{xmlhttp=newActiveXObject(MSXML[n]);break;}catch(e){}}}returnxmlhttp;}A、初始化XMLHttpRequest對象function39B、指定響應處理函數指定當服務器返回信息時客戶端的處理方式。只要將相應的處理函數名稱賦給XMLHttpRequest對象的onreadystatechange屬性就可以了.比如：XMLHttpReq.onreadystatechange=processResponse;注意:這個函數名稱不加括號，不指定參數。也可以用Javascript函數直接量方式定義響應函數。比如：XMLHttpReq.onreadystatechange=function(){};//處理返回信息的函數functionprocessResponse(){}B、指定響應處理函數指定當服務器返回信息時客戶端的處理方式。40C、發出HTTP請求向服務器發出HTTP請求了。這一步調用XMLHttpRequest對象的open和send方法。http_request.open('GET','/some.file',true);http_request.send(null)按照順序，open調用完畢之后要調用send方法。send的參數如果是以Post方式發出的話，可以是任何想傳給服務器的內容。注意:如果要傳文件或者Post內容給服務器，必須先調用setRequestHeader方法，修改MIME類別。如下：http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);這時資料則以查詢字符串的形式列出，作為send的參數，例如：name=value&anothername=othervalue&so=onC、發出HTTP請求向服務器發出HTTP請求了。這一步調用X41發出Http請求的代碼//發送請求functionsendRequest(){//獲取文本框的值varchatMsg=input.value;varurl="chatServlet.do?charMsg="+chatMsg;//建立對服務器的調用XMLHttpReq.open("POST",url,true);//設置MiME類別,如果用POST請求向服務器發送數據，//需要將"Content-type"的首部設置為"application/x-www-form-urlencoded".//它會告知服務器正在發送數據，并且數據已經符合URL編碼了。XMLHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//狀態改變的事件觸發器,客戶端的狀態改變會觸發readystatechange事件,//onreadystatechange會調用相應的事件處理函數XMLHttpReq.onreadystatechange=processResponse;//發送數據XMLHttpReq.send(null);}發出Http請求的代碼//發送請求42D、處理服務器返回的信息處理響應處理函數都應該做什么。首先，它要檢查XMLHttpRequest對象的readyState值，判斷請求目前的狀態。參照前文的屬性表可以知道，readyState值為4的時候，代表服務器已經傳回所有的信息，可以開始處理信息并更新頁面內容了。如下：if(http_request.readyState==4){//信息已經返回，可以開始處理}else{//信息還沒有返回，等待}服務器返回信息后，還需要判斷返回的HTTP狀態碼，確定返回的頁面沒有錯誤。所有的狀態碼都可以在W3C的官方網站上查到。其中，200代表頁面正常。if(http_request.status==200){//頁面正常，可以開始處理信息}else{//頁面有問題}D、處理服務器返回的信息處理響應處理函數都應該做什么。43D、處理服務器返回的信息XMLHttpRequest對成功返回的信息有兩種處理方式：

responseText：將傳回的信息當字符串使用；

responseXML：將傳回的信息當XML文檔使用，可以用DOM處理。//處理返回信息的函數functionprocessResponse(){if(XMLHttpReq.readyState==4){//判斷對象狀態4代表完成if(XMLHttpReq.status==200){//信息已經成功返回，開始處理信息document.getElementById("chatArea").value=XMLHttpReq.responseText;}}}D、處理服務器返回的信息XMLHttpRequest對成功返44數據格式摘要在服務器端AJAX是一門與語言無關的技術。在業務邏輯層使用何種服務器端語言都可以。從服務器端接收數據的時候，那些數據必須以瀏覽器能夠理解的格式來發送。服務器端的編程語言一般以如下3種格式返回數據：XMLJSONHTML數據格式摘要在服務器端AJAX是一門與語言無關的技術。在45XML格式優點：XML是一種通用的數據格式。不必把數據強加到已定義好的格式中，而是要為數據自定義合適的標記。利用DOM可以完全掌控文檔。缺點：如果文檔來自于服務器，就必須得保證文檔含有正確的首部信息。若文檔類型不正確，那么responseXML的值將是空的。當瀏覽器接收到長的XML文件后，DOM解析可能會很復雜XML格式優點：46JSON格式JSON（JavaScriptObjectNotation）一種簡單的數據格式，比xml更輕巧。JSON是JavaScript原生格式，這意味著在JavaScript中處理JSON數據不需要任何特殊的API或工具包。JSON的規則很簡單：對象是一個無序的“‘名稱/值’對”集合。一個對象以“{”（左括號）開始，“}”（右括號）結束。每個“名稱”后跟一個“:”（冒號）；“‘名稱/值’對”之間使用“,”（逗號）分隔。

規則如下:1）映射用冒號（“：”）表示。名稱:值2）并列的數據之間用逗號（“，”）分隔。名稱1:值1,名稱2:值23）映射的集合（對象）用大括號（“{}”）表示。{名稱1:值1,名稱2:值2}4）并列數據的集合（數組）用方括號(“[]”)表示。[{名稱1:值,名稱2:值2},{名稱1:值,名稱2:值2}]5元素值可具有的類型：string,number,object,array,true,false,nullJSON格式JSON（JavaScriptObject47JSON示例JSON用冒號(而不是等號)來賦值。每一條賦值語句用逗號分開。整個對象用大括號封裝起來?？捎么罄ㄌ柗旨壡短讛祿?。對象描述中存儲的數據可以是字符串，數字或者布爾值。對象描述也可存儲函數，那就是對象的方法。JSON示例JSON用冒號(而不是等號)來賦值。每一條賦48解析JSONJSON只是一種文本字符串。它被存儲在responseText屬性中為了讀取存儲在responseText屬性中的JSON數據，需要根據JavaScript的eval語句。函數eval會把一個字符串當作它的參數。然后這個字符串會被當作JavaScript代碼來執行。因為JSON的字符串就是由JavaScript代碼構成的，所以它本身是可執行的代碼實例：解析JSONJSON只是一種文本字符串。它被存儲在res49處理JSON例子一:

<scriptlanguage="JavaScript">

varpeople={"firstName":"Brett","lastName":"McLaughlin","email":"brett@newI"};alert(people.firstName);alert(people.lastName);alert(people.email);</script>處理JSON例子一:50處理JSON例子二:<scriptlanguage="JavaScript">varpeople=[{"firstName":"Brett","email":"brett@newI"},{"firstName":"Mary","email":"mary@newI"}];alert(people[0].firstName);alert(people[0].email);alert(people[1].firstName);alert(people[1].email);</script>處理JSON例子二:51處理JSON例子三:

<scriptlanguage="JavaScript">

varpeople={"programmers":[{"firstName":"Brett","email":"brett@newI"},{"firstName":"Jason","email":"jason@"}]};window.alert(grammers[0].firstName);window.alert(grammers[1].email);</script>處理JSON例子三:52處理JSON例子四:

<scriptlanguage="JavaScript">

varpeople={"programmers":[{"firstName":"Brett","email":"brett@newI"},{"firstName":"Jason","email":"jason@"},{"firstName":"Elliotte","lastName":"Harold","email":"elharo@"}],"authors":[{"firstName":"Isaac","genre":"sciencefiction"},{"firstName":"Tad","genre":"fantasy"},{"firstName":"Frank","genre":"christianfiction"}],"musicians":[{"firstName":"Eric","instrument":"guitar"},{"firstName":"Sergei","instrument":"piano"}]};window.alert(grammers[1].firstName);window.alert(people.musicians[1].instrument);</script>處理JSON例子四:53處理JSON例子五<scriptlanguage="JavaScript">

varpeople={"username":"mary","age":"20","info":{"tel":"1234566","celltelphone":788666},"address":[{"city":"beijing","code":"1000022"},{"city":"shanghai","code":"2210444"}]};window.alert(people.username);window.alert(.tel);window.alert(people.address[0].city);</script>處理JSON例子五54JSON小結優點：作為一種數據傳輸格式，JSON與XML很相似，但是它更加靈巧。JSON不需要從服務器端發送含有特定內容類型的首部信息。缺點：語法過于嚴謹代碼不易讀eval函數存在風險JSON小結優點：55解析HTMLHTML由一些普通文本組成。如果服務器通過XMLHttpRequest發送HTML，文本將存儲在responseText屬性中。不必從responseText屬性中讀取數據。它已經是希望的格式，可以直接將它插入到頁面中。插入HTML代碼最簡單的方法是更新這個元素的innerHTML屬性。解析HTMLHTML由一些普通文本組成。如果服務器通過56HTML小結優點：從服務器端發送的HTML代碼在瀏覽器端不需要用JavaScript進行解析。HTML的可讀性好。HTML代碼塊與innerHTML屬性搭配，效率高。缺點：若需要通過AJAX更新一篇文檔的多個部分，HTML不合適innerHTML并非DOM標準。HTML小結優點：57對比小結若應用程序不需要與其他應用程序共享數據的時候,使用HTML片段來返回數據時最簡單的如果數據需要重用,JSON文件是個不錯的選擇,其在性能和文件大小方面有優勢當遠程應用程序未知時,XML文檔是首選,因為XML是web服務領域的“世界語”對比小結若應用程序不需要與其他應用程序共享數據的時候,使用58案例：省份與城市的聯動下拉列表框效果演示。案例：省份與城市的聯動下拉列表框效果演示。59聯動下拉：純靜態數據的html方式實驗步驟：演示程序運行的效果。編寫一個靜態province.html頁面，其中使用一個二維數組來裝載所有數據，然后分析和編碼實現省份與城市的聯動下拉列表框。編寫一個靜態jsonProvince.html頁面，其中使用JSON對象方式來裝載所有數據，然后分析和編碼實現此種數據格式下的省份與城市的聯動下拉列表框。聯動下拉：純靜態數據的html方式實驗步驟：60聯動下拉：動態生成數據的方式實驗步驟：編寫一個ListProvinceAction的Action和相應的province.jsp頁面，留出數據待填充，大家清晰看到后面的任務就是生成出數據。創建代表省份與城市的province和City實體類，然后將相應的實體對象存放在一個單例的MemoryDao中，用一個ArrayList集合存儲所有Province對象，Province對象中保存有一個City對象的集合，在MemoryDao中構建出各個對象及關系。創建ProvinceService類獲取所有省份列表和CityService類獲取某個省份下的所有城市。在ListProvinceAction中編寫拼湊出JSP頁面所需要的那個數組字符串。編寫一個ListJsonProvinceAction的Action和相應的jsonProvince.jsp頁面，以生成使用JSON對象來裝載所有數據，為了方便拼湊JSON格式的字符串，在各個實體對象中覆蓋toString方法返回自身的JSON格式字符串，這要比在外面最后統一轉換成一個JSON字符串的做法要優雅很多，這種分而治之的思想使得程序健壯且易于維護。編寫一個ListJsonProvince2Action的Action，快速演示和說明一下如何在其內部用JSONObject與JSONArray工具里來完成json字符串的生成工作。聯動下拉：動態生成數據的方式實驗步驟：61聯動下拉：用Ajax方式實現的思路分析傳統方式與Ajax實現方式的對比與選擇：好比飯館上菜的方式：一種是先讓用戶等較長時間，最后一下子將所有的菜全部上上來，一般的火鍋店都是這么做的，還有一種方式就是做好一盤菜就上一盤菜，用戶等待的時間較短，但送餐服務員要跑好多次，一般的家常菜飯店都是這么做的。如何選擇：傳統方式是一下子把所有數據搞到手，以后只是用js把到手的數據顯示出來即可，第一次得到數據的時間比較長，如果這個時間長得影響了用戶的感受，那就考慮用ajax進行改進，否則，可以直接使用傳統方式。如果將傳統方式改造為ajax方式的總結：將原有的一個jsp頁面改為兩個jsp頁面來實現，第一個頁面為那些固定不變的內容和javascript代碼，第二個頁面為那些要改變的區域的代碼，因此原來用一個action或servlet實現的代碼要改變為用兩個action或servlet來實現，這稱為二步視圖法。實現的思路剖析：第一次要獲得一個頁面，瀏覽器以后一