<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    Vincent.Chan‘s Blog

    常用鏈接

    統(tǒng)計(jì)

    積分與排名

    網(wǎng)站

    最新評(píng)論

    Ajax簡(jiǎn)介

    時(shí)間:2005-11-01
    作者:David Teare
    瀏覽次數(shù):
    本文關(guān)鍵字:ajax,?dhtml,?dwr,? javascript
    文章工具
    推薦給朋友?推薦給朋友
    打印文章?打印文章

      作為J2EE開(kāi)發(fā)人員,我們似乎經(jīng)常關(guān)注“后端機(jī)制(backend mechanics)”。我們通常會(huì)忘記,J2EE的主要成功之處在Web應(yīng)用程序方面;許多原因使得人們喜歡利用Web開(kāi)發(fā)應(yīng)用程序,但主要還是因?yàn)槠? 易于部署的特點(diǎn)允許站點(diǎn)以盡可能低的成本擁有上百萬(wàn)的用戶。遺憾的是,在過(guò)去幾年中,我們?cè)诤蠖送度肓颂嗟臅r(shí)間,而在使我們的Web用戶界面對(duì)用戶自然 和響應(yīng)靈敏方面卻投入不足。

      本文介紹一種方法,Ajax,使用它可以構(gòu)建更為動(dòng)態(tài)和響應(yīng)更靈敏的Web應(yīng)用程序。該方法的關(guān)鍵在于對(duì)瀏覽器端的JavaScript、 DHTML和與服務(wù)器異步通信的組合。本文也演示了啟用這種方法是多么簡(jiǎn)單:利用一個(gè)Ajax框架(指DWR)構(gòu)造一個(gè)應(yīng)用程序,它直接從瀏覽器與后端服 務(wù)進(jìn)行通信。如果使用得當(dāng),這種強(qiáng)大的力量可以使應(yīng)用程序更加自然和響應(yīng)靈敏,從而提升用戶的瀏覽體驗(yàn)。

      該應(yīng)用程序中所使用的示例代碼已打包為單獨(dú)的WAR文件,可供下載。

    簡(jiǎn)介

      術(shù)語(yǔ)Ajax用來(lái)描述一組技術(shù),它使瀏覽器可以為用戶提供更為自然的瀏覽體驗(yàn)。在Ajax之前,Web站點(diǎn)強(qiáng)制用戶進(jìn)入提交/等待/重新顯示范 例,用戶的動(dòng)作總是與服務(wù)器的“思考時(shí)間”同步。Ajax提供與服務(wù)器異步通信的能力,從而使用戶從請(qǐng)求/響應(yīng)的循環(huán)中解脫出來(lái)。借助于Ajax,可以在 用戶單擊按鈕時(shí),使用JavaScript和DHTML立即更新UI,并向服務(wù)器發(fā)出異步請(qǐng)求,以執(zhí)行更新或查詢數(shù)據(jù)庫(kù)。當(dāng)請(qǐng)求返回時(shí),就可以使用 JavaScript和CSS來(lái)相應(yīng)地更新UI,而不是刷新整個(gè)頁(yè)面。最重要的是,用戶甚至不知道瀏覽器正在與服務(wù)器通信:Web站點(diǎn)看起來(lái)是即時(shí)響應(yīng) 的。

      雖然Ajax所需的基礎(chǔ)架構(gòu)已經(jīng)出現(xiàn)了一段時(shí)間,但直到最近異步請(qǐng)求的真正威力才得到利用。能夠擁有一個(gè)響應(yīng)極其靈敏的Web站點(diǎn)確實(shí)激動(dòng)人 心,因?yàn)樗罱K允許開(kāi)發(fā)人員和設(shè)計(jì)人員使用標(biāo)準(zhǔn)的HTML/CSS/JavaScript堆棧創(chuàng)建“桌面風(fēng)格的(desktop-like)”可用性。

      通常,在J2EE中,開(kāi)發(fā)人員過(guò)于關(guān)注服務(wù)和持久性層的開(kāi)發(fā),以至于用戶界面的可用性已經(jīng)落后。在一個(gè)典型的J2EE開(kāi)發(fā)周期中,常常會(huì)聽(tīng)到這樣的話,“我們沒(méi)有可投入U(xiǎn)I的時(shí)間”或“不能用HTML實(shí)現(xiàn)”。但是,以下Web站點(diǎn)證明,這些理由再也站不住腳了:

      所有這些Web站點(diǎn)都告訴我們,Web應(yīng)用程序不必完全依賴于從服務(wù)器重新載入頁(yè)面來(lái)向用戶呈現(xiàn)更改。一切似乎就在瞬間發(fā)生。簡(jiǎn)而言之,在涉及到用戶界面的響應(yīng)靈敏度時(shí),基準(zhǔn)設(shè)得更高了。

    定義Ajax

      Adaptive Path公司的Jesse James Garrett這樣定義Ajax

      Ajax不是一種技術(shù)。實(shí)際上,它由幾種蓬勃發(fā)展的技術(shù)以新的強(qiáng)大方式組合而成。Ajax包含:

    • 基于XHTMLCSS標(biāo)準(zhǔn)的表示;
    • 使用Document Object Model進(jìn)行動(dòng)態(tài)顯示和交互;
    • 使用XMLHttpRequest與服務(wù)器進(jìn)行異步通信;
    • 使用JavaScript綁定一切。

      這非常好,但為什么要以Ajax命名呢?其實(shí)術(shù)語(yǔ)Ajax是由Jesse James Garrett創(chuàng)造的,他說(shuō)它是“Asynchronous JavaScript + XML的簡(jiǎn)寫(xiě)”。

    Ajax的工作原理

      Ajax的核心是JavaScript對(duì)象XmlHttpRequest。該對(duì)象在Internet Explorer 5中首次引入,它是一種支持異步請(qǐng)求的技術(shù)。簡(jiǎn)而言之,XmlHttpRequest使您可以使用JavaScript向服務(wù)器提出請(qǐng)求并處理響應(yīng),而不 阻塞用戶。

      在創(chuàng)建Web站點(diǎn)時(shí),在客戶端執(zhí)行屏幕更新為用戶提供了很大的靈活性。下面是使用Ajax可以完成的功能:

    • 動(dòng)態(tài)更新購(gòu)物車(chē)的物品總數(shù),無(wú)需用戶單擊Update并等待服務(wù)器重新發(fā)送整個(gè)頁(yè)面。
    • 提升站點(diǎn)的性 能,這是通過(guò)減少?gòu)姆?wù)器下載的數(shù)據(jù)量而實(shí)現(xiàn)的。例如,在Amazon的購(gòu)物車(chē)頁(yè)面,當(dāng)更新籃子中的一項(xiàng)物品的數(shù)量時(shí),會(huì)重新載入整個(gè)頁(yè)面,這必須下載 32K的數(shù)據(jù)。如果使用Ajax計(jì)算新的總量,服務(wù)器只會(huì)返回新的總量值,因此所需的帶寬僅為原來(lái)的百分之一。
    • 消除了每次用戶輸入時(shí)的頁(yè)面刷新。例如,在Ajax中,如果用戶在分頁(yè)列表上單擊Next,則服務(wù)器數(shù)據(jù)只刷新列表而不是整個(gè)頁(yè)面。
    • 直接編輯表格數(shù)據(jù),而不是要求用戶導(dǎo)航到新的頁(yè)面來(lái)編輯數(shù)據(jù)。對(duì)于Ajax,當(dāng)用戶單擊Edit時(shí),可以將靜態(tài)表格刷新為內(nèi)容可編輯的表格。用戶單擊Done之后,就可以發(fā)出一個(gè)Ajax請(qǐng)求來(lái)更新服務(wù)器,并刷新表格,使其包含靜態(tài)、只讀的數(shù)據(jù)。

      一切皆有可能!但愿它能夠激發(fā)您開(kāi)始開(kāi)發(fā)自己的基于Ajax的站點(diǎn)。然而,在開(kāi)始之前,讓我們介紹一個(gè)現(xiàn)有的Web站點(diǎn),它遵循傳統(tǒng)的提交/等待/重新顯示的范例,我們還將討論Ajax如何提升用戶體驗(yàn)。

    Ajax可用于那些場(chǎng)景?——一個(gè)例子:MSN Money頁(yè)面

      前幾天,在瀏覽MSN Money頁(yè)面的時(shí)候,有一篇關(guān)于房地產(chǎn)投資的文章引起了我的好奇心。我決定使用站點(diǎn)的“Rate this article”(評(píng)價(jià)本文)功能,鼓勵(lì)其他的用戶花一點(diǎn)時(shí)間來(lái)閱讀這篇文章。在我單擊vote按鈕并等待了一會(huì)兒之后,整個(gè)頁(yè)面被刷新,在原來(lái)投票問(wèn)題所在的地方出現(xiàn)了一個(gè)漂亮的感謝畫(huà)面。

      而Ajax能夠使用戶的體驗(yàn)更加愉快,它可以提供響應(yīng)更加靈敏的UI,并消除頁(yè)面刷新所帶來(lái)的閃爍。目前,由于要刷新整個(gè)頁(yè)面,需要傳送大量的 數(shù)據(jù),因?yàn)楸仨氈匦掳l(fā)送整個(gè)頁(yè)面。如果使用Ajax,服務(wù)器可以返回一個(gè)包含了感謝信息的500字節(jié)的消息,而不是發(fā)送26,813字節(jié)的消息來(lái)刷新整個(gè) 頁(yè)面。即使使用的是高速I(mǎi)nternet,傳送26K和1/2K的差別也非常大。同樣重要的是,只需要刷新與投票相關(guān)的一小節(jié),而不是刷新整個(gè)屏幕。

      讓我們利用Ajax實(shí)現(xiàn)自己的基本投票系統(tǒng)。

    原始的Ajax:直接使用XmlHttpRequest

      如上所述,Ajax的核心是JavaScript對(duì)象XmlHttpRequest。下面的示例文章評(píng)價(jià)系統(tǒng)將帶您熟悉Ajax的底層基本知識(shí):http://tearesolutions.com/ajax-demo/raw-ajax.html。注:如果您已經(jīng)在本地WebLogic容器中安裝了ajax-demo.war,可以導(dǎo)航到http://localhost:7001/ajax-demo/raw-ajax.html

      瀏覽應(yīng)用程序,參與投票,并親眼看它如何運(yùn)轉(zhuǎn)。熟悉了該應(yīng)用程序之后,繼續(xù)閱讀,進(jìn)一步了解其工作原理細(xì)節(jié)。

      首先,您擁有一些簡(jiǎn)單的定位點(diǎn)標(biāo)記,它連接到一個(gè)JavaScriptcastVote(rank)函數(shù)。
    function castVote(rank) {
    var url = "/ajax-demo/static-article-ranking.html";
    var callback = processAjaxResponse;
    executeXhr(callback, url);
    }

      該函數(shù)為您想要與之通信的服務(wù)器資源創(chuàng)建一個(gè)URL并調(diào)用內(nèi)部函數(shù)executeXhr,提供一個(gè)回調(diào)JavaScript函數(shù),一旦服務(wù)器響 應(yīng)可用,該函數(shù)就被執(zhí)行。由于我希望它運(yùn)行在一個(gè)簡(jiǎn)單的Apache環(huán)境中,“cast vote URL”只是一個(gè)簡(jiǎn)單的HTML頁(yè)面。在實(shí)際情況中,被調(diào)用的URL將記錄票數(shù)并動(dòng)態(tài)地呈現(xiàn)包含投票總數(shù)的響應(yīng)。

      下一步是發(fā)出一個(gè)XmlHttpRequest請(qǐng)求:
    function executeXhr(callback, url) {
    // branch for native XMLHttpRequest object
    if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
    req.onreadystatechange = callback;
    req.open("GET", url, true);
    req.send(null);
    } // branch for IE/Windows ActiveX version
    else if (window.ActiveXObject) {
    req = new ActiveXObject("Microsoft.XMLHTTP");
    if (req) {
    req.onreadystatechange = callback;
    req.open("GET", url, true);
    req.send();
    }
    }
    }

      如您所見(jiàn),執(zhí)行一個(gè)XmlHttpRequest并不簡(jiǎn)單,但非常直觀。和平常一樣,在JavaScript領(lǐng)域,大部分的工作量都花在確保瀏 覽器兼容方面。在這種情況下,首先要確定XmlHttpRequest是否可用。如果不能用,很可能要使用Internet Explorer,這樣就要使用所提供的ActiveX實(shí)現(xiàn)。

    executeXhr()方法中最關(guān)鍵的部分是這兩行:

    req.onreadystatechange = callback;
    req.open("GET", url, true);

      第一行定義了JavaScript回調(diào)函數(shù),您希望一旦響應(yīng)就緒它就自動(dòng)執(zhí)行,而req.open()方法中所指定的“true”標(biāo)志說(shuō)明您想要異步執(zhí)行該請(qǐng)求。

      一旦服務(wù)器處理完XmlHttpRequest并返回給瀏覽器,使用req.onreadystatechange指派所設(shè)置的回調(diào)方法將被自動(dòng)調(diào)用。
    function processAjaxResponse() {
    // only if req shows "loaded"
    if (req.readyState == 4) {
    // only if "OK"
    if (req.status == 200) {
    502 502'votes').innerHTML = req.responseText;
    } else {
    alert("There was a problem retrieving the XML data:
    " +
    req.statusText);
    }
    }
    }

      該代碼相當(dāng)簡(jiǎn)潔,并且使用了幾個(gè)幻數(shù),這使得難以一下子看出發(fā)生了什么。為了弄清楚這一點(diǎn),下面的表格(引用自http://developer.apple.com/internet/webcontent/xmlhttpreq.html)列舉了常用的XmlHttpRequest對(duì)象屬性。

    屬性

    描述

    onreadystatechange

    每次狀態(tài)改變所觸發(fā)事件的事件處理程序

    readyState

    對(duì)象狀態(tài)值:

    • 0 = 未初始化(uninitialized)
    • 1 = 正在加載(loading)
    • 2 = 加載完畢(loaded)
    • 3 = 交互(interactive)
    • 4 = 完成(complete)

    responseText

    從服務(wù)器進(jìn)程返回的數(shù)據(jù)的字符串形式

    responseXML

    從服務(wù)器進(jìn)程返回的DOM兼容的文檔數(shù)據(jù)對(duì)象

    status

    從服務(wù)器返回的數(shù)字代碼,比如404(未找到)或200(就緒)

    statusText

    伴隨狀態(tài)碼的字符串信息

      現(xiàn)在processVoteResponse()函數(shù)開(kāi)始顯示出其意義了。它首先檢查XmlHttpRequest的整體狀態(tài)以保證它已經(jīng)完成 (readyStatus == 4),然后根據(jù)服務(wù)器的設(shè)定詢問(wèn)請(qǐng)求狀態(tài)。如果一切正常(status == 200),就使用innerHTML屬性重寫(xiě)DOM的“votes”節(jié)點(diǎn)的內(nèi)容。

      既然您親眼看到了XmlHttpRequest對(duì)象是如何工作的,就讓我們利用一個(gè)旨在簡(jiǎn)化JavaScript與Java應(yīng)用程序之間的異步通信的框架來(lái)對(duì)具體的細(xì)節(jié)進(jìn)行抽象。

    Ajax: DWR方式

      按照與文章評(píng)價(jià)系統(tǒng)相同的流程,我們將使用Direct Web Remoting(DWR)框架實(shí)現(xiàn)同樣的功能。

      假定文章和投票結(jié)果存儲(chǔ)在一個(gè)數(shù)據(jù)庫(kù)中,使用某種對(duì)象/關(guān)系映射技術(shù)來(lái)完成抽取工作。為了部署起來(lái)盡可能地簡(jiǎn)單,我們不會(huì)使用數(shù)據(jù)庫(kù)進(jìn)行持久性 存儲(chǔ)。此外,為使應(yīng)用程序盡可能通用,也不使用Web框架。相反,應(yīng)用程序?qū)囊粋€(gè)靜態(tài)HTML文件開(kāi)始,可以認(rèn)為它由服務(wù)器動(dòng)態(tài)地呈現(xiàn)。除了這些簡(jiǎn)化措 施,應(yīng)用程序還應(yīng)該使用Spring Framework關(guān)聯(lián)一切,以便輕松看出如何在一個(gè)“真實(shí)的”應(yīng)用程序中使用DWR。

      現(xiàn)在應(yīng)該下載示例應(yīng)用程序并熟悉它。該應(yīng)用程序被壓縮為標(biāo)準(zhǔn)的WAR文件,因此您可以把它放置到任何一個(gè)Web容器中——無(wú)需進(jìn)行配置。部署完畢之后,就可以導(dǎo)航到http://localhost:7001/ajax_demo/dwr-ajax.html來(lái)運(yùn)行程序。

      可以查看HTML 源代碼,了解它如何工作。給人印象最深的是,代碼如此簡(jiǎn)單——所有與服務(wù)器的交互都隱藏在JavaScript對(duì)象ajaxSampleSvc的后面。更加令人驚訝的是,ajaxSampleSvc服務(wù)不是由手工編寫(xiě)而是完全自動(dòng)生成的!讓我們繼續(xù),看看這是如何做到的。

    引入DWR

      如同在“原始的Ajax”一節(jié)所演示的那樣,直接使用XmlHttpRequest創(chuàng)建異步請(qǐng)求非常麻煩。不僅JavaScript代碼冗長(zhǎng),而且必須考慮服務(wù)器端為定位Ajax請(qǐng)求到適當(dāng)?shù)姆?wù)所需做的工作,并將結(jié)果封送到瀏覽器。

      設(shè)計(jì)DWR的目的是要處理將Web頁(yè)面安裝到后端服務(wù)上所需的所有信息管道。它是一個(gè)Java框架,可以很輕松地將它插入到Web應(yīng)用程序中, 以便JavaScript代碼可以調(diào)用服務(wù)器上的服務(wù)。它甚至直接與Spring Framework集成,從而允許用戶直接向Web客戶機(jī)公開(kāi)bean。

      DWR真正的巧妙之處是,在用戶配置了要向客戶機(jī)公開(kāi)的服務(wù)之后,它使用反射來(lái)生成JavaScript對(duì)象,以便Web頁(yè)面能夠使用這些對(duì)象 來(lái)訪問(wèn)該服務(wù)。然后Web頁(yè)面只需接合到生成的JavaScript對(duì)象,就像它們是直接使用服務(wù)一樣;DWR無(wú)縫地處理所有有關(guān)Ajax和請(qǐng)求定位的瑣 碎細(xì)節(jié)。

      讓我們仔細(xì)分析一下示例代碼,弄清它是如何工作的。

    應(yīng)用程序細(xì)節(jié):DWR分析

      關(guān)于應(yīng)用程序,首先要注意的是,它是一個(gè)標(biāo)準(zhǔn)的Java應(yīng)用程序,使用分層架構(gòu)(Layered Architecture)設(shè)計(jì)模式。使用DWR通過(guò)JavaScript公開(kāi)一些服務(wù)并不影響您的設(shè)計(jì)。

      下面是一個(gè)簡(jiǎn)單的Java服務(wù),我們將使用DWR框架直接將其向JavaScript代碼公開(kāi):

    package com.tearesolutions.service;

    public interface AjaxSampleSvc {
    Article castVote(int rank);
    }

      這是一個(gè)被簡(jiǎn)化到幾乎不可能的程度的例子,其中只有一篇文章可以投票。該服務(wù)由Spring管理,它使用的bean名是ajaxSampleSvc,它的持久性需求則依賴于ArticleDao。詳情請(qǐng)參見(jiàn)applicationContext.xml。

      為了把該服務(wù)公開(kāi)為JavaScript對(duì)象,需要配置DWR,添加dwr.xml文件到WEB-INF目錄下:

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE dwr PUBLIC
    "-//GetAhead Limited//DTD Direct Web Remoting 0.4//EN"
    "http://www.getahead.ltd.uk/dwr/dwr.dtd">

    <dwr>
    <allow>
    <create creator="spring" javascript="ajaxSampleSvc">
    <param name="beanName" value="ajaxSampleSvc" />
    </create>
    <convert converter="bean" match="com.tearesolutions.model.Article"/>
    <exclude method="toString"/>
    <exclude method="setArticleDao"/>
    </allow>
    </dwr>

      dwr.xml文件告訴DWR哪些服務(wù)是要直接向JavaScript代碼公開(kāi)的。注意,已經(jīng)要求公開(kāi)Spring bean ajaxSampleSvc。DWR將自動(dòng)找到由應(yīng)用程序設(shè)置的SpringApplicationContext。為此,必須使用標(biāo)準(zhǔn)的servlet 過(guò)濾器ContextLoaderListener來(lái)初始化Spring ApplicationContext。

      DWR被設(shè)置為一個(gè)servlet,所以把它的定義添加到web.xml:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD
    Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">

    <web-app>
    <display-name>Ajax Examples</display-name>

    <listener>
    <listener-class>
    org.springframework.web.context.ContextLoaderListener
    </listener-class>
    </listener>

    <servlet>
    <servlet-name>ajax_sample</servlet-name>
    <servlet-class>com.tearesolutions.web.AjaxSampleServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet>
    <servlet-name>dwr-invoker</servlet-name>
    <display-name>DWR Servlet</display-name>
    <description>Direct Web Remoter Servlet</description>
    <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
    <init-param>
    <param-name>debug</param-name>
    <param-value>true</param-value>
    </init-param>
    </servlet>

    <servlet-mapping>
    <servlet-name>ajax_sample</servlet-name>
    <url-pattern>/ajax_sample</url-pattern>
    </servlet-mapping>

    <servlet-mapping>
    <servlet-name>dwr-invoker</servlet-name>
    <url-pattern>/dwr/*</url-pattern>
    </servlet-mapping>
    </web-app>

      做完這些之后,可以加載http://localhost:7001/ajax-demo/dwr,看看哪些服務(wù)可用。結(jié)果如下:

    圖3. 可用的服務(wù)

      單擊ajaxSampleSvc鏈接,查看有關(guān)如何在HTML頁(yè)面內(nèi)直接使用服務(wù)的示例實(shí)現(xiàn)。其中包含的兩個(gè)JavaScript文件完成了大部分的功能:
    <script type='text/javascript' 
    src='/ajax-demo/dwr/interface/ajaxSampleSvc.js'></script>
    <script type='text/javascript'
    src='/ajax-demo/dwr/engine.js'></script>

    ajaxSampleSvc.js是動(dòng)態(tài)生成的:

    function ajaxSampleSvc() { }

    ajaxSampleSvc.castVote = function(callback, p0)
    {
    DWREngine._execute(callback, '/ajax-demo/dwr',
    'ajaxSampleSvc', 'castVote', p0);
    }

      現(xiàn)在可以使用JavaScript對(duì)象ajaxSampleSvc替換所有的XmlHttpRequest代碼,從而重構(gòu)raw-ajax.html文件。可以在dwr-ajax.html文件中看到改動(dòng)的結(jié)果;下面是新的JavaScript函數(shù):

    function castVote(rank) {
    ajaxSampleSvc.castVote(processResponse, rank);
    }
    function processResponse(data) {
    var voteText = "

    Thanks for Voting!

    "
    + "

    Current ranking: " + data.voteAverage
    + " out of 5

    "
    + "

    Number of votes placed: "
    + data.numberOfVotes + "

    ";
    502 502'votes').innerHTML = voteText;
    }

      驚人地簡(jiǎn)單,不是嗎?由ajaxSampleSvc對(duì)象返回的Article域?qū)ο笮蛄谢癁橐粋€(gè)JavaScript對(duì)象,允許在它上面調(diào)用諸 如numberOfVotes()和voteAverage()之類的方法。在動(dòng)態(tài)生成并插入到DIV元素“votes”中的HTML代碼內(nèi)使用這些數(shù) 據(jù)。

    下一步工作

       在后續(xù)文章中,我將繼續(xù)有關(guān)Ajax的話題,涉及下面這些方面:

    • Ajax最佳實(shí)踐

      像許多技術(shù)一樣,Ajax是一把雙刃劍。對(duì)于一些用例,其應(yīng)用程序其實(shí)沒(méi)有必要使用Ajax,使用了反而有損可用性。我將介紹一些不適合使用的模式,突出說(shuō)明Ajax的一些消極方面,并展示一些有助于緩和這些消極方面的機(jī)制。例如,對(duì)Netflix電影瀏覽器來(lái)說(shuō),Ajax是合適的解決方案嗎?或者,如何提示用戶確實(shí)出了一些問(wèn)題,而再次單擊按鈕也無(wú)濟(jì)于事?

    • 管理跨請(qǐng)求的狀態(tài)

      在使用Ajax時(shí),最初的文檔DOM會(huì)發(fā)生一些變化,并且有大量的頁(yè)面狀態(tài)信息存儲(chǔ)在客戶端變量中。當(dāng)用戶跟蹤一個(gè)鏈接到應(yīng)用程序中的另一個(gè)頁(yè)面時(shí),狀態(tài)就丟失了。當(dāng)用戶按照慣例單擊Back按鈕時(shí),呈現(xiàn)給他們的是緩存中的初始頁(yè)面。這會(huì)使用戶感到非常迷惑!

    • 調(diào)試技巧

      使用JavaScript在客戶端執(zhí)行更多的工作時(shí),如果事情不按預(yù)期方式進(jìn)行,就需要一些調(diào)試工具來(lái)幫助弄清出現(xiàn)了什么問(wèn)題。

    結(jié)束語(yǔ)

      本文介紹了Ajax方法,并展示了如何使用它來(lái)創(chuàng)建一個(gè)動(dòng)態(tài)且響應(yīng)靈敏的Web應(yīng)用程序。通過(guò)使用DWR框架,可以輕松地把Ajax融合到站點(diǎn)中,而無(wú)需擔(dān)心所有必須執(zhí)行的實(shí)際管道工作。

      特別感謝Getahead IT咨詢公司的Joe Walker和他的團(tuán)隊(duì)開(kāi)發(fā)出DWR這樣神奇的工具。感謝你們與世界共享它!

    下載

      本文中演示的應(yīng)用程序源代碼可供下載:ajax-demo.war(1.52 MB)。

    參考資料

    原文出處

    An Introduction To Ajax

    http://dev2dev.bea.com/pub/a/2005/08/ajax_introduction.html

    posted on 2006-03-20 21:51 Vincent.Chen 閱讀(253) 評(píng)論(0)  編輯  收藏 所屬分類: AJAX

    主站蜘蛛池模板: 久久九九久精品国产免费直播| 全部免费a级毛片| 国产成人1024精品免费| 亚洲一区中文字幕在线电影网 | 国产成人精品日本亚洲网址 | 久久久久国色AV免费观看| 在线综合亚洲欧洲综合网站| 亚洲一区二区三区夜色| 在线观看国产区亚洲一区成人| 国产高清免费观看| 成人片黄网站A毛片免费| 2021精品国产品免费观看| 久久精品免费一区二区三区| 九九全国免费视频| 色网站在线免费观看| 亚洲国产AV无码一区二区三区| 亚洲国产中文在线视频| 久久亚洲私人国产精品vA| 亚洲AV午夜成人片| 亚洲精品夜夜夜妓女网| 亚洲五月综合缴情在线观看| 高清在线亚洲精品国产二区| 国产小视频免费观看| 国产青草视频免费观看97| 国产禁女女网站免费看| 日本高清免费中文字幕不卡| 噜噜嘿在线视频免费观看| 免费鲁丝片一级在线观看| 在线观看免费为成年视频| 午夜寂寞在线一级观看免费| 好男人看视频免费2019中文| 无码视频免费一区二三区| 天堂在线免费观看中文版| 韩国日本好看电影免费看| 日韩成人免费aa在线看| 免费国产成人高清视频网站| 免费成人av电影| 免费成人午夜视频| 亚洲无线码一区二区三区| 久久综合日韩亚洲精品色| 777亚洲精品乱码久久久久久|