JavaScript面向?qū)ο蠹癊xtJS基礎(chǔ))_第1頁(yè)
JavaScript面向?qū)ο蠹癊xtJS基礎(chǔ))_第2頁(yè)
JavaScript面向?qū)ο蠹癊xtJS基礎(chǔ))_第3頁(yè)
JavaScript面向?qū)ο蠹癊xtJS基礎(chǔ))_第4頁(yè)
JavaScript面向?qū)ο蠹癊xtJS基礎(chǔ))_第5頁(yè)
已閱讀5頁(yè),還剩62頁(yè)未讀 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明:本文檔由用戶(hù)提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、AjaxAjax基礎(chǔ)知識(shí)介基礎(chǔ)知識(shí)介紹紹 用傳統(tǒng)方式校驗(yàn)用戶(hù)名是否重復(fù)傳統(tǒng)方式校驗(yàn)用戶(hù)名是否重復(fù)的設(shè)傳統(tǒng)方式校驗(yàn)用戶(hù)名是否重復(fù)的設(shè)計(jì)分析計(jì)分析RegUserUIReguser.jspRegUserMain.jsp注冊(cè)校驗(yàn)用戶(hù)名是否重復(fù)VerifyUserName?返回怎樣的一個(gè)頁(yè)面?zhèn)鹘y(tǒng)實(shí)現(xiàn)方式1 :在原來(lái)的主窗口中回顯結(jié)果n問(wèn)題:q1:回顯的頁(yè)面在原來(lái)網(wǎng)頁(yè)效果的基礎(chǔ)上增加一點(diǎn)內(nèi)容,可是服務(wù)器的響應(yīng)結(jié)果會(huì)覆蓋掉窗口中原來(lái)顯示的那個(gè)網(wǎng)頁(yè)內(nèi)容,如果服務(wù)器在響應(yīng)時(shí)僅僅回送要新增的內(nèi)容,則會(huì)覆蓋掉原來(lái)的整個(gè)網(wǎng)頁(yè),怎樣做才能看到原來(lái)網(wǎng)頁(yè)效果的基礎(chǔ)上增加一點(diǎn)內(nèi)容?q2:怎樣用javascript代碼將請(qǐng)求發(fā)

2、送給服務(wù)器,在發(fā)送請(qǐng)求時(shí),怎樣將文本框中填寫(xiě)的用戶(hù)名作為參數(shù)傳遞給服務(wù)器。q3:怎樣在標(biāo)簽中觸發(fā)javascript函數(shù)調(diào)用?觸發(fā)函數(shù)時(shí)要注意返回值。n實(shí)現(xiàn)思路:q讓VerifyUserName仍然返回Reguser.jsp,這時(shí)候需要在Reguser.jsp頁(yè)面中增加一條有時(shí)候顯示,有時(shí)候不顯示的提示信息?;蛘呤峭ㄟ^(guò)生成一段javascript代碼,然后用一個(gè)彈出對(duì)話(huà)框來(lái)顯示提示信息。先用瀏覽器直接測(cè)試 VerifyUserName。q在標(biāo)簽中可以使用javascript協(xié)議或onclick事件來(lái)觸發(fā)javascript函數(shù)調(diào)用,先用靜態(tài)數(shù)據(jù)測(cè)試一下,然后用window.location.h

3、ref屬性(replace方法)或模擬表單提交的方式向服務(wù)器發(fā)送請(qǐng)求,把兩種方式都要做一下。n缺點(diǎn):q要為電腦增加一個(gè)鼠標(biāo),由于瀏覽器的特點(diǎn)是買(mǎi)回鼠標(biāo)就會(huì)覆蓋掉原來(lái)的電腦,所以,要想顯示出電腦加鼠標(biāo)的效果,只能同時(shí)去買(mǎi)回一個(gè)電腦和鼠標(biāo)。q好比舞臺(tái)要切換帷幕一樣,上一場(chǎng)的帷幕上貼的是花,當(dāng)下一場(chǎng)要換成貼龍時(shí),最快的方式不是把原來(lái)帷幕上的花揭下來(lái)再換上龍,而是做兩個(gè)帷幕,直接把上一個(gè)帷幕收起,同時(shí)把下一個(gè)帷幕拉開(kāi)。每次都送出一個(gè)帷幕,帷幕上貼不同內(nèi)容。傳統(tǒng)實(shí)現(xiàn)方式2 :用彈出的新窗口回顯結(jié)果n實(shí)現(xiàn)方式:在彈出窗口中回顯結(jié)果q彈出窗口演示q模態(tài)對(duì)話(huà)框演示n實(shí)現(xiàn)思路:q由彈出窗口打開(kāi)一個(gè)網(wǎng)頁(yè)的方式發(fā)出

4、校驗(yàn)用戶(hù)名的請(qǐng)求,回送的應(yīng)該是一個(gè)網(wǎng)頁(yè),只是這個(gè)網(wǎng)頁(yè)的內(nèi)容很簡(jiǎn)單,但是,如果要有關(guān)閉按鈕,必須加上相應(yīng)的按鈕和javascript代碼。q模態(tài)對(duì)話(huà)框的好處在于避免了受瀏覽器顯示新窗口的方式的差異的影響,并可要求用戶(hù)必須關(guān)閉彈出窗口后才能進(jìn)行其他操作。n特點(diǎn):n服務(wù)器回送的結(jié)果給新窗口,不影響原始窗口。一個(gè)帷幕收起,同時(shí)把下一個(gè)帷幕拉開(kāi)。每次都送出一個(gè)帷幕,帷幕上貼不同內(nèi)容。什么是AjaxnAjax的概念:q是asynchronous javascript and xml的簡(jiǎn)寫(xiě)。q不是一項(xiàng)具體的技術(shù),而是幾門(mén)技術(shù)的綜合應(yīng)用。q其核心只不過(guò)是要在javascript中調(diào)用一個(gè)叫XMLHttpReq

5、uest的javascript類(lèi),這個(gè)類(lèi)可以與Web服務(wù)器使用HTTP協(xié)議進(jìn)行交互,程序不通過(guò)瀏覽器發(fā)出請(qǐng)求,而是用這個(gè)特殊的JavaScript對(duì)象發(fā)送請(qǐng)求,再由這個(gè)JavaScript對(duì)象接收響應(yīng),并將響應(yīng)結(jié)果用DOM編程方式掛到原來(lái)的網(wǎng)頁(yè)上(見(jiàn)下頁(yè)的圖),從而使得javascript借助這個(gè)api類(lèi)可以干出比較有意義的事情。qXMLHttpRequest對(duì)象在網(wǎng)絡(luò)上的俗稱(chēng)為XHR對(duì)象。Ajax的特點(diǎn)的特點(diǎn)nAjax的特點(diǎn):q瀏覽器中顯示一個(gè)頁(yè)面后,這個(gè)頁(yè)面以后一直不改變,所有的操作請(qǐng)求都由這個(gè)網(wǎng)頁(yè)中的javascript代碼發(fā)出,所有的結(jié)果都由javascript代碼接受并增加到這個(gè)頁(yè)面

6、上,瀏覽器窗口中顯示的網(wǎng)頁(yè)始終都是初始的那個(gè)網(wǎng)頁(yè)。(見(jiàn)下面兩頁(yè)的圖)q增強(qiáng)用戶(hù)體驗(yàn):可以在用戶(hù)瀏覽網(wǎng)頁(yè)的同時(shí)與服務(wù)器進(jìn)行異步交互和實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容的局部更新,例如,126郵箱密碼安全性判斷和google suggest;可以按需取數(shù)據(jù),改善頁(yè)面顯示速度,例如,樹(shù)狀菜單和babasport的首頁(yè)(整合多個(gè)信息的頁(yè)面);視覺(jué)流暢的定時(shí)刷新,例如,聊天室。(用下幾頁(yè)的圖舉例說(shuō)明)q學(xué)習(xí)ajax和應(yīng)用ajax的難點(diǎn)不在于XMLHttpRequest本身,而在于javascript和DOM編程,沒(méi)有較好的javascript和DOM編程基礎(chǔ),你就很難做出有意義的ajax應(yīng)用。瀏覽器的普通交互方式Ajax的交

7、互方式同步交互和異步交互同步交互和異步交互 舉個(gè)例子:普通舉個(gè)例子:普通B/S模式模式(同步同步) AJAX技術(shù)技術(shù)(異步異步) * 同步:提交請(qǐng)求-等待服務(wù)器處理-處理完畢返回 這個(gè)期間客戶(hù)端瀏覽器不能干任何事 * 異步: 請(qǐng)求通過(guò)事件觸發(fā)-服務(wù)器處理(這時(shí)瀏覽器仍然可以作其他事情)-處理完畢 同步是指:發(fā)送方發(fā)出數(shù)據(jù)后,等接收方發(fā)回響應(yīng)以后才發(fā)下一個(gè) 數(shù)據(jù)包的通訊方式。 異步是指:發(fā)送方發(fā)出數(shù)據(jù)后,不等接收方發(fā)回響應(yīng),接著發(fā)送下 個(gè)數(shù)據(jù)包的通訊方式 易懂的理解易懂的理解: 異步傳輸異步傳輸: 你傳輸吧,我去做我的事了,傳輸完了告訴我一聲你傳輸吧,我去做我的事了,傳輸完了告訴我一聲 同步傳輸

8、同步傳輸: 你現(xiàn)在傳輸,我要親眼看你傳輸完成,才去做別的事你現(xiàn)在傳輸,我要親眼看你傳輸完成,才去做別的事 AJAX案例之google suggest AJAX案例之Google MapsAjax的應(yīng)用場(chǎng)景:財(cái)富通網(wǎng)吧充值界面成都傳智播客 Ajax的應(yīng)用場(chǎng)景:密碼安全性檢測(cè)Ajax的應(yīng)用場(chǎng)景:RIA應(yīng)用Ajax的應(yīng)用場(chǎng)景:郵箱系統(tǒng)Ajax的應(yīng)用場(chǎng)景:藍(lán)源批發(fā)零售業(yè)連鎖管理系統(tǒng)究竟什么是究竟什么是AjaxnAjax:一種不用刷新整個(gè)頁(yè)面便可與服務(wù)器通訊的辦法不用刷新整個(gè)頁(yè)面便可與服務(wù)器通訊的辦法圖1 Web的傳統(tǒng)模型??蛻?hù)端向服務(wù)器發(fā)送一個(gè)請(qǐng)求,服務(wù)器返回整個(gè)頁(yè)面,如此反復(fù)圖2 在Ajax模型中,

9、數(shù)據(jù)在客戶(hù)端與數(shù)據(jù)在客戶(hù)端與服務(wù)器之間獨(dú)立傳輸。服務(wù)器不再返服務(wù)器之間獨(dú)立傳輸。服務(wù)器不再返回整個(gè)頁(yè)面回整個(gè)頁(yè)面Ajax的實(shí)現(xiàn)方式的實(shí)現(xiàn)方式n不用刷新整個(gè)頁(yè)面便可與服務(wù)器通訊的辦法:qFlashqJava appletq框架:如果使用一組框架構(gòu)造了一個(gè)網(wǎng)頁(yè),可以只更新其中一個(gè)框架,而不必驚動(dòng)整個(gè)頁(yè)面q隱藏的iframeqXMLHttpRequest:該對(duì)象是對(duì) JavaScript 的一個(gè)擴(kuò)展,可使網(wǎng)頁(yè)與服務(wù)器進(jìn)行通信。是創(chuàng)建 Ajax 應(yīng)用的最佳選擇。實(shí)際上通常把實(shí)際上通常把 Ajax 當(dāng)成當(dāng)成 XMLHttpRequest 對(duì)象的代名詞對(duì)象的代名詞 Ajax的工作原理的工作原理nAjax的

10、核心是JavaScript對(duì)象XmlHttpRequest。 該對(duì)象在Internet Explorer 5中首次引入,它是一種支持異步請(qǐng)求的技術(shù)。簡(jiǎn)而言之,XmlHttpRequest使您可以使用JavaScript向服務(wù)器提出請(qǐng)求并處理響應(yīng),而不阻塞用戶(hù)。Ajax的工作原理的工作原理nAJAX采用異步交互過(guò)程。AJAX在用戶(hù)與服務(wù)器之間引入一個(gè)中間媒介,從而消除了網(wǎng)絡(luò)交互過(guò)程中的處理等待處理等待缺點(diǎn)。n用戶(hù)的瀏覽器在執(zhí)行任務(wù)時(shí)即裝載了用戶(hù)的瀏覽器在執(zhí)行任務(wù)時(shí)即裝載了AJAX引擎。引擎。AJAX引擎用引擎用JavaScript語(yǔ)語(yǔ)言編寫(xiě),通常藏在一個(gè)隱藏的框架中。它負(fù)責(zé)編譯用戶(hù)界面及與服務(wù)器

11、之間言編寫(xiě),通常藏在一個(gè)隱藏的框架中。它負(fù)責(zé)編譯用戶(hù)界面及與服務(wù)器之間的交互。的交互。nAJAX引擎允許用戶(hù)與應(yīng)用軟件之間的交互過(guò)程異步進(jìn)行,獨(dú)立于用戶(hù)與網(wǎng)引擎允許用戶(hù)與應(yīng)用軟件之間的交互過(guò)程異步進(jìn)行,獨(dú)立于用戶(hù)與網(wǎng)絡(luò)服務(wù)器間的交流絡(luò)服務(wù)器間的交流?,F(xiàn)在,可以用Javascript調(diào)用AJAX引擎來(lái)代替產(chǎn)生一個(gè)HTTP的用戶(hù)動(dòng)作,內(nèi)存中的數(shù)據(jù)編輯、頁(yè)面導(dǎo)航、數(shù)據(jù)校驗(yàn)這些不需要重新載入整個(gè)頁(yè)面的需求可以交給AJAX來(lái)執(zhí)行。 n使用AJAX,可以為JSP、開(kāi)發(fā)人員、終端用戶(hù)帶來(lái)可見(jiàn)的便捷: 用戶(hù)界面AJAX引擎服務(wù)器用戶(hù)界面服務(wù)器AJAX包含的技術(shù)包含的技術(shù) AJAX:(Asynchronous

12、JavaScript and XML)并不是一項(xiàng)新技術(shù)并不是一項(xiàng)新技術(shù), ,其實(shí)是多種技術(shù)的綜合,包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest.q服務(wù)器端語(yǔ)言服務(wù)器端語(yǔ)言:服務(wù)器需要具備向?yàn)g覽器發(fā)送特定信息的能力。AjaxAjax與服務(wù)器端語(yǔ)言無(wú)關(guān)與服務(wù)器端語(yǔ)言無(wú)關(guān)。qXMLXML (eXtensible Markup Language,可擴(kuò)展標(biāo)記語(yǔ)言) 是一種描述數(shù)據(jù)的格式。AJAX AJAX 程序需要某種格式化的格式來(lái)在服務(wù)器和客戶(hù)端程序需要某種格式化的格式來(lái)在服務(wù)器和客戶(hù)端之間傳遞信息,之間傳遞信息,XML XML 是其中的一種選擇是其中的一

13、種選擇qXHTMLXHTML(eXtended Hypertext Markup Language,使用擴(kuò)展超媒體標(biāo)記語(yǔ)言)和 CSSCSS(Cascading Style Sheet,級(jí)聯(lián)樣式單)標(biāo)準(zhǔn)化呈標(biāo)準(zhǔn)化呈現(xiàn);現(xiàn);qDOMDOM(Document Object Model,文檔對(duì)象模型)實(shí)現(xiàn)動(dòng)態(tài)顯示和交互;實(shí)現(xiàn)動(dòng)態(tài)顯示和交互;q使用XMLHTTP組件XMLHttpRequestXMLHttpRequest對(duì)象對(duì)象進(jìn)行異步數(shù)據(jù)讀取異步數(shù)據(jù)讀取q使用JavaScriptJavaScript綁定和處理所有數(shù)據(jù)綁定和處理所有數(shù)據(jù)AJAX的缺陷的缺陷AJAX不是完美的技術(shù)。也存在缺陷不是完美的技

14、術(shù)。也存在缺陷:1 AJAX大量使用了Javascript和AJAX引擎,而這個(gè)取決于瀏覽器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持,Mozilla雖然也支持AJAX,但是提供XMLHttpRequest的方式不一樣。所以,使用AJAX的程序必須測(cè)試針對(duì)各個(gè)瀏覽器的兼容性。 2 AJAX更新頁(yè)面內(nèi)容的時(shí)候并沒(méi)有刷新整個(gè)頁(yè)面,因此,網(wǎng)頁(yè)的后退功能是失效的;有的用戶(hù)還經(jīng)常搞不清楚現(xiàn)在的數(shù)據(jù)是舊的還是已經(jīng)更新過(guò)的。這個(gè)就需要在明顯位置提醒用戶(hù)“數(shù)據(jù)已更新”。 3 對(duì)流媒體的支持沒(méi)有FLASH、Java Applet好。 4 一些手持設(shè)備(如手機(jī)、PDA等)現(xiàn)

15、在還不能很好的支持Ajax。XMLHttpRequest對(duì)象對(duì)象nXMLHttpRequest對(duì)象對(duì)象XMLHttpRequest是XMLHTTP組件的對(duì)象,通過(guò)這個(gè)對(duì)象,AJAX可以像桌面應(yīng)用程序一樣只同服務(wù)器進(jìn)行數(shù)據(jù)層面的交換,而不用每次都刷新界面,也不用每次將數(shù)據(jù)處理的工作都交給服務(wù)器來(lái)做;這樣既減輕了服務(wù)器負(fù)擔(dān)又加快了響應(yīng)速度、縮短了用戶(hù)等待的時(shí)間。 nXMLHttpRequest最早是在IE5中以ActiveX組件的形式實(shí)現(xiàn)的。非W3C標(biāo)準(zhǔn).n創(chuàng)建XMLHttpRequest對(duì)象(由于非標(biāo)準(zhǔn)所以實(shí)現(xiàn)方法不統(tǒng)一由于非標(biāo)準(zhǔn)所以實(shí)現(xiàn)方法不統(tǒng)一)qInternet Explorer把XMLH

16、ttpRequest實(shí)現(xiàn)為一個(gè)ActiveX對(duì)象q其他瀏覽器(Firefox、Safari、Opera)把它實(shí)現(xiàn)為一個(gè)本地的JavaScript對(duì)象。qXMLHttpRequest在不同瀏覽器上的實(shí)現(xiàn)是兼容的在不同瀏覽器上的實(shí)現(xiàn)是兼容的,所以可以用同樣的方式訪(fǎng)問(wèn)XMLHttpRequest實(shí)例的屬性和方法,而不論這個(gè)實(shí)例創(chuàng)建的方法是什么。XMLHttpRequest對(duì)象初始化對(duì)象初始化nfunction createXmlHttpRequest()var xmlhttp = null;try/Firefox, Opera 8.0+, Safari xmlhttp=new XMLHttpRequ

17、est();catch(e)/IEIE7.0以下的瀏覽器以以下的瀏覽器以ActiveX組件的方式來(lái)創(chuàng)建組件的方式來(lái)創(chuàng)建XMLHttpRequest對(duì)象對(duì)象var MSXML = MSXML2.XMLHTTP.6.0,MSXML2.XMLHTTP.5.0,MSXML2.XMLHTTP.4.0,MSXML2.XMLHTTP.3.0,MSXML2.XMLHTTP,Microsoft.XMLHTTP; for(var n = 0; n MSXML.length; n +) try xmlhttp = new ActiveXObject(MSXMLn); break; catch(e) return x

18、mlhttp;XMLHttpRequest對(duì)象方法對(duì)象方法方法方法 描述描述 abort() 停止當(dāng)前請(qǐng)求停止當(dāng)前請(qǐng)求 getAllResponseHeaders() 把把http請(qǐng)求的所有響應(yīng)首部作為鍵請(qǐng)求的所有響應(yīng)首部作為鍵/值對(duì)返回值對(duì)返回getResponseHeader(headerLabel) 返回指定首部的串值返回指定首部的串值open(“method”,”url”) 建立對(duì)服務(wù)器的調(diào)用,建立對(duì)服務(wù)器的調(diào)用,method參數(shù)可以是參數(shù)可以是GET,POST。url參數(shù)參數(shù)可以是相對(duì)可以是相對(duì)URL或絕對(duì)或絕對(duì)URL。這個(gè)方法還包括。這個(gè)方法還包括3個(gè)可選參數(shù)。個(gè)可選參數(shù)。 sen

19、d(content) 向服務(wù)器發(fā)送請(qǐng)求向服務(wù)器發(fā)送請(qǐng)求 setRequestHeader(label, value) 把指定首部設(shè)置為所提供的值。在設(shè)置任何首部之前必須先調(diào)把指定首部設(shè)置為所提供的值。在設(shè)置任何首部之前必須先調(diào)用用open() XMLHttpRequest對(duì)象屬性對(duì)象屬性發(fā)送請(qǐng)求發(fā)送請(qǐng)求-方法和屬性介紹方法和屬性介紹n利用XMLHttpRequest 實(shí)例與服務(wù)器進(jìn)行通信包含以下3個(gè)關(guān)鍵部分:qonreadystatechange 事件處理函數(shù)qopen 方法qsend 方法 發(fā)送請(qǐng)求發(fā)送請(qǐng)求-方法和屬性介紹方法和屬性介紹nonreadystatechange:q該事件處理函數(shù)

20、由服務(wù)器觸發(fā),而不是用戶(hù)該事件處理函數(shù)由服務(wù)器觸發(fā),而不是用戶(hù)q在 Ajax 執(zhí)行過(guò)程中,服務(wù)器會(huì)通知客戶(hù)端當(dāng)前的通信狀態(tài)。這依靠更新 XMLHttpRequest 對(duì)象的 readyState 來(lái)實(shí)現(xiàn)。改變改變 readyState 屬性是服務(wù)器對(duì)客戶(hù)端連接操作的一種方式。屬性是服務(wù)器對(duì)客戶(hù)端連接操作的一種方式。q每次每次 readyState 屬性的改變都會(huì)觸發(fā)屬性的改變都會(huì)觸發(fā) readystatechange事件事件發(fā)送請(qǐng)求發(fā)送請(qǐng)求-方法和屬性介紹方法和屬性介紹nopen(method, url, asynch)qXMLHttpRequest 對(duì)象的對(duì)象的 open 方法允許程序員用一

21、個(gè)方法允許程序員用一個(gè)Ajax調(diào)用向服務(wù)器發(fā)送調(diào)用向服務(wù)器發(fā)送請(qǐng)求請(qǐng)求。qmethod:請(qǐng)求類(lèi)型,類(lèi)似:請(qǐng)求類(lèi)型,類(lèi)似 “GET”或或”P(pán)OST”的字符串。若只想從服務(wù)器檢索的字符串。若只想從服務(wù)器檢索一個(gè)文件,而不需要發(fā)送任何數(shù)據(jù),使用一個(gè)文件,而不需要發(fā)送任何數(shù)據(jù),使用GET(可以在可以在GET請(qǐng)求里通過(guò)附加在請(qǐng)求里通過(guò)附加在URL上的查詢(xún)字符串來(lái)發(fā)送數(shù)據(jù),不過(guò)數(shù)據(jù)大小限制為上的查詢(xún)字符串來(lái)發(fā)送數(shù)據(jù),不過(guò)數(shù)據(jù)大小限制為2000個(gè)字符個(gè)字符)。若需要向。若需要向服務(wù)器發(fā)送數(shù)據(jù),用服務(wù)器發(fā)送數(shù)據(jù),用POST。q在某些情況下,有些瀏覽器會(huì)把多個(gè)在某些情況下,有些瀏覽器會(huì)把多個(gè)XMLHttpReq

22、uest請(qǐng)求的結(jié)果緩存在同一個(gè)請(qǐng)求的結(jié)果緩存在同一個(gè)URL。如果對(duì)每個(gè)請(qǐng)求的響應(yīng)不同,這就會(huì)帶來(lái)不好的結(jié)果。把當(dāng)前時(shí)間戳追加。如果對(duì)每個(gè)請(qǐng)求的響應(yīng)不同,這就會(huì)帶來(lái)不好的結(jié)果。把當(dāng)前時(shí)間戳追加到到URL的最后,就能確保的最后,就能確保URL的惟一性,從而避免瀏覽器緩存結(jié)果的惟一性,從而避免瀏覽器緩存結(jié)果。 qurl:路徑字符串,指向你所請(qǐng)求的服務(wù)器上的那個(gè)文件??梢允墙^對(duì)路徑或相:路徑字符串,指向你所請(qǐng)求的服務(wù)器上的那個(gè)文件??梢允墙^對(duì)路徑或相對(duì)路徑。對(duì)路徑。qasynch:表示請(qǐng)求是否要異步傳輸,默認(rèn)值為:表示請(qǐng)求是否要異步傳輸,默認(rèn)值為true(異步異步)。指定。指定true,在讀取后,在讀

23、取后面的腳本之前,不需要等待服務(wù)器的相應(yīng)。指定面的腳本之前,不需要等待服務(wù)器的相應(yīng)。指定false,當(dāng)腳本處理過(guò)程經(jīng)過(guò)這,當(dāng)腳本處理過(guò)程經(jīng)過(guò)這點(diǎn)時(shí),會(huì)停下來(lái),一直等到點(diǎn)時(shí),會(huì)停下來(lái),一直等到Ajax請(qǐng)求執(zhí)行完畢再繼續(xù)執(zhí)行請(qǐng)求執(zhí)行完畢再繼續(xù)執(zhí)行。lvar url = GetAndPostExample?timeStamp= + new Date().getTime(); 發(fā)送請(qǐng)求發(fā)送請(qǐng)求-方法和屬性介紹方法和屬性介紹nsend(data):qopen 方法定義了 Ajax 請(qǐng)求的一些細(xì)節(jié)。send 方法可為已經(jīng)待命的請(qǐng)求發(fā)送指令方法可為已經(jīng)待命的請(qǐng)求發(fā)送指令qdata:將要傳遞給服務(wù)器的字符串。

24、q若選用的是若選用的是 GET 請(qǐng)求,則不會(huì)發(fā)送任何數(shù)據(jù),請(qǐng)求,則不會(huì)發(fā)送任何數(shù)據(jù), 給給 send 方法傳遞方法傳遞 null 即可即可:request.send(null);q當(dāng)向send()方法提供參數(shù)時(shí),要確保open()中指定的方法是POST,如果沒(méi)有數(shù)據(jù)作為請(qǐng)求體的一部分發(fā)送,則使用null.q完整的完整的 Ajax 的的 GET 請(qǐng)求示例:請(qǐng)求示例:使用get請(qǐng)求時(shí)send方法參數(shù)時(shí)null,如果傳值的話(huà),服務(wù)器也接受不到發(fā)送請(qǐng)求發(fā)送請(qǐng)求-方法和屬性介紹方法和屬性介紹nsetRequestHeader(header,value)q當(dāng)瀏覽器向服務(wù)器請(qǐng)求頁(yè)面時(shí),它會(huì)伴隨這個(gè)請(qǐng)求發(fā)送一

25、組首部信息。這些首部信息是一系列描述請(qǐng)求的元數(shù)據(jù)(metadata)。首部信息用來(lái)聲明一個(gè)請(qǐng)求是首部信息用來(lái)聲明一個(gè)請(qǐng)求是 GET 還是還是 POST。qAjax 請(qǐng)求中,發(fā)送首部信息的工作可以由 setRequestHeader完成q參數(shù)header: 首部的名字; 參數(shù)value:首部的值。q如果用如果用 POST 請(qǐng)求向服務(wù)器發(fā)送數(shù)據(jù),需要將請(qǐng)求向服務(wù)器發(fā)送數(shù)據(jù),需要將 “Content-type” 的首部設(shè)置為的首部設(shè)置為 “application/x-www-form-urlencoded”.它會(huì)告知服務(wù)器正在發(fā)送數(shù)據(jù),并且數(shù)據(jù)已它會(huì)告知服務(wù)器正在發(fā)送數(shù)據(jù),并且數(shù)據(jù)已經(jīng)符合經(jīng)符合UR

26、L編碼了。編碼了。q該方法必須在該方法必須在open()之后才能調(diào)用之后才能調(diào)用q完整的完整的 Ajax 的的 POST 請(qǐng)求示例:請(qǐng)求示例:接收接收-方法和屬性介紹方法和屬性介紹n用 XMLHttpRequest 的方法可向服務(wù)器發(fā)送請(qǐng)求。在 Ajax 處理過(guò)程中,XMLHttpRequest 的如下屬性可被服務(wù)器更改:qreadyStateqstatusqresponseTextqresponseXML接收接收-方法和屬性介紹方法和屬性介紹nreadyStateqreadyState 屬性表示表示Ajax請(qǐng)求的當(dāng)前狀態(tài)請(qǐng)求的當(dāng)前狀態(tài)。它的值用數(shù)字代表。n0 代表未初始化。 還沒(méi)有調(diào)用 op

27、en 方法n1 代表正在加載。 open 方法已被調(diào)用,但 send 方法還沒(méi)有被調(diào)用n2 代表已加載完畢。send 已被調(diào)用。請(qǐng)求已經(jīng)開(kāi)始n3 代表交互中。服務(wù)器正在發(fā)送響應(yīng)n4 代表完成。響應(yīng)發(fā)送完畢代表完成。響應(yīng)發(fā)送完畢q每次每次 readyState 值的改變,都會(huì)觸發(fā)值的改變,都會(huì)觸發(fā) readystatechange 事件事件。如果把 onreadystatechange 事件處理函數(shù)賦給一個(gè)函數(shù),那么每次 readyState 值的改變都會(huì)引發(fā)該函數(shù)的執(zhí)行。qreadyState 值的變化會(huì)因?yàn)g覽器的不同而有所差異。但是,當(dāng)請(qǐng)但是,當(dāng)請(qǐng)求結(jié)束的時(shí)候,每個(gè)瀏覽器都會(huì)把求結(jié)束的時(shí)候,

28、每個(gè)瀏覽器都會(huì)把 readyState 的值統(tǒng)一設(shè)為的值統(tǒng)一設(shè)為 4接收接收-方法和屬性介紹方法和屬性介紹nstatusq服務(wù)器發(fā)送的每一個(gè)響應(yīng)也都帶有首部信息。三位數(shù)的狀態(tài)碼是服務(wù)器發(fā)送的響應(yīng)中最重要的首部信息,并且屬于超文本傳輸協(xié)議中的一部分。q常用狀態(tài)碼及其含義:n404 沒(méi)找到頁(yè)面(not found)n403 禁止訪(fǎng)問(wèn)(forbidden)n500 內(nèi)部服務(wù)器出錯(cuò)(internal service error)n200 一切正常(ok)n304 沒(méi)有被修改(not modified)(服務(wù)器返回304狀態(tài),表示源文件沒(méi)有被修改 )q在在 XMLHttpRequest 對(duì)象中,服務(wù)器發(fā)

29、送的狀態(tài)碼都保存在對(duì)象中,服務(wù)器發(fā)送的狀態(tài)碼都保存在 status 屬性里。通過(guò)把這個(gè)值和屬性里。通過(guò)把這個(gè)值和 200 或或 304 比較,可以確保比較,可以確保服務(wù)器是否已發(fā)送了一個(gè)成功的響應(yīng)服務(wù)器是否已發(fā)送了一個(gè)成功的響應(yīng)接收接收-方法和屬性介紹方法和屬性介紹nresponseTextqXMLHttpRequest 的 responseText 屬性包含了從服務(wù)器發(fā)送的數(shù)據(jù)包含了從服務(wù)器發(fā)送的數(shù)據(jù)。它是一個(gè)HTML,XML或普通文本,這取決于服務(wù)器發(fā)送的內(nèi)容。q當(dāng) readyState 屬性值變成 4 時(shí), responseText 屬性才可用,表明 Ajax 請(qǐng)求已經(jīng)結(jié)束。接收接收-方

30、法和屬性介紹方法和屬性介紹nresponseXMLq如果服務(wù)器返回的是如果服務(wù)器返回的是 XML, 那么數(shù)據(jù)將儲(chǔ)存在那么數(shù)據(jù)將儲(chǔ)存在 responseXML 屬性屬性中。中。q只用服務(wù)器發(fā)送了帶有正確首部信息的數(shù)據(jù)時(shí),只用服務(wù)器發(fā)送了帶有正確首部信息的數(shù)據(jù)時(shí), responseXML 屬屬性才是可用的。性才是可用的。 MIME 類(lèi)型必須為類(lèi)型必須為 text/xml成都傳智播客 AJAX開(kāi)發(fā)框架開(kāi)發(fā)框架AJAX實(shí)質(zhì)上也是遵循Request/Server模式,所以這個(gè)框架基本的流程是:n對(duì)象初始化n發(fā)送請(qǐng)求n服務(wù)器接收n服務(wù)器返回n客戶(hù)端接收n修改客戶(hù)端頁(yè)面內(nèi)容。只不過(guò)這個(gè)過(guò)程是異步的。A、初始

31、化、初始化XMLHttpRequest對(duì)象對(duì)象nfunction createXmlHttpRequest()var xmlhttp = null;try/Firefox, Opera 8.0+, Safari xmlhttp=new XMLHttpRequest();catch(e)/IEIE7.0以下的瀏覽器以以下的瀏覽器以ActiveX組件的方式來(lái)創(chuàng)建組件的方式來(lái)創(chuàng)建XMLHttpRequest對(duì)象對(duì)象var MSXML = MSXML2.XMLHTTP.6.0,MSXML2.XMLHTTP.5.0,MSXML2.XMLHTTP.4.0,MSXML2.XMLHTTP.3.0,MSXML2

32、.XMLHTTP,Microsoft.XMLHTTP; for(var n = 0; n MSXML.length; n +) try xmlhttp = new ActiveXObject(MSXMLn); break; catch(e) return xmlhttp;B、指定響應(yīng)處理函數(shù)、指定響應(yīng)處理函數(shù)n指定當(dāng)服務(wù)器返回信息時(shí)客戶(hù)端的處理方式。只要將相應(yīng)的處理函指定當(dāng)服務(wù)器返回信息時(shí)客戶(hù)端的處理方式。只要將相應(yīng)的處理函數(shù)名稱(chēng)賦給數(shù)名稱(chēng)賦給XMLHttpRequest對(duì)象的對(duì)象的onreadystatechange屬性就屬性就可以了可以了.比如:比如: XMLHttpReq.onready

33、statechange = processResponse;n注意注意:這個(gè)函數(shù)名稱(chēng)不加括號(hào),不指定參數(shù)。也可以用這個(gè)函數(shù)名稱(chēng)不加括號(hào),不指定參數(shù)。也可以用Javascript函函數(shù)直接量方式定義響應(yīng)函數(shù)。比如:數(shù)直接量方式定義響應(yīng)函數(shù)。比如: XMLHttpReq.onreadystatechange = function() ;/ 處理返回信息的函數(shù)function processResponse() C、發(fā)出、發(fā)出HTTP請(qǐng)求請(qǐng)求n向服務(wù)器發(fā)出向服務(wù)器發(fā)出HTTP請(qǐng)求了。這一步調(diào)用請(qǐng)求了。這一步調(diào)用XMLHttpRequest對(duì)象的對(duì)象的open和和send方法。方法。 http_req

34、uest.open(GET, /some.file, true); http_request.send(null)n按照順序,按照順序,open調(diào)用完畢之后要調(diào)用調(diào)用完畢之后要調(diào)用send方法。方法。send的參數(shù)如果是的參數(shù)如果是以以Post方式發(fā)出的話(huà),可以是任何想傳給服務(wù)器的內(nèi)容。方式發(fā)出的話(huà),可以是任何想傳給服務(wù)器的內(nèi)容。n注意:如果要傳文件或者Post內(nèi)容給服務(wù)器,必須先調(diào)用setRequestHeader方法,修改MIME類(lèi)別。如下:nhttp_request.setRequestHeader(“Content-Type”,”applica

35、tion/x-www-form-urlencoded”); 這時(shí)資料則以查詢(xún)字符串的形式列出,作為send的參數(shù),例如: name=value&anothername=othervalue&so=on發(fā)出發(fā)出Http請(qǐng)求的代碼請(qǐng)求的代碼/發(fā)送請(qǐng)求function sendRequest()/獲取文本框的值var chatMsg=input.value;var url=chatServlet.do?charMsg=+chatMsg;/建立對(duì)服務(wù)器的調(diào)用XMLHttpReq.open(POST,url,true);/設(shè)置MiME類(lèi)別,如果用 POST 請(qǐng)求向服務(wù)器發(fā)送數(shù)據(jù),/需要將

36、Content-type 的首部設(shè)置為 application/x-www-form-urlencoded./它會(huì)告知服務(wù)器正在發(fā)送數(shù)據(jù),并且數(shù)據(jù)已經(jīng)符合URL編碼了。XMLHttpReq.setRequestHeader(Content-Type, application/x-www-form-urlencoded);/狀態(tài)改變的事件觸發(fā)器,客戶(hù)端的狀態(tài)改變會(huì)觸發(fā)readystatechange事件,/onreadystatechange會(huì)調(diào)用相應(yīng)的事件處理函數(shù)XMLHttpReq.onreadystatechange=processResponse;/發(fā)送數(shù)據(jù)XMLHttpReq.send

37、(null);D、處理服務(wù)器返回的信息、處理服務(wù)器返回的信息處理響應(yīng)處理函數(shù)都應(yīng)該做什么。處理響應(yīng)處理函數(shù)都應(yīng)該做什么。 首先,它要檢查首先,它要檢查XMLHttpRequest對(duì)象的對(duì)象的readyState值,判斷請(qǐng)求目前的狀態(tài)。參照值,判斷請(qǐng)求目前的狀態(tài)。參照前文的屬性表可以知道,前文的屬性表可以知道,readyState值為值為4的時(shí)候,代表服務(wù)器已經(jīng)傳回所有的信息,的時(shí)候,代表服務(wù)器已經(jīng)傳回所有的信息,可以開(kāi)始處理信息并更新頁(yè)面內(nèi)容了。如下:可以開(kāi)始處理信息并更新頁(yè)面內(nèi)容了。如下:if (http_request.readyState = 4) / 信息已經(jīng)返回,可以開(kāi)始處理信息已經(jīng)

38、返回,可以開(kāi)始處理 else / 信息還沒(méi)有返回,等待信息還沒(méi)有返回,等待服務(wù)器返回信息后,還需要判斷返回的服務(wù)器返回信息后,還需要判斷返回的HTTP狀態(tài)碼,確定返回的頁(yè)面沒(méi)有錯(cuò)誤。所有狀態(tài)碼,確定返回的頁(yè)面沒(méi)有錯(cuò)誤。所有的狀態(tài)碼都可以在的狀態(tài)碼都可以在W3C的官方網(wǎng)站上查到。其中,的官方網(wǎng)站上查到。其中,200代表頁(yè)面正常。代表頁(yè)面正常。if (http_request.status = 200) / 頁(yè)面正常,可以開(kāi)始處理信息頁(yè)面正常,可以開(kāi)始處理信息 else / 頁(yè)面有問(wèn)題頁(yè)面有問(wèn)題D、處理服務(wù)器返回的信息、處理服務(wù)器返回的信息nXMLHttpRequest對(duì)成功返回的信息有兩種處理方

39、式:nresponseText:將傳回的信息當(dāng)字符串使用;nresponseXML:將傳回的信息當(dāng)XML文檔使用,可以用DOM處理。 /處理返回信息的函數(shù)function processResponse() if(XMLHttpReq.readyState=4) /判斷對(duì)象狀態(tài) 4代表完成 if(XMLHttpReq.status=200) /信息已經(jīng)成功返回,開(kāi)始處理信息 document.getElementById(chatArea).value=XMLHttpReq.responseText; 數(shù)據(jù)格式摘要n在服務(wù)器端 AJAX 是一門(mén)與語(yǔ)言無(wú)關(guān)的技術(shù)。在業(yè)務(wù)邏輯層使用何種服務(wù)器端語(yǔ)言

40、都可以。n從服務(wù)器端接收數(shù)據(jù)的時(shí)候,那些數(shù)據(jù)必須以瀏覽器能夠理解的格式來(lái)發(fā)送。服務(wù)器端的編程語(yǔ)言一般以如下 3 種格式返回?cái)?shù)據(jù):qXMLqJSONqHTMLXML格式n優(yōu)點(diǎn):qXML 是一種通用的數(shù)據(jù)格式。q不必把數(shù)據(jù)強(qiáng)加到已定義好的格式中,而是要為數(shù)據(jù)自定義合適的標(biāo)記。q利用 DOM 可以完全掌控文檔。n缺點(diǎn):q如果文檔來(lái)自于服務(wù)器,就必須得保證文檔含有正確的首部信息。若文檔類(lèi)型不正確,那么 responseXML 的值將是空的。q當(dāng)瀏覽器接收到長(zhǎng)的 XML 文件后, DOM 解析可能會(huì)很復(fù)雜JSON格式nJSON(JavaScript Object Notation)一種簡(jiǎn)單的數(shù)據(jù)格式,比

41、xml更輕巧。JSON是JavaScript原生格式原生格式,這意味著在JavaScript中處理JSON數(shù)據(jù)不需要任何特殊的API或工具包。 nJSON的規(guī)則很簡(jiǎn)單:對(duì)象是一個(gè)無(wú)序的對(duì)象是一個(gè)無(wú)序的“名稱(chēng)名稱(chēng)/值值對(duì)對(duì)”集合。一個(gè)對(duì)象以集合。一個(gè)對(duì)象以“”(左括號(hào))開(kāi)始,(左括號(hào))開(kāi)始,“”(右括號(hào))結(jié)束。每個(gè)(右括號(hào))結(jié)束。每個(gè)“名稱(chēng)名稱(chēng)”后跟一個(gè)后跟一個(gè)“:”(冒(冒號(hào));號(hào));“名稱(chēng)名稱(chēng)/值值對(duì)對(duì)”之間使用之間使用“,”(逗號(hào))分隔(逗號(hào))分隔。 規(guī)則如下規(guī)則如下: 1)映射用冒號(hào)(“:”)表示。名稱(chēng):值 2)并列的數(shù)據(jù)之間用逗號(hào)(“,”)分隔。名稱(chēng)1:值1,名稱(chēng)2:值2 3) 映射的

42、集合(對(duì)象)用大括號(hào)(“”)表示。名稱(chēng)1:值1,名稱(chēng)2:值2 4) 并列數(shù)據(jù)的集合(數(shù)組)用方括號(hào)(“”)表示。 名稱(chēng)1:值,名稱(chēng)2:值2, 名稱(chēng)1:值,名稱(chēng)2:值2 5 元素值可具有的類(lèi)型:string, number, object, array, true, false, null JSON 示例nJSON 用冒號(hào)用冒號(hào)(而不是等號(hào)而不是等號(hào))來(lái)賦值。每一條賦值語(yǔ)句用逗號(hào)分開(kāi)。整個(gè)對(duì)象用大來(lái)賦值。每一條賦值語(yǔ)句用逗號(hào)分開(kāi)。整個(gè)對(duì)象用大括號(hào)封裝起來(lái)。可用大括號(hào)分級(jí)嵌套數(shù)據(jù)。括號(hào)封裝起來(lái)??捎么罄ㄌ?hào)分級(jí)嵌套數(shù)據(jù)。n對(duì)象描述中存儲(chǔ)的數(shù)據(jù)可以是字符串,數(shù)字或者布爾值。對(duì)象描述也可存儲(chǔ)函對(duì)象描述中

43、存儲(chǔ)的數(shù)據(jù)可以是字符串,數(shù)字或者布爾值。對(duì)象描述也可存儲(chǔ)函數(shù),那就是對(duì)象的方法。數(shù),那就是對(duì)象的方法。解析JSONnJSON 只是一種文本字符串。它被存儲(chǔ)在 responseText 屬性中n為了讀取存儲(chǔ)在 responseText 屬性中的 JSON 數(shù)據(jù),需要根據(jù) JavaScript 的 eval 語(yǔ)句。函數(shù)函數(shù) eval 會(huì)把一個(gè)字符串當(dāng)作它的參數(shù)會(huì)把一個(gè)字符串當(dāng)作它的參數(shù)。然后這個(gè)字符串會(huì)被當(dāng)作然后這個(gè)字符串會(huì)被當(dāng)作 JavaScript 代碼來(lái)執(zhí)行。因?yàn)榇a來(lái)執(zhí)行。因?yàn)?JSON 的的字符串就是由字符串就是由 JavaScript 代碼構(gòu)成的,所以它本身是可執(zhí)行的代碼構(gòu)成的,所以它

44、本身是可執(zhí)行的n代碼實(shí)例:處理JSON例子一例子一: var people =firstName: Brett, lastName:McLaughlin, email: brettnewI ; alert(people.firstName); alert(people.lastName); alert(people.email); 處理JSON例子二例子二: var people = firstName: Brett,email: brettnewI , firstName: Mary,email: marynewI ; alert(people0.firstName); alert(peop

45、le0.email); alert(people1.firstName); alert(people1.email); 處理JSON例子三例子三: var people = programmers: firstName: Brett, email: brettnewI , firstName: Jason, email: ;window.alert(grammers0.firstName);window.alert(grammers1.email); 處理JSON例子四例子四: var people = programmers: firstName: B

46、rett, email: brettnewI , firstName: Jason, email: , firstName: Elliotte, lastName:Harold, email: , authors: firstName: Isaac, genre: science fiction , firstName: Tad, genre: fantasy , firstName: Frank, genre: christian fiction , musicians: firstName: Eric, instrument: guitar , firstName: Sergei, ins

47、trument: piano ; window.alert(grammers1.firstName); window.alert(people.musicians1.instrument); 處理JSON例子五例子五 var people = username:mary, age:20, info:tel:1234566,celltelphone:788666, address: city:beijing,code:1000022, city:shanghai,code:2210444 ; window.alert(people.username); window.aler

48、t(.tel); window.alert(people.address0.city); JSON 小結(jié)n優(yōu)點(diǎn):q作為一種數(shù)據(jù)傳輸格式,JSON 與 XML 很相似,但是它更加靈巧。qJSON 不需要從服務(wù)器端發(fā)送含有特定內(nèi)容類(lèi)型的首部信息。n缺點(diǎn):q語(yǔ)法過(guò)于嚴(yán)謹(jǐn)q代碼不易讀qeval 函數(shù)存在風(fēng)險(xiǎn)解析 HTMLn HTML 由一些普通文本組成。如果服務(wù)器通過(guò) XMLHttpRequest 發(fā)送 HTML, 文本將存儲(chǔ)在 responseText 屬性中。n不必從 responseText 屬性中讀取數(shù)據(jù)。它已經(jīng)是希望的格式,可以直接將它插入到頁(yè)面中。n插入 HTML 代

49、碼最簡(jiǎn)單的方法是更新這個(gè)元素的 innerHTML 屬性。HTML 小結(jié)n優(yōu)點(diǎn):q從服務(wù)器端發(fā)送的 HTML 代碼在瀏覽器端不需要用 JavaScript 進(jìn)行解析。qHTML 的可讀性好。qHTML 代碼塊與 innerHTML 屬性搭配,效率高。n缺點(diǎn):q若需要通過(guò) AJAX 更新一篇文檔的多個(gè)部分,HTML 不合適qinnerHTML 并非 DOM 標(biāo)準(zhǔn)。對(duì)比小結(jié)n若應(yīng)用程序不需要與其他應(yīng)用程序共享數(shù)據(jù)的時(shí)候不需要與其他應(yīng)用程序共享數(shù)據(jù)的時(shí)候, 使用 HTML 片段來(lái)返回?cái)?shù)據(jù)時(shí)最簡(jiǎn)單的n如果數(shù)據(jù)需要重用如果數(shù)據(jù)需要重用, JSON 文件是個(gè)不錯(cuò)的選擇, 其在性能和文件大小方面有優(yōu)勢(shì)n當(dāng)遠(yuǎn)

50、程應(yīng)用程序未知時(shí)當(dāng)遠(yuǎn)程應(yīng)用程序未知時(shí), XML 文檔是首選, 因?yàn)?XML 是 web 服務(wù)領(lǐng)域的 “世界語(yǔ)”案例:省份與城市的聯(lián)動(dòng)下拉列表框n效果演示。聯(lián)動(dòng)下拉:純靜態(tài)數(shù)據(jù)的html方式n實(shí)驗(yàn)步驟:q演示程序運(yùn)行的效果。q編寫(xiě)一個(gè)靜態(tài)province.html頁(yè)面,其中使用一個(gè)二維數(shù)組來(lái)裝載所有數(shù)據(jù),然后分析和編碼實(shí)現(xiàn)省份與城市的聯(lián)動(dòng)下拉列表框。q編寫(xiě)一個(gè)靜態(tài)jsonProvince.html頁(yè)面,其中使用JSON對(duì)象方式來(lái)裝載所有數(shù)據(jù),然后分析和編碼實(shí)現(xiàn)此種數(shù)據(jù)格式下的省份與城市的聯(lián)動(dòng)下拉列表框。聯(lián)動(dòng)下拉:動(dòng)態(tài)生成數(shù)據(jù)的方式n實(shí)驗(yàn)步驟:q編寫(xiě)一個(gè)ListProvinceAction的Act

51、ion和相應(yīng)的province.jsp頁(yè)面,留出數(shù)據(jù)待填充,大家清晰看到后面的任務(wù)就是生成出數(shù)據(jù)。q創(chuàng)建代表省份與城市的province和City實(shí)體類(lèi),然后將相應(yīng)的實(shí)體對(duì)象存放在一個(gè)單例的MemoryDao中,用一個(gè)ArrayList集合存儲(chǔ)所有Province對(duì)象,Province對(duì)象中保存有一個(gè)City對(duì)象的集合,在MemoryDao中構(gòu)建出各個(gè)對(duì)象及關(guān)系。q創(chuàng)建ProvinceService類(lèi)獲取所有省份列表和CityService類(lèi)獲取某個(gè)省份下的所有城市。q在ListProvinceAction中編寫(xiě)拼湊出JSP頁(yè)面所需要的那個(gè)數(shù)組字符串。q編寫(xiě)一個(gè)ListJsonProvince

52、Action的Action和相應(yīng)的jsonProvince.jsp頁(yè)面,以生成使用JSON對(duì)象來(lái)裝載所有數(shù)據(jù),為了方便拼湊JSON格式的字符串,在各個(gè)實(shí)體對(duì)象中覆蓋toString方法返回自身的JSON格式字符串,這要比在外面最后統(tǒng)一轉(zhuǎn)換成一個(gè)JSON字符串的做法要優(yōu)雅很多,這種分而治之的思想使得程序健壯且易于維護(hù)。q編寫(xiě)一個(gè)ListJsonProvince2Action的Action,快速演示和說(shuō)明一下如何在其內(nèi)部用JSONObject與JSONArray工具里來(lái)完成json字符串的生成工作。聯(lián)動(dòng)下拉:用Ajax方式實(shí)現(xiàn)的思路分析n傳統(tǒng)方式與Ajax實(shí)現(xiàn)方式的對(duì)比與選擇:q好比飯館上菜的方式:一種是先讓用戶(hù)等較長(zhǎng)時(shí)間,最后一下子將所有的菜全部上上來(lái),一般的火鍋店都是這么做的,還有一種方式就是做好一盤(pán)菜就上一盤(pán)菜,用戶(hù)等待的時(shí)間較短,但送餐服務(wù)員要跑好多次,一般的家常菜飯店都是這么做的。q如何選擇:傳統(tǒng)方式是一下子把所有數(shù)據(jù)搞到手,以后只是用js把到手的數(shù)據(jù)顯示出來(lái)即可,第一次得到數(shù)據(jù)的時(shí)間比較長(zhǎng),如果這個(gè)時(shí)間長(zhǎng)得影響了用戶(hù)的感受,那就考慮用ajax進(jìn)行改進(jìn),否則,可以直接使用傳統(tǒng)方式。q如果將傳統(tǒng)方式改造為ajax方式的總結(jié):將原有的一個(gè)jsp頁(yè)面改為兩個(gè)jsp頁(yè)面來(lái)實(shí)現(xiàn),第一個(gè)頁(yè)面為那些固定不變的內(nèi)容

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論