茫茫網海中的冷日
         
茫茫網海中的冷日
發生過的事,不可能遺忘,只是想不起來而已!
 恭喜您是本站第 1484852 位訪客!  登入  | 註冊
主選單

Google 自訂搜尋

Goole 廣告

隨機相片
IMG_60D_00023.jpg

授權條款

使用者登入
使用者名稱:

密碼:


忘了密碼?

現在就註冊!

網頁設計 : [轉貼]Ajax簡介

發表者 討論內容
冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15758
[轉貼]Ajax簡介
Ajax簡介

  作為J2EE開發人員,我們似乎經常關注「後端機制(backend mechanics)」。我們通常會忘記,J2EE的主要成功之處在Web應用程序方面;許多原因使得人們喜歡利用Web開發應用程序,但主要還是因為其 易於部署的特點允許站點以儘可能低的成本擁有上百萬的用戶。遺憾的是,在過去幾年中,我們在後端投入了太多的時間,而在使我們的Web用戶界面對用戶自然 和響應靈敏方面卻投入不足。

  本文介紹一種方法,Ajax,使用它可以構建更為動態和響應更靈敏的Web應用程序。該方法的關鍵在於對瀏覽器端的JavaScript、 DHTML和與服務器異步通信的組合。本文也演示了啟用這種方法是多麼簡單:利用一個Ajax框架(指DWR)構造一個應用程序,它直接從瀏覽器與後端服 務進行通信。如果使用得當,這種強大的力量可以使應用程序更加自然和響應靈敏,從而提升用戶的瀏覽體驗。

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

簡介


  術語Ajax用來描述一組技術,它使瀏覽器可以為用戶提供更為自然的瀏覽體驗。在Ajax之前,Web站點強制用戶進入提交/等待/重新顯示範 例,用戶的動作總是與服務器的「思考時間」同步。Ajax提供與服務器異步通信的能力,從而使用戶從請求/響應的循環中解脫出來。借助於Ajax,可以在 用戶單擊按鈕時,使用JavaScript和DHTML立即更新UI,並向服務器發出異步請求,以執行更新或查詢數據庫。當請求返回時,就可以使用 JavaScript和CSS來相應地更新UI,而不是刷新整個頁面。最重要的是,用戶甚至不知道瀏覽器正在與服務器通信:Web站點看起來是即時響應 的。

  雖然Ajax所需的基礎架構已經出現了一段時間,但直到最近異步請求的真正威力才得到利用。能夠擁有一個響應極其靈敏的Web站點確實激動人 心,因為它最終允許開發人員和設計人員使用標準的HTML/CSS/JavaScript堆棧創建「桌面風格的(desktop-like)」可用性。

  通常,在J2EE中,開發人員過於關注服務和持久性層的開發,以至於用戶界面的可用性已經落後。在一個典型的J2EE開發週期中,常常會聽到這樣的話,「我們沒有可投入UI的時間」或「不能用HTML實現」。但是,以下Web站點證明,這些理由再也站不住腳了:

  所有這些Web站點都告訴我們,Web應用程序不必完全依賴於從服務器重新載入頁面來向用戶呈現更改。一切似乎就在瞬間發生。簡而言之,在涉及到用戶界面的響應靈敏度時,基準設得更高了。

定義Ajax

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

  Ajax不是一種技術。實際上,它由幾種蓬勃發展的技術以新的強大方式組合而成。Ajax包含:

  • 基於 XHTMLCSS 標準的表示;
  • 使用
    Document Object Model 進行動態顯示和交互;
  • 使用XMLHttpRequest與服務器進行異步通信;
  • 使用JavaScript綁定一切。

  這非常好,但為什麼要以Ajax命名呢?其實術語Ajax是由Jesse James Garrett創造的,他說它是「Asynchronous JavaScript + XML的簡寫」。

Ajax的工作原理

  Ajax的核心是JavaScript對象XmlHttpRequest。該對像在Internet Explorer 5中首次引入,它是一種支持異步請求的技術。簡而言之,XmlHttpRequest使您可以使用JavaScript向服務器提出請求並處理響應,而不 阻塞用戶。

  在創建Web站點時,在客戶端執行屏幕更新為用戶提供了很大的靈活性。下面是使用Ajax可以完成的功能:

  • 動態更新購物車的物品總數,無需用戶單擊Update並等待服務器重新發送整個頁面。
  • 提升站點的性
    能,這是通過減少從服務器下載的數據量而實現的。例如,在Amazon的購物車頁面,當更新籃子中的一項物品的數量時,會重新載入整個頁面,這必須下載32K的數據。如果使用Ajax計算新的總量,服務器只會返回新的總量值,因此所需的帶寬僅為原來的百分之一。
  • 消除了每次用戶輸入時的頁面刷新。例如,在Ajax中,如果用戶在分頁列表上單擊Next,則服務器數據只刷新列表而不是整個頁面。
  • 直接編輯表格數據,而不是要求用戶導航到新的頁面來編輯數據。對於Ajax,當用戶單擊Edit時,可以將靜態表格刷新為內容可編輯的表格。用戶單擊Done之後,就可以發出一個Ajax請求來更新服務器,並刷新表格,使其包含靜態、只讀的數據。

  一切皆有可能!但願它能夠激發您開始開發自己的基於Ajax的站點。然而,在開始之前,讓我們介紹一個現有的Web站點,它遵循傳統的提交/等待/重新顯示的範例,我們還將討論Ajax如何提升用戶體驗。

Ajax可用於那些場景?——一個例子:MSN Money頁面

  前幾天,在瀏覽MSN Money頁面的時候,有一篇 關於房地產投資的文章
引起了我的好奇心。我決定使用站點的「Rate this article」(評價本文)功能,鼓勵其他的用戶花一點時間來閱讀這篇文章。在我單擊vote按鈕並等待了一會兒之後,整個頁面被刷新,在原來投票問題所在的地方出現了一個漂亮的感謝畫面。

  而Ajax能夠使用戶的體驗更加愉快,它可以提供響應更加靈敏的UI,並消除頁面刷新所帶來的閃爍。目前,由於要刷新整個頁面,需要傳送大量的 數據,因為必須重新發送整個頁面。如果使用Ajax,服務器可以返回一個包含了感謝信息的500字節的消息,而不是發送26,813字節的消息來刷新整個 頁面。即使使用的是高速Internet,傳送26K和1/2K的差別也非常大。同樣重要的是,只需要刷新與投票相關的一小節,而不是刷新整個屏幕。

  讓我們利用Ajax實現自己的基本投票系統。

原始的Ajax:直接使用XmlHttpRequest

  如上所述,Ajax的核心是JavaScript對象XmlHttpRequest。下面的示例文章評價系統將帶您熟悉Ajax的底層基本知識:
http://tearesolutions.com/ajax-demo/raw-ajax.html 。註:如果您已經在本地WebLogic容器中安裝了 ajax-demo.war ,可以導航到 http://localhost:7001/ajax-demo/raw-ajax.html

  瀏覽應用程序,參與投票,並親眼看它如何運轉。熟悉了該應用程序之後,繼續閱讀,進一步了解其工作原理細節。

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

  該函數為您想要與之通信的服務器資源創建一個URL並調用內部函數executeXhr,提供一個回調JavaScript函數,一旦服務器響 應可用,該函數就被執行。由於我希望它運行在一個簡單的Apache環境中,「cast vote URL」只是一個簡單的HTML頁面。在實際情況中,被調用的URL將記錄票數並動態地呈現包含投票總數的響應。

  下一步是發出一個XmlHttpRequest請求:
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();
}
}
}

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

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


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

  第一行定義了JavaScript回調函數,您希望一旦響應就緒它就自動執行,而req.open()方法中所指定的「true」標誌說明您想要異步執行該請求。

  一旦服務器處理完XmlHttpRequest並返回給瀏覽器,使用req.onreadystatechange指派所設置的回調方法將被自動調用。
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);
}
}
}

  該代碼相當簡潔,並且使用了幾個幻數,這使得難以一下子看出發生了什麼。為了弄清楚這一點,下面的表格(引用自 http://developer.apple.com/internet/webcontent/xmlhttpreq.html )列舉了常用的XmlHttpRequest對象屬性。

屬性

描述

onreadystatechange

每次狀態改變所觸發事件的事件處理程序

readyState

對象狀態值:

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


responseText

從服務器進程返回的數據的字符串形式

responseXML

從服務器進程返回的DOM兼容的文檔數據對象

status

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

statusText

伴隨狀態碼的字符串信息

  現在processVoteResponse()函數開始顯示出其意義了。它首先檢查XmlHttpRequest的整體狀態以保證它已經完成 (readyStatus == 4),然後根據服務器的設定詢問請求狀態。如果一切正常(status == 200),就使用innerHTML屬性重寫DOM的「votes」節點的內容。

  既然您親眼看到了XmlHttpRequest對像是如何工作的,就讓我們利用一個旨在簡化JavaScript與Java應用程序之間的異步通信的框架來對具體的細節進行抽象。

Ajax: DWR方式


  按照與文章評價系統相同的流程,我們將使用Direct Web Remoting(DWR)框架實現同樣的功能。

  假定文章和投票結果存儲在一個數據庫中,使用某種對象/關係映射技術來完成抽取工作。為了部署起來儘可能地簡單,我們不會使用數據庫進行持久性 存儲。此外,為使應用程序儘可能通用,也不使用Web框架。相反,應用程序將從一個靜態HTML文件開始,可以認為它由服務器動態地呈現。除了這些簡化措 施,應用程序還應該使用Spring Framework關聯一切,以便輕鬆看出如何在一個「真實的」應用程序中使用DWR。

  現在應該下載示例應用程序並熟悉它。該應用程序被壓縮為標準的WAR文件,因此您可以把它放置到任何一個Web容器中——無需進行配置。部署完畢之後,就可以導航到 http://localhost:7001/ajax_demo/dwr-ajax.html 來運行程序。

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

引入DWR

  如同在「原始的Ajax」一節所演示的那樣,直接使用XmlHttpRequest創建異步請求非常麻煩。不僅JavaScript代碼冗長,而且必須考慮服務器端為定位Ajax請求到適當的服務所需做的工作,並將結果封送到瀏覽器。

  設計DWR的目的是要處理將Web頁面安裝到後端服務上所需的所有信息管道。它是一個Java框架,可以很輕鬆地將它插入到Web應用程序中, 以便JavaScript代碼可以調用服務器上的服務。它甚至直接與Spring Framework集成,從而允許用戶直接向Web客戶機公開bean。

  DWR真正的巧妙之處是,在用戶配置了要向客戶機公開的服務之後,它使用反射來生成JavaScript對象,以便Web頁面能夠使用這些對象 來訪問該服務。然後Web頁面只需接合到生成的JavaScript對象,就像它們是直接使用服務一樣;DWR無縫地處理所有有關Ajax和請求定位的瑣 碎細節。

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


應用程序細節:DWR分析

  關於應用程序,首先要注意的是,它是一個標準的Java應用程序,使用分層架構(Layered Architecture)設計模式。使用DWR通過JavaScript公開一些服務並不影響您的設計。

  下面是一個簡單的Java服務,我們將使用DWR框架直接將其向JavaScript代碼公開:


package com.tearesolutions.service;
public interface AjaxSampleSvc {
Article castVote(int rank);
}

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

  為了把該服務公開為JavaScript對象,需要配置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哪些服務是要直接向JavaScript代碼公開的。注意,已經要求公開Spring bean ajaxSampleSvc。DWR將自動找到由應用程序設置的SpringApplicationContext。為此,必須使用標準的servlet 過濾器ContextLoaderListener來初始化Spring ApplicationContext。

  DWR被設置為一個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 ,看看哪些服務可用。結果如下:

圖3. 可用的服務

  單擊ajaxSampleSvc鏈接,查看有關如何在HTML頁面內直接使用服務的示例實現。其中包含的兩個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是動態生成的:


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

  現在可以使用JavaScript對象ajaxSampleSvc替換所有的XmlHttpRequest代碼,從而重構raw-ajax.html文件。可以在dwr-ajax.html文件中看到改動的結果;下面是新的JavaScript函數:


function castVote(rank) {
ajaxSampleSvc.castVote(processResponse, rank);
}
function processResponse(data) {
var voteText = "<p><strong>Thanks for Voting!</strong></p>"
+ "<p>Current ranking: " + data.voteAverage
+ " out of 5</p>"
+ "<p>Number of votes placed: "
+ data.numberOfVotes + "</p>";
502 502'votes').innerHTML = voteText;
}

  驚人地簡單,不是嗎?由ajaxSampleSvc對象返回的Article域對象序列化為一個JavaScript對象,允許在它上面調用諸 如numberOfVotes()和voteAverage()之類的方法。在動態生成並插入到DIV元素「votes」中的HTML代碼內使用這些數 據。

下一步工作

   在後續文章中,我將繼續有關Ajax的話題,涉及下面這些方面:

  • Ajax最佳實踐

  像許多技術一樣,Ajax是一把雙刃劍。對於一些用例,其應用程序其實沒有必要使用Ajax,使用了反而有損可用性。我將介紹一些不適合使用的模式,突出說明Ajax的一些消極方面,並展示一些有助於緩和這些消極方面的機制。例如,對 Netflix電影瀏覽器 來說,Ajax是合適的解決方案嗎?或者,如何提示用戶確實出了一些問題,而再次單擊按鈕也無濟於事?

  • 管理跨請求的狀態

  在使用Ajax時,最初的文檔DOM會發生一些變化,並且有大量的頁面狀態信息存儲在客戶端變量中。當用戶跟蹤一個鏈接到應用程序中的另一個頁面時,狀態就丟失了。當用戶按照慣例單擊Back按鈕時,呈現給他們的是緩存中的初始頁面。這會使用戶感到非常迷惑!


  • 調試技巧

  使用JavaScript在客戶端執行更多的工作時,如果事情不按預期方式進行,就需要一些調試工具來幫助弄清出現了什麼問題。

結束語

  本文介紹了Ajax方法,並展示了如何使用它來創建一個動態且響應靈敏的Web應用程序。通過使用DWR框架,可以輕鬆地把Ajax融合到站點中,而無需擔心所有必須執行的實際管道工作。

  特別感謝Getahead IT諮詢公司的Joe Walker和他的團隊開發出DWR這樣神奇的工具。感謝你們與世界共享它!

下載

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

參考資料

原文出處

An Introduction To Ajax

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

冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15758
[轉貼]AJAX的七宗罪
AJAX的七宗罪

引子

2005.2.18,Jesse James Garrett 的一篇A New Approach to Web Applications引出了AJAX這個web界的新名詞。加上新寵兒在降生下來就和足球名隊阿賈克斯、Google Suggest Google Maps這些大腕息息相關,不想出名都難啊。但似乎人們給與AJAX的期望有點太高了,甚至有人提出了用AJAX取代Java Applet和Flash。不知Flickr是不是也聽到這種呼聲才把自己的Flash UI轉向了普通的Javascript。AJAX是個偉大的東西,它是在不創造新技術的前提下誕生的一個標準,憑這一點就能招來大批的狂熱追隨者, AJAX看起來更像是楊過和小龍女練得玉女素心劍一樣,分開來沒有什麼破壞力,但是二者合一就威力無比。

罪之一:對搜索引擎的支持不好

這其實更像一個大大的諷刺,AJAX的鼻祖是Google,但卻對Google自己支持最不 好了,GMail主界面除過Top和Bottom外沒有一個鏈接就是最形象的諷刺了。雖然Mail本身是個私人的應用系統,但這個無鏈接的設計界面恰恰給 AJAX開了個壞頭。Flash也有同樣有這個毛病。沒有鏈接的web就像森林中迷路的羔羊,這句看似廣告語,其實是web設計的根本原則。

罪之二:編寫複雜、容易出錯

javascript本是是個輕量級的小東西,現在被強迫重用起來,負擔可想而知。 javascript對OOP的支持很少,這就限制了javascript代碼的可重用可封裝等等,從Google Mpa還是其他一些應用中能看到的都是無數的<script src="..."></script>這樣的文件包含,這些除了讓程序員頭昏的更快點,一點好處都沒有。更可怕的是在 javascript中竟然沒有一款順手的Debug軟件,很多寫js的老手到今天還是用最原始的alert("")來調試,splinetech JavaScript HTML Debugger 算是一個看起來還像個樣子的調試器吧,可惜不是免費的,幾十大刀讓我這種窮人只能望而生嘆了。

罪之三:冗餘代碼更多了

和上面說的差不多,層層包含js文件是AJAX的通病,再加上以往的很多服務端代碼現在放到了客戶端,所以每次打開一個頁面會包含很多的無用的js文件也一同下載下來。雖然寬帶越來越普及,但是減少代碼冗餘還是每個web設計者的必修課。

罪之四:破壞了Web的原有標準


什麼叫破壞web標準?這就是破壞了web標準。好好的A標籤放著不用,偏要用span。這種例子很多,flickr中的標題單擊後可以更改,這雖然(也包括我)是大家一致叫好覺得方便的設計,但同時這也是歧義了web元素本身的含義,物是人非這個詞不知道用的合不合適?

罪之五:缺少一個沒有標準之爭、沒有back和history的瀏覽器

哈哈,這句話語有點諷刺意義。現在的瀏覽器市場,不管是IE還是FireFox還是 Opera等等。瀏覽器和瀏覽器之間的差異一直都是web設計者心中永遠的痛,支持的css不一樣,支持的客戶端腳本不一樣,有的竟然連客戶端腳本的用法 都有不同。這讓程序員非常苦惱,最明顯的就是調用xmlhttprequest了,req=(window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");這段創建xmlhttp對象的代碼就是為了適應IE和非IE兩天陣營的瀏覽器的 經典例子。說是沒有back和沒有history的瀏覽器,這也是一個諷刺,主要是指在AJAX下點擊鏈接是不Redirect頁面,所以不存在後退和前 進了,同樣,沒有後退和前進也就無存找瀏覽歷史紀錄了。back和history存在的根本就是url的改變,在AJAX下人們發現不改url也同樣能達
到內容改變這個酷酷的特點,何樂而不為呢?look http://www.dux2005.org/http://www.zagodesign.com/ ,我承認這兩個站確實做得非常棒,但除了酷酷的感覺外,毫無用處。

罪之六:XML只是用來打幌子

xml從誕生那天起就被一致看好,大有非xml不娶之勢,我想Jesse James Garrett也是為了趨於流行才把xml強行加入ajax的吧。xml有一個致命的缺點,那就是加載的資源耗費,這好像是所有平台下xml的通病。 google map雖然是Jesse James Garrett推薦的AJAX的品牌代言人,但是gmap並沒有用xml,而是用了原生的javascript數組,我自己在用AJAX從服務端傳回數據 時也從來不用XML,因為它讓我更繁瑣讓系統更慢。服務端首先要調用xml對要傳輸的數據進行封裝,客戶端得到數據後再調用xml進行解析,簡直是畫蛇添 足。AJAX的一個重要特點是要身法輕盈,數據的傳輸儘量單一和簡陋,如果確實需要傳輸大量複雜的數據,也應該通過多次調用傳回。

罪之七:世界這麼大卻找不到自己的家


AJAX適用於什麼?能幹什麼?能帶來什麼?在網站上用AJAX那是笑話,除非像 Google Map和Flickr這樣的專業領域的網站外,普通網站根本沒必要用這個技術;在龐大的企業應用市場估計還能有AJAX的一點容身之地,不過在MS、 SUN不會看著AJAX這個野孩子來在他們的地盤上撒潑的,如果大家都用AJAX,那java給誰賣?.net給誰賣?所以AJAX在企業應用也不是長久 之地。所以,AJAX現在找不到自己合適的位置是個很大的尷尬。疑病亂投醫,最近把AJAX的矛頭指向Flash和Applet就是一個例子。

當然,我也不是要把AJAX扁的一無是處,我本人就非常喜歡這門技術,它能讓web設計者的眼球更加寬廣,讓一些大膽的設計成為現實,但是我也會很冷靜的小心翼翼的利用這個利器,利器雖好,一不留神刺傷的是自己。

PS:這篇文章是昨晚寫的,今早卻神奇般的從網上看見了一篇文章Ajax: 99% Bad,文章是針對2000年那片著名的Flash: 99% Bad 寫的,其中的觀點和我所說的七宗罪中的幾宗相似。

冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15758
[轉貼]駁「AJAX 的七宗罪」
駁「AJAX 的七宗罪」

(AJA X的七宗罪: http://tech.163.com/05/1009/18/1VL1PAP300091589.html

我不帶任何主觀色彩來評一下這個所謂的 「AJAX 的七宗罪」。

1、連帶著 Flash 和 Ajax 一塊罵了。

引用: 沒有鏈接的web就像森林中迷路的羔羊,這句看似廣告語,其實是web設計的根本原則。

這句「原則」至少我並不知道,因此看起來不過就是一句廣告語而已。我的原則是 Web 應用首先需要對於最終用戶友好,然後才需要考慮對於搜索引擎友好。你使用 HTML FORM 提交的數據也是沒有鏈接的,這些數據可以被搜索引擎搜索到嗎?換句話說,可以添加在鏈接 URL 中的只有通過 GET 方法發送的請求。搜索引擎難道連使用 POST 方法提交的 FORM 數據都能搜索到嗎?如果搜索引擎能搜索到這些數據,搜索引擎搜索到同樣通過 HTTP 協議以明文形式發送的 XML 數據難道是很困難的事情嗎?


必須要考慮對於搜索引擎友好的應用也是有限的。你以為 Google 真的沒有辦法解決這些問題嗎?太小看 Google 了吧?

2、這個作者顯然很少做 JavaScirpt 開發,以至於說出這樣沒有調查的話來:

引用: 更可怕的是在javascript中竟然沒有一款順手的Debug軟 件,很多寫js的老手到今天還是用最原始的alert("")來調試,splinetech JavaScript HTML Debugger 算是一個看起來還像個樣子的調試器吧,可惜不是免費的,幾十大刀讓我這種窮人只能望而生嘆了。

M$ Visual InterDev、Office 2003 中帶的 Script Debugger 都是非常好用的調試工具。如果不願意花錢買這些工具,還可以使用 Mozilla 開發的 Venkman,調試功能已經非常完善了。說 JS 沒有很好的 IDE 是實情,說 JS 沒有很好的調試工具簡直是天大的笑話。

3、

引用: 和上面說的差不多,層層包含js文件是AJAX的通病,再加上以往的很多服務端代碼現在放到了客戶端,所以每次打開一個頁面會包含很多的無用的js文件也一同下載下來。雖然寬帶越來越普及,但是減少代碼冗餘還是每個web設計者的必修課。


完全是沒有調查的胡說,如果通過不同的文件對於 JS 代碼進行了認真的組織,將 JS 函數分到很多小文件中,一個頁面僅僅只需要加載它自己使用到的 JS 文件,何來冗餘代碼之說?

4、 引用: 什麼叫破壞web標準?

<span onclick="location.href="/detail/";">點擊查看全部</a>
,這就是破壞了web標準。好好的A 標籤放著不用,偏要用span。這種例子很多,flickr中的標題單擊後可以更改,這雖然(也包括我)是大家一致叫好覺得方便的設計,但同時這也是歧義 了 web元素本身的含義,物是人非這個詞不知道用的合不合適?

這僅僅是一個具體應用中的用法,居然也歸到了 Ajax 頭上,真是欲加之罪,何患無詞。這裡如果簡單地將 span 換成 a 難道不是很容易的事情嗎?如果使用 a 就不能使用 onclick 了嗎?按照作者的想法,似乎所有的 a 都應該只能是簡單鏈接,不能加上 onclick,加上 onclick 就變成了 Ajax,就觸犯了天條,破壞了 Web 標準。況且給 span 加上一個 onclick 居然就上綱上線到破壞 Web 標準的層次,我研究 Web 標準這麼多年,也沒有看出究竟破壞了哪一款哪一條的 Web 標準。Web 標準中什麼地方規定只允許使用 a,不允許使用 span
來實現了?況且在最新的 XHTML 1.2 標準中,a 已經變成了一個不推薦使用的標記。什麼是 Web 標準,什麼是破壞 Web 標準?回去翻翻書吧。

5、

引用: 瀏覽器和瀏覽器之間的差異一直都是web設計者心中永遠的痛,支持的 css不一樣,支持的客戶端腳本不一樣,有的竟然連客戶端腳本的用法都有不同。這讓程序員非常苦惱,最明顯的就是調用xmlhttprequest了, req=(window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");這段創建xmlhttp對象的代碼就是為了適應IE和非IE兩天陣營的瀏覽器的 經典例子。說是沒有back和沒有history的瀏覽器,這也是一個諷刺,主要是指在AJAX下點擊鏈接是不Redirect頁面,所以不存在後退和前 進了,同樣,沒有後退和前進也就無存找瀏覽歷史紀錄了。back和history存在的根本就是url的改變,在AJAX下人們發現不改url也同樣能達 到內容改變這個酷酷的特點,何樂而不為呢?

我提到過多次《網站重構》,這本書要解決什麼問題?femto 開始讀了嗎?曾經產生過讀這本書的慾望嗎?


創建 XMLHTTP 對象的不同語法只是一個非常小的問題,這是在 XMLHTTP 沒有被完全標準化之前的暫時問題。現在基於 Web 標準做開發,必須要寫針對不同瀏覽器的代碼片斷的場合已經非常少了,封裝這些差異的 JS 庫網上也已經有很多了。

無法利用 back/history 的問題在 Google Maps 中是使用 IFrame 來解決的,這個問題我在 BEA User Group 的演講中已經說過了。

6

引用: xml有一個致命的缺點,那就是加載的資源耗費,這好像是所有平台下 xml的通病。google map雖然是Jesse James Garrett推薦的AJAX的品牌代言人,但是gmap並沒有用xml,而是用了原生的javascript數組,我自己在用AJAX從服務端傳回數據 時也從來不用 XML,因為它讓我更繁瑣讓系統更慢。服務端首先要調用xml對要傳輸的數據進行封裝,客戶端得到數據後再調用xml進行解析,簡直是畫蛇添足。

致命嗎?我做了這麼多瀏覽器端的 XML 開發,為什麼至今沒有感受到?Google Maps 服務器端傳給客戶端的數據就是不折不扣的 XML,其它的開發人員還可以對這個 XML 進行定製加入自己的數據。Google Maps 還在客戶端幾個功能上使用了 XSLT。說 Google Maps 沒有使用 XML,要不要我把我親自整理過的 Google Maps
客戶端的代碼發給你你才能閉嘴?

7、

引用: AJAX適用於什麼?能幹什麼?能帶來什麼?在網站上用AJAX那是笑 話,除非像Google Map和Flickr這樣的專業領域的網站外,普通網站根本沒必要用這個技術;在龐大的企業應用市場估計還能有AJAX的一點容身之地,不過在MS、 SUN不會看著AJAX這個野孩子來在他們的地盤上撒潑的,如果大家都用AJAX,那java給誰賣?.net給誰賣?所以AJAX在企業應用也不是長久 之地。所以,AJAX現在找不到自己合適的位置是個很大的尷尬。疑病亂投醫,最近把AJAX的矛頭指向Flash和Applet就是一個例子。

又是一番奇談怪論。說大公司不會使用 Ajax 完全是主觀臆測。事實上,大量使用客戶端 JS 的大公司包括以下這些:

Macromedia:在 Dreamweaver 產品中包括了大量的 JS 代碼。

Oracle:很多產品都使用了 JS,目前對於 Ajax 很感興趣。這個消息是我在深圳 Oracle 做開發的一個朋友親口告訴我的。

SAP:早在很多年以前,SAP 就在其產品中大量使用了 JS+XMLHTTP 的技術,僅僅是 SAP 沒有炒做這個概念而已。說 Ajax 不適合企業應用,SAP 是靠做什麼吃飯的?

Google:我已經不需要再說什麼了。

冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15758
[轉貼]AJAX在Wiki的說明

AJAX 全稱為「Asynchronous JavaScript and XML」(非同步 JavaScriptXML ),是一種創建互動式網頁應用的 網頁開發 技術。根據Ajax提出者Jesse James Garrett建議 [1] ,它:

  • 使用 XHTML + CSS 來表示信息;
  • 使用 JavaScript 操作
    DOM (Document Object Model)進行動態顯示及交互;
  • 使用 XMLXSLT 進行數據交換及相關操作;
  • 使用 XMLHttpRequest 對象與Web伺服器進行非同步數據交換;
  • 使用JavaScript將所有的東西綁定在一起。
  • 使用 SOAPXML 的格式來傳送方法名和方法參數。

類似於DHTML或LAMP,AJAX不是指一種單一的技術,而是有機地利用了一系列相關的技術。事實上,一些基於AJAX的「派生/合成」式(derivative/composite)的技術正在出現,如「AFLAX」。

AJAX的應用使用支持以上技術的Web
瀏覽器 作為運行平臺。這些瀏覽器目前包括: Internet ExplorerMozillaFirefoxOperaKonqueror 及Mac OS的 Safari 。但是 Opera 不支持
XSL格式對象 ,也不支持 XSLT [2]

與傳統的Web應用比較

傳統的Web應用允許用戶端填寫表單(form),當提交表單時就向Web伺服器發送一個請求。伺服器接收並處理傳來的表單,然後送回一個新的網頁,但這個做法浪費了許多頻寬,因為在前後兩個頁面中的大部分HTML代碼往往是相同的。由於每次應用的交互都需要向伺服器發送請求,應用的響應時間就依賴於伺服器的響應(回應)時間。這導致了用戶界面的響應(回應)比本地應用慢得多。

與此不同,AJAX應用可以僅向伺服器發送並取回必需的數據,它使用 SOAP 或其它一些基於XML的頁面服務介面(介面),並在客戶端採用JavaScript處理來自伺服器的響應(回應)。因為在伺服器(伺服器)和瀏覽器之間交換的數據大量減少(大約只有原來的5%),結果我們就能看到響應(伺服器回應)更快的應用(結果)。同時很多的處理工作可以在發出請求的客戶端機器上完成,所以Web伺服器(伺服器)的處理時間也減少了。

發展史

該技術在1998年前後得到了應用。允許客戶端腳本發送HTTP請求(
XMLHTTP )的第一個組件由Outlook Web Access小組寫成。該組件原屬於微軟Exchange Server,並且迅速地成為了Internet Explorer 4.0 [3] 的一部分。部分觀察家認為,Outlook Web Access是第一個應用了Ajax技術的成功的商業應用程序,並成為包括Oddpost的網路郵件產品在內的許多產品的領頭羊。但是, 2005年 初,許多事件使得Ajax被大眾所接受。 Google 在它著名的交互應用程序中使用了非同步通訊,如 Google討論組Google地圖
Google搜索建議Gmail 等。Ajax這個詞由《 Ajax: A New Approach to Web Applications 》一文所創,該文的迅速流傳提高了人們使用該項技術的意識。另外,對Mozilla/Gecko的支持使得該技術走向成熟,變得更為易用。

優點和批評

使用Ajax的最大優點,就是能在不更新整個頁面的前提下維護數據。這使得Web應用程序更為迅捷地回應用戶動作,並避免了在網路上發送那些沒有改變過的信息。

Ajax不需要任何瀏覽器外掛程式,但需要用戶允許JavaScript在瀏覽器上執行。就像DHTML應用程序那樣,Ajax應用程序必須在眾多不同的瀏覽器和平臺上經過嚴格的測試。隨著Ajax的成熟,一些簡化Ajax使用方法的程序庫也相繼問世。同樣,也出現了另一種輔助程序設計的技術,為那些不支持JavaScript的用戶提供替代功能。

對應用Ajax最主要的批評就是,它可能破壞瀏覽器後退按鈕的正常行為
[4] 。在動態更新頁面的情況下,用戶無法回到前一個頁面狀態,這是因為瀏覽器僅能記下歷史記錄中的靜態頁面。一個被完整讀入的頁面與一個已經被動態修改過的頁面之間的差別非常微妙;用戶通常都希望單擊後退按鈕,就能夠取消他們的前一次操作,但是在Ajax應用程序中,卻無法這樣做。不過開發者已想出了種種辦法來解決這個問題,當中大多數都是在用戶單擊後退按鈕訪問歷史記錄時,通過建立或使用一個隱藏的IFRAME來重現頁面上的變更。(例如,當用戶在Google Maps中單擊後退時,它在一個隱藏的 IFRAME 中進行搜索,然後將搜索結果反映到Ajax元素上,以便將應用程序狀態恢復到當時的狀態。)

一個相關的觀點認為,使用動態頁面更新使得用戶難於將某個特定的狀態保存到收藏夾中。該問題的解決方案也已出現,大部分都使用 URL 片斷標識符(通常被稱為錨點,即URL中#後面的部分)來保持跟蹤,允許用戶回到指定的某個應用程序狀態。(許多瀏覽器允許JavaScript動態更新錨點,這使得Ajax應用程序能夠在更新顯示內容的同時更新錨點。)這些解決方案也同時解決了許多關於不支持後退按鈕的爭論。

進行Ajax開發時,網路延遲——即用戶發出請求到伺服器發出響應之間的間隔——需要慎重考慮。不給予用戶明確的回應 [5] ,沒有恰當的預讀數據
[6]
,或者對XMLHttpRequest的不恰當處理 [7] ,都會使用戶感到延遲,這是用戶不欲看到的,也是他們無法理解的 [8] 。通常的解決方案是,使用一個可視化的組件來告訴用戶系統正在進行後臺操作並且正在讀取數據和內容。

  • 一些手持設備(如手機、PDA等)現在還不能很好的支持Ajax;
  • 用JavaScript作的Ajax引擎,JavaScript的兼容性和DeBug都是讓人頭痛的事;
  • Ajax的無刷新重載,由於頁面的變化沒有刷新重載那麼明顯,所以容易給用戶帶來困擾――用戶不太清楚現在的數據是新的還是已經更新過的;現有的解決有:在相關位置提示、數據更新的區域設計得比較明顯、數據更新後給用戶提示等;
  • 對串流媒體的支持沒有FLASH、Java Applet好;

核心

Ajax的核心是 JavaScript 對象 XmlHttpRequest。該對象在Internet Explorer 5中首次引入,它是一種支持非同步請求的技術。簡而言之,XmlHttpRequest使您可以使用JavaScript向伺服器提出請求並處理響應,而不阻塞用戶。 對象創建示例:


<script type="text/javascript">
var xmlHttp = new XMLHttpRequest();
</script>

瀏覽器兼容性問題

JavaScript編程的最大問題來自不同的瀏覽器對各種技術和標準的支持。

XmlHttpRequest對象在不同瀏覽器中不同的創建方法:


xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0");
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");
xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp_request = new XMLHttpRequest();

開發Ajax應用面臨的挑戰及解決方案

對程式設計師而言,開發Ajax應用最頭痛的問題莫過於以下幾點:

  1. Ajax在本質上是一個瀏覽器端的技術,首先面臨無可避免的第一個問題即是瀏覽器的兼容性問題。各家瀏覽器對於 JavaScript / DOM / CSS 的支持總有部分不太相同或是有Bug,甚至同一瀏覽器的各個版本間對於JavaScript/DOM/CSS的支持也有可能部分不一樣。這導致程式設計師在寫Ajax應用時花大部分的時間在 調試 瀏覽器的兼容性而非在應用程序本身。因此,目前大部分的Ajax連結庫或開發框架大多以js連結庫的形式存在,以定義更高階的JavaScript API 、JavaScript對象(模板)、或者JavaScript Widgets來解決此問題。如prototype.js。

  2. Ajax技術之主要目的在於局部交換客戶端及伺服器間之數據。如同傳統之主從架構,無可避免的會有部分的業務邏輯會實現在客戶端,或部分在客戶端部分在伺服器。由於業務邏輯可能分散在客戶端及伺服器,且以不同之程序語言實現,這導致Ajax應用程序極難維護。如有使用者介面或業務邏輯之更動需求,再加上前一個JavaScript/DOM/CSS之兼容性問題,Ajax應用往往變成程式設計師的夢靨。針對業務邏輯分散的問題,Ajax開發框架大致可分為兩類:
    • 將業務邏輯及表現層放在瀏覽器,數據層放在伺服器:因為所有的程序以JavaScript執行在客戶端,只有需要數據時才向伺服器要求服務,此法又稱為胖客戶端(fat client)架構。伺服器在此架構下通常僅用於提供及儲存數據。此法的好處在於程式設計師可以充分利用JavaScript搭配業務邏輯來做出特殊的使用者介面,以符合終端使用者的要求。但是問題也不少,主因在第一,JavaScript語言本身之能力可能不足以處理複雜的業務邏輯。第二,JavaScript的執行效能一向不好。第三,JavaScript存取伺服器數據,仍需適當的伺服器端程序之配合。第四,瀏覽器兼容性的問題又出現。有些Ajax開發框架如DWR企圖以自動生成JavaScript之方式來避免兼容的問題,並開立通道使得JavaScript可以直接叫用伺服器端的Java程序來簡化數據的存取。但是前述第一及第二兩個問題仍然存在,程式設計師必須費相當的力氣才能達到應用程序之規格要求,或可能根本無法達到要求。

    • 將表現層、業務邏輯、及數據層放在伺服器,瀏覽器僅有使用者介面引擎(User Interface engine);此法又稱為瘦客戶端(thin client)架構,或中心伺服器(server-centric)架構。瀏覽器的使用者介面引擎僅用於反映伺服器的表現層以及傳達使用者的輸入回到伺服器的表現層。由瀏覽器所觸發之事件亦送回伺服器處理,根據業務邏輯來更新表現層,然後反映回瀏覽器。因為所有應用程序完全在伺服器執行,數據及表現層皆可直接存取,程式設計師只需使用伺服器端相對較成熟之程序語言(如Java語言)即可,不需再學習JavaScript/DOM/CSS,在開發應用程序時相對容易。缺點在於使用者介面引擎以及表現層通常以標準組件的形式存在,如需要特殊組件(使用者介面)時,往往須待原框架之開發者提供,緩不濟急。如開源碼Ajax開發框架 ZK 目前支持XUL及XHTML組件,尚無XAML之支持。
  3. Ajax是以非同步的方式向伺服器提交需求。對伺服器而言,其與傳統的提交窗體需求並無不同,而且由於是以非同步之方式提交,如果同時有多個Ajax需求及窗體提交需求,將無法保證哪一個需求先獲得伺服器的響應。這會造成應用程序典型的多程序(process)或多執行緒(thread)的競爭(racing)問題。程式設計師因此必須自行處理或在JavaScript裡面動手腳以避免這類競爭問題的發生(如Ajax需求未響應之前,先disable送出按鈕),這又不必要的增加了程式設計師的負擔。目前已知有自動處理此問題之開發框架似乎只有 ZK

參考資料


  1. ^ (英文) Ajax: 網頁應用程式的新方法 — Jesse James Garrett,最近存取日2007年11月7日
  2. ^ (英文) Opera 9 支援的網頁規格 — XSLT, XPath, and XSL-FO 部分論及不支持 XSL-FO 與 XSLT,最近存取日2007年11月7日
  3. ^
    (英文) 微軟 XML Parser (MSXML) 版本列表 ,最近存取日2007年11月7日
  4. ^ (英文) Web設計10大錯誤(1999年) — Jakob Nielsen 著
  5. ^
    (英文)
    Remote Scripting with AJAX, Part 2
  6. ^ (英文) 延遲必死:預讀資料以降低延遲 — JonathanBoutelle.com
  7. ^ (英文)
    不可靠網路下的非同步要求 — Harry Fuecks 著,2005年2月
  8. ^ (英文) 小朋友們聽著, AJAX 不怎麼酷 — Marcus Baker 著,2005年6月3日

外部連接

工具

  • ASP.NET AJAX Extension (開發階段時代號 Atlas),
    微軟 AJAX工具箱。
  • Dojo工具箱, AJAX/DHTML工具箱。
  • Prototype, 開放原始碼框架。
  • [Buffalo] Web Remoting (based on prototype)
  • [openrico] JS UI component (based on prototype)
  • PHPRPC, 開放原始碼多語言支持的跨平臺的安全的 Web 遠程過程調用框架,讓 Ajax 編程更容易。
  • Sajax, 簡單AJAX工具箱
  • Rialto, Rich Internet AppLication TOolkit.

  • ZK, 開放原始碼AJAX/XUL框架, JAVA 專用。
  • MochiKit 一個不自稱AJAX的輕量級js庫,支持 Json
  • OpenLaszlo 原本專注在 Flash 作為表現層的 Laszlo 將方向轉至AJAX。

  • script.aculo.usRuby on Rails 量身打造的AJAX函式庫,跨平臺支援。
  • Rico 知名的開源碼的AJAX函式庫,跨平臺支援。
  • Xajax 知名的開源碼開發AJAX用PHP函式庫。
  • DWR Web Remoting
  • qooxdoo JS UI component (C/S Style)
  • jsLINB 完全OOP,帶有執行緒模擬的ajax RIA框架。

  • Yahoo! UI Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX.
  • jQuery 用於簡化AJAX開發的Javascript庫

門戶

圖書

  • 《Ajax基礎教程》, Foundations Of Ajax 中文版,人民郵電出版社圖靈公司出版。 ISBN 7-115-14481-8
  • 《Ajax實戰》, Ajax in Action 中文版,人民郵電出版社圖靈公司出版。
    ISBN 7-115-14717-5
  • 《Head Rush Ajax》O'Reilly出版社
  • 《Ajax 實戰手冊》碁峰 ISBN 9861810366
  • 《Ajax技術手冊》碁峰 ISBN 9861810196
  • 《Professional Ajax, 2 edition》Wrox (March 12, 2007) ISBN 0470109491

其他資源

冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15758
[轉貼]AJAX讓桌面網路應用蔚為風潮
AJAX讓桌面網路應用蔚為風潮

Martin LaMonica.唐慧文譯  2005/12/12

更靈巧的程式開發技術興起,特別是打造互動式瀏覽器應用程式的AJAX大受歡迎,正為消費者應用程式搬上全球資訊網(Web)的風潮推波助瀾。

受此鼓舞,昔日曾被視為不切實際的構想--例如打造線上版的微軟Office替代品--如今紛紛捲土重來。

Google Maps這類網路服務(Web services)的推出,讓使用者感受到顯然比傳統網站優良的使用經驗,也協助打開AJAX的知名度。現在已有數十家新創公司運用AJAX打造網路版的桌上型電腦應用程式,從文書處理器到專案管理軟體,不一而足。

但這些網路應用程式(有時被稱作Web 2.0)不只是在網路上複製微軟Office而已,許多程式聚焦於在網際網路上出版並分享資訊。


AJAX運用JavaScript程式語言及其他Web標準。分析師與創業家說,基本的AJAX技術創始於1990年代,但直到最近--大概在今年2月AJAX一詞誕生後--才引起眾多開發人員與創業家注意到AJAX帶來的新商機。

今年Google採用AJAX,有助於展示網路應用程式的外觀和感覺可媲美桌上型電腦應用程式。網頁瀏覽器廣泛採納網路標準,也說服開發人員相信,AJAX應用程式可在大多數的PC上執行。

Burton Group分析師Richard Monson-Haefel說:「AJAX今年初推出後,許多公司如雨後春筍般在各地成立。這些新創公司大有可為,他們擁有聰明的程式開發人員,能夠利用AJAX,而且不被某些工具軟體商套牢。」

以Macromedia Flash和Flex等多媒體工具打造的互動式網頁已存在多年,這些所謂的豐富(rich)網路應用程式工具仍會繼續支援複雜的任務。相形之下,Monson-Haefel指出,AJAX適用於比較單純的任務,例如在既有的網站上增添互動性。

有能力打造出更好的網站後,以廣告費或會員訂費收入支撐的主機代管服務(hosted services)應運而生。這與傳統桌上型電腦軟體的銷售模式大異其趣;傳統上,消費者必須預先付一筆費用,才能把軟體安裝到單機上使用。


現在,連桌上型電腦軟體業的霸主微軟公司也急起直追,積極進軍網路應用程式服務市場。

微軟已經以軟體服務為中心,把旗下的事業部門重新編組,並在11月推出Live.com服務,包括源自MSN部門的諸多服務,例如Hotmail(未來將更名為Windows Live Mail)。這些服務大多倚賴重新以AJAX翻新後的前端(front end)設計。

AJAX Office?

AJAX的使用率日益普及--加上微軟擁抱網路軟體服務--促使眾人揣測未來線上版的微軟Office替代品可能問世。線上版的生產力應用程式早已有業者提供,但他們現在要做的是把網路通訊(Web-based communication)也納入其中,成為全套服務不可或缺的一環。

例如,Upstartle公司的Writely.com已是線上版的文書處理器。但該系統更大的價值在於讓使用者輕易共同製作並分享網頁。

Upstartle共同創辦人Sam Schillace說:「我們剛推出的四、五個月內,眾人都說我們瘋了。他們說:誰會想用瀏覽器編輯文件?但現在,你看到微軟和Google也跟進。所以,短短六個月內,這已從瘋狂的點子變成想當然爾的共識。」

Google決定指派一部分員工專門投入OpenOffice開放原始碼計畫,已引起外界揣測Google未來會不會提供網路版的生產力套餐軟體服務。


至於微軟,則尚未宣布提供完整線上版Office的計畫。軟體巨人上個月表示,醞釀推出新軟體服務,稱為Office Live,協助小公司追蹤客戶交易或管理聯絡事務。但新服務只會補充Office,不會取而代之。微軟說,Office Live將推出廣告贊助版和會員付費版。

另一家提供線上版Office式應用軟體的是新創公司Silveroffice,產品稱為gOffice。該公司的網站提供文書處理與列印軟體,並計劃不久後推出線上試算表與簡報軟體。創辦人兼執行長Kevin Warnock透露,該公司計劃明年元月推出把文件轉化為Adobe Systems PDF格式的服務。

gOffice應用程式免費提供,以廣告收入支撐。Warnock說,該公司有意對不希望廣告干擾的顧客(特別是企業用戶)提供會員制服務。目前的註冊用戶總數達「五位數字」,但該公司希望能增加到200萬,其中許多可望是美國境外的用戶。

然而,Silveroffice公司的目標並不是取代微軟Office。

Warnock說:「我認為,(gOffice)可以自然而然地與Office套餐軟體長期並存,兩者不必拚得你死我活。」他指出,即使許多PC裡預先安裝微軟的Outlook軟體,使用者仍然在用網頁郵件系統,例如Hotmail或GMail。


他說,採用AJAX與線上供應的模式,讓他員工僅15人的新創公司能自力更生。他說:「 這真的是一種務實的方法,不必籌措資金就能接觸到廣大的民眾。」

企業與消費者

不論是Writely、gOffice、其他架構在全球資訊網上的生產力應用軟體(例如37 Signals的待辦事項與個人資料管理工具) ,或網路版的即時傳訊(IM)應用程式,都以消費者為主要服務對象。但IT主管與分析師說,AJAX式的瀏覽器程式開發方興未艾,就連企業界也將感受到其衝擊。

企業可運用AJAX,為現有的企業網站增添更豐富的互動功能,也可運用以可延伸標示語言(XML)編寫的資料轉移(data transfers)指令來製造大雜膾(mash-up),從各種不同的來源擷取資料。Monson-Haefel舉例說,不動產網站可從學校抓取資料,然後與登錄的房屋物件並列。

電子郵件與行事曆軟體公司Zimbra的技術長Scott Dietzen預期,AJAX可望大大地影響企業對企業(business-to-business )的應用程式。例如,金融服務業和電信業的顧客會要求功能更豐富的使用者介面。Zimbra以企業為導向的產品密集採用AJAX作資料交換,比方說可在行事曆的某一項裡顯示在Google Maps呈現出的開會地點。


企業用戶Iconix Pharmaceuticals用AJAX與General Interface(後來被整合軟體供應商Tibco併購)的工具搭配使用,打造出一種應用程式,讓製藥公司的技術人員能使用龐大的資料庫,以及功能先進的前端系統,用來追蹤人體實驗的藥效。

使用AJAX,讓Iconix得以打造一種複雜的使用者介面,並與多重的資料來源連結。該公司資訊部副總裁Alan Roter說,產品架構在全球資訊網上即可透過網際網路提供,不然就得預先安裝。

他說:「假如不用架構在網路上的UI(使用者介面),我們就得用某種厚重型用戶端,並設置某種主從介面(client-server interface)以及所有必須的配套。架構在全球資訊網上的優點在於無須安裝。那很棒。」

Roter說,Tibco的AJAX工具很靈巧,有助於加速程式開發時間,比用其他語言更快。不過,分析師認為,AJAX工具的成熟度大致而言仍遜於根基穩固的產品。

Monson-Haefel說,目前商用AJAX工具的市場生態系仍未臻成熟。他預期,有朝一日, AJAX終究會成為一種主流的開發技術,就像Adobe旗下的Macromedia工具或微軟的工具。


但Writely的Schillace預測,AJAX日益受歡迎,會造成網頁的互動功能過量。的確,一些企業主管與分析師已開始擔心過度運用AJAX技術可能引起的副作用--網頁徒具高度的互動性,先天上卻設計不良。

Zimbra的Dietzen表示,AJAX不是萬靈丹,諸如複雜的試算表或簡報軟體等應用程式,仍需要用到桌上型電腦的儲存空間。他說:「AJAX的確能需要它的傳統網路應用增色不少,但不是所有的網路應用都需要更豐富的使用者介面。對於適用的網路應用,AJAX顯然是最佳選擇。」

冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15758
[分享] Ajax程序設計入門
一、使用Ajax的主要原因 1、通過適當的Ajax應用達到更好的用戶體驗; 2、把以前的一些服務器負擔的工作轉嫁到客戶端,利於客戶端閒置的處理能力來處理,減輕服務器和帶寬的負擔,從而達到節約ISP的空間及帶寬租用成本的目的。
二、 引用 Ajax這個概念的最早提出者Jesse James Garrett認為:Ajax是Asynchronous JavaScript and XML的縮寫。 Ajax並不是一門新的語言或技術,它實際上是幾項技術按一定的方式組合在一在同共的協作中發揮各自的作用,它包括: ‧使用XHTML和CSS標準化呈現; ‧使用DOM實現動態顯示和交互; ‧使用XML和 XSLT進行數據交換與處理; ‧使用XMLHttpRequest進行 異步數據讀取; ‧最後用 JavaScript綁定和處理所有數據; Ajax的工作原理相當於在用戶和服務器之間加了—箇中間層,使用戶操作與服務器響應異步化。並不是所有的用戶請求都提交給服務器,像—些數據驗證和數據處理等都交給Ajax引擎自己來做,只有確定需要從服務器讀取新數據時再由Ajax引擎代為向服務器提交請求。 圖2-1
圖2-2
三、概述 雖然Garrent列出了7條Ajax的構成技術,但個人認為,所謂的Ajax其核心只有JavaScript、 XMLHTTPRequest和DOM,如果所用數據格式為XML的話,還可以再加上XML這一項(Ajax從服務器端返回的數據可以是XML格式,也可以是文本等其他格式)。 在舊的交互方式中,由用戶觸發一個HTTP請求到服務器,服務器對其進行處理後再返回一個新的HTHL頁到客戶 端,每當服務器處理客戶端提交的請求時,客戶都只能空閒等待,並且哪怕只是一次很小的交互、只需從服務器端得到很簡單的一個數據,都要返回一個完整的HTML頁,而用戶每次都要浪費時間和帶寬去重新讀取整個頁面。 而使用Ajax後用戶從感覺上幾乎所有的操作都會很快響應沒有頁面重載(白屏)的等待。
1、XMLHTTPRequest Ajax的一個最大的特點是無需刷新頁面便可向服務器傳輸或讀寫數據(又稱無刷新更新頁面),這一特點主要得益於XMLHTTP組件XMLHTTPRequest對象。這樣就可以向再發桌面應用程序只同服務器進行數據層面的交換,而不用每次都刷新界面也不用每次將數據處理的工作提交給服務器來做,這樣即減輕了服務器的負擔又加快了響應速度、縮短了用戶等候時間。 最早應用XMLHTTP的是微軟,IE(IE5以上)通過允許開發人員在Web頁面內部使用XMLHTTP ActiveX組件擴展自身的功能,開發人員可以不用從當前的Web頁面導航而直接傳輸數據到服務器上或者從服務器取數據。這個功能是很重要的,因為它幫 助減少了無狀態連接的痛苦,它還可以排除下載冗餘HTML的需要,從而提高進程的速度。Mozilla(Mozilla1.0以上及NetScape7以 上)做出的回應是創建它自己的繼承XML代理類:XMLHttpRequest類。Konqueror (和Safari v1.2,同樣也是基於KHTML的瀏覽器)也支持XMLHttpRequest對象,而Opera也將在其v7.6x+以後的版本中支持 XMLHttpRequest對象。對於大多數情況,XMLHttpRequest對象和XMLHTTP組件很相似,方法和屬性也類似,只是有一小部分屬性不支持。 XMLHttpRequest的應用: ‧XMLHttpRequest對像在JS中的應用
var xmlhttp = new XMLHttpRequest();

‧微軟的XMLHTTP組件在JS中的應用
 
var xmlhttp = new ActiveXObject(Microsoft.XMLHTTP); 
var xmlhttp = new ActiveXObject(Msxml2.XMLHTTP);

XMLHttpRequest 對象方法
 
/** * Cross-browser XMLHttpRequest instantiation. */

 if (typeof XMLHttpRequest == ’undefined’) { 
  XMLHttpRequest = function () { 
    var msxmls = [’MSXML3’, ’MSXML2’, ’Microsoft’] 
    for (var i=0; i < msxmls.length; i++) { 
      try { 
        return new ActiveXObject(msxmls[i]+’.XMLHTTP’) 
      } catch (e) 
      { } 
      throw new Error("No XML component installed!") 
    } 
  } 
  function createXMLHttpRequest() { 
    try { 
      // Attempt to create it "the Mozilla way" 
      if (window.XMLHttpRequest) { 
        return new XMLHttpRequest(); 
      } 
      // Guess not - now the IE way 
      if (window.ActiveXObject) { 
        return new ActiveXObject(getXMLPrefix() + ".XmlHttp"); 
      } 
    } catch (ex) {} 
    return false; 
  }; 

XMLHttpRequest 對象方法
方法 描述
abort() 停止當前請求
getAllResponseHeaders() 作為字符串返問完整的headers
getResponseHeader("headerLabel") 作為字符串返問單個的header標籤
open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) 設置未決的請求的目標 URL, 方法, 和其他參數
send(content) 發送請求
setRequestHeader("label", "value") 設置header並和請求一起發送
XMLHttpRequest 對象屬性
屬性 描述
onreadystatechange 狀態改變的事件觸發器
readyState 對象狀態(integer): 0 = 未初始化 1 = 讀取中 2 = 已讀取 3 = 交互中 4 = 完成
responseText 服務器進程返回數據的文本版本
responseXML
服務器進程返回數據的兼容DOM的XML文檔對象
status 服務器返回的狀態碼, 如:404 = "文件末找到" 、200 ="成功"
statusText 服務器返回的狀態文本信息
2、JavaScript JavaScript是一在瀏覽器中大量使用的編程語言,,他以前一直被貶低為一門糟糕的語言(他確實在使用上比 較枯燥),以在常被用來作一些用來炫耀的小玩意和惡作劇或是單調瑣碎的表單驗證。但事實是,他是一門真正的編程語言,有著自已的標準並在各種瀏覽器中被廣泛支持。 3、DOM Document Object Model。 DOM是給 HTML 和 XML 文件使用的一組 API。它提供了文件的結構表述,讓你可以改變其中的內容及可見物。其本質是建立網頁與 Script 或程序語言溝通的橋樑。 所有WEB開發人員可操作及建立文件的屬性、方法及事件都以對象來展現(例如,document 就代表「文件本身「這個對像,table 對象則代表 HTML 的表格對象等等)。這些對象可以由當今大多數的瀏覽器以 Script 來取用。 一個用HTML或XHTML構建的網頁也可以看作是一組結構化的數據,這些數據被封在DOM(Document Object Model)中,DOM提供了網頁中各個對象的讀寫的支持。 4、XML 可擴展的標記語言(Extensible Markup Language)具有一種開放的、可擴展的、可自描述的語言結構,它已經成為網上數據和文檔傳輸的標準。它是用來描述數據結構的一種語言,就正如他的名字一樣。他使對某些結構化數據的定義更加容易,並且可以通過他和其他應用程序交換數據。 5、綜合 Jesse James Garrett提到的Ajax引擎,實際上是一個比較複雜的JavaScript應用程序,用來處理用戶請求,讀寫服務器和更改DOM內容。 JavaScript的Ajax引擎讀取信息,並且互動地重寫DOM,這使網頁能無縫化重構,也就是在頁面已經下 載完畢後改變頁面內容,這是我們一直在通過JavaScript和DOM在廣泛使用的方法,但要使網頁真正動態起來,不僅要內部的互動,還需要從外部獲取數據,在以前,我們是讓用戶來輸入數據並通過DOM來改變網頁內容的,但現在,XMLHTTPRequest,可以讓我們在不重載頁面的情況下讀寫服務器上的數據,使用戶的輸入達到最少。 基於XML的網絡通訊也並不是新事物,實際上FLASH和JAVA Applet都有不錯的表現,現在這種富交互在網頁上也可用了,基於標準化的並被廣泛支持和技術,並且不需要插件或下載小程序。 Ajax是傳統WEB應用程序的一個轉變。以前是服務器每次生成HTML頁面並返回給客戶端(瀏覽器)。在大多數 網站中,很多頁面中至少90%都是一樣的,比如:結構、格式、頁頭、頁尾、廣告等,所不同的只是一小部分的內容,但每次服務器都會生成所有的頁面再返回給 客戶端,這無形之中是一種浪費,不管是對於用戶的時間、帶寬、CPU耗用,還是對於ISP的高價租用的帶寬和空間來說。如果按一頁來算,只能幾K或是幾十 K可能並不起眼,但像SINA每天要生成幾百萬個頁面的大ISP來說,可以說是損失巨大的。而AJAX可以所為客戶端和服務器的中間層,來處理客戶端的請求,並根據需要向服務器端發送請求,用什麼就取什麼、用多少就取多少,就不會有數據的冗餘和浪費,減少了數據下載總量,而且更新頁面時不用重載全部內容, 只更新需要更新的那部分即可,相對於純後台處理並重載的方式縮短了用戶等待時間,也把對資源的浪費降到最低,基於標準化的並被廣泛支持和技術,並且不需要插件或下載小程序,所以Ajax對於用戶和ISP來說是雙盈的。 Ajax使WEB中的界面與應用分離(也可以說是數據與呈現分離),而在以前兩者是沒有清晰的界限的,數據與呈現 分離的分離,有利於分工合作、減少非技術人員對頁面的修改造成的WEB應用程序錯誤、提高效率、也更加適用於現在的發布系統。也可以把以前的一些服務器負擔的工作轉嫁到客戶端,利於客戶端閒置的處理能力來處理。
四、應用 Ajax理念的出現,揭開了無刷新更新頁面時代的序幕,並有代替傳統web開發中採用form(表單)遞交方式更新web頁面的趨勢,可以算是一個里程碑。但Ajax都不是適用於所有地方的,它的適用範圍是由它的特性所決定的。 舉個應用的例子,是關於級聯菜單方面的Ajax應用。 我們以前的對級聯菜單的處理是這樣的: 為了避免每次對菜單的操作引起的重載頁面,不採用每次調用後台的方式,而是一次性將級聯菜單的所有數據全部讀取出 來並寫入數組,然後根據用戶的操作用JavaScript來控制它的子集項目的呈現,這樣雖然解決了操作響應速度、不重載頁面以及避免向服務器頻繁發送請 求的問題,但是如果用戶不對菜單進行操作或只對菜單中的一部分進行操作的話,那讀取的數據中的一部分就會成為冗餘數據而浪費用戶的資源,特別是在菜單結構複雜、數據量大的情況下(比如菜單有很多級、每一級菜又有上百個項目),這種弊端就更為突出。 如果在此案中應用Ajax後,結果就會有所改觀: 在初始化頁面時我們只讀出它的第一級的所有數據並顯示,在用戶操作一級菜單其中一項時,會通過Ajax向後台請求 當前一級項目所屬的二級子菜單的所有數據,如果再繼續請求已經呈現的二級菜單中的一項時,再向後面請求所操作二級菜單項對應的所有三級菜單的所有數據,以此類推……這樣,用什麼就取什麼、用多少就取多少,就不會有數據的冗餘和浪費,減少了數據下載總量,而且更新頁面時不用重載全部內容,只更新需要更新的那部分即可,相對於後台處理並重載的方式縮短了用戶等待時間,也把對資源的浪費降到最低。 此外,Ajax由於可以調用外部數據,也可以實現數據聚合的功能(當然要有相應授權),比如微軟剛剛在3月15日發布的在線RSS閱讀器BETA版;還可以利於一些開放的數據,開發自已的一些應用程序,比如用Amazon的數據作的一些新穎的圖書搜索應用。 總之,Ajax適用於交互較多,頻繁讀數據,數據分類良好的WEB應用。
五、Ajax的優勢
1、減輕服務器的負擔。因為Ajax的根本理念是「按需取數據」,所以最大可能在減少了冗餘請求和響影對服務器造成的負擔; 2、無刷新更新頁面,減少用戶實際和心理等待時間; 首先,「按需取數據」的模式減少了數據的實際讀取量,打個很形象的比方,如果說重載的方式是從一個終點回到原點再到另一個終點的話,那麼Ajax就是以一個終點為基點到達另一個終點; 圖5-1 圖5-2 其次,即使要讀取比較大的數據,也不用像RELOAD一樣出現白屏的情況,由於Ajax是用XMLHTTP發送請求得到服務端應答數據,在不重 新載入整個頁面的情況下用Javascript操作DOM最終更新頁面的,所以在讀取數據的過程中,用戶所面對的也不是白屏,而是原來的頁面狀態(或者可 以加一個LOADING的提示框讓用戶了解數據讀取的狀態),只有當接收到全部數據後才更新相應部分的內容,而這種更新也是瞬間的,用戶幾乎感覺不到。總 之用戶是很敏感的,他們能感覺到你對他們的體貼,雖然不太可能立竿見影的效果,但會在用戶的心中一點一滴的積累他們對網站的依賴。 3、更好的用戶體驗; 4、也可以把以前的一些服務器負擔的工作轉嫁到客戶端,利於客戶端閒置的處理能力來處理,減輕服務器和帶寬的負擔,節約空間和帶寬租用成本; 5、Ajax由於可以調用外部數據; 6、基於標準化的並被廣泛支持和技術,並且不需要插件或下載小程序; 7、Ajax使WEB中的界面與應用分離(也可以說是數據與呈現分離); 8、對於用戶和ISP來說是雙盈的。
六、Ajax的問題
1、一些手持設備(如手機、PDA等)現在還不能很好的支持Ajax; 2、用JavaScript作的Ajax引擎,JavaScript的兼容性和DeBug都是讓人頭痛的事; 3、Ajax的無刷新重載,由於頁面的變化沒有刷新重載那麼明顯,所以容易給用戶帶來困擾──用戶不太清楚現在的數據是新的還是已經更新過的;現有的解決有:在相關位置提示、數據更新的區域設計得比較明顯、數據更新後給用戶提示等; 4、對流媒體的支持沒有FLASH、Java Applet好;
七、結束語 更好的Ajax應用,需要更多的客戶端的開發,和對當前的WEB應用理念的思考,而且良好的用戶體驗,來源於為處處用戶考慮的理念,而不單純是某種技術。
冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15758
[轉貼]利用AJAX技術開發應用程序實戰
AJAX,一個異步JavaScript和XML的縮略詞,是當今快速發展的Web開發界十分熱門的技術。在這項新技術提供巨大能力的同時,它也燃發了在"Back"按鈕問題上的不容置疑的爭論。本文作者將向你解釋怎樣在真實世界中使用AJAX以及怎樣在一個工程中評估它的價值。在你讀完本文後,你就會明白什麼是AJAX,在什麼情況下,為什麼以及怎樣使用這項技術。
一、 簡介
AJAX,一個異步JavaScript和XML的縮略詞,是最近出來的技術詞語。異步意味著你可以經由超文本傳輸協議(HTTP)向一個服務器發出請求並且在等待該響應時繼續處理另外的數據。這就意味著,例如,你可以調用一個服務器端腳本來從一個數據庫中以XML 方式檢索數據,把數據發送到存儲在一個數據庫的服務器腳本,或者簡單地裝載一個XML文件以填充你的Web站點而不需刷新該頁面。然而,在這項新技術提供巨大能力的同時,它也引起了在"Back"按鈕問題上的很多爭論。本文將幫助你確定在真實世界中何時使用AJAX是最佳選擇。
首先,我假定你對縮略詞JavaScript和XML部分有一個基本了解。儘管你能通過AJAX請求任何類型的文本文件,但是我在此主要集中討論XML。我將解釋怎樣在真實世界中使用AJAX以及怎樣在一個工程中評估它的價值。在你讀完本文後,你將會明白什麼是AJAX,在什麼情況下,為什麼以及怎樣使用這項技術。你將要學習,在保持給用戶提供直觀體驗的同時怎樣創建對象,發出請求以及定製響應。
我已創建了一個適合於本文的示例工程(你可以下載源代碼)。這個示例實現了一個簡單的請求-它裝載一個包含頁面內容的XML文件並且分析數據以把它顯示在一個HTML頁面中。
二、 常規屬性和方法
表1和2提供了一個屬性和方法的概述-它們為Windows Internet Explorer 5,Mozilla,Netscape 7,Safari 1.2,和Opera等瀏覽器所支持。
表1屬性
屬性 描述
onreadystatechange 當請求對象變化時該事件處理器激活。
readyState 返回指示對象的當前狀態的值。
responseText 來自服務器的響應串的版本。
responseXML 來自服務器的響應的DOM兼容的文檔對象。
status 來自服務器的響應的狀態碼。
statusText 以一個字符串形式返回的狀態消息。

表2方法
方法 描述
Abort() 取消當前HTTP請求。
getAllResponseHeaders() 檢索所有的HTTP頭值。
getResponseHeader("headerLabel") 從響應體中檢索一個HTTP頭部的值。
open("method","URL"[,asyncFlag[,"userName"[,"password"]]]) 初始化一個MSXML2.XMLHTTP請求,並從該請求指定方法,URL和認證信息。
send(content) 發送一個HTTP請求到服務器並接收響應。
setRequestHeader("label", "value") 指定一個HTTP頭的名字。

三、 從哪裡開始
首先,你需要創建XML文件-後面我們對之進行請求並作為頁面內容進行分析。你正在請求的文件必須與目標工程駐留在相同的服務器上。
下一步,創建發出請求的HTML文件。當頁面通過使用頁面主體中的onload方法進行加載時,該請求發生。接著,該文件需要一個有ID的div標籤,這樣當我們準備好要顯示內容時就可以對之進行定位。當你做完所有這些,你的頁面的主體看上去如下:
<body onload="makeRequest('xml/content.xml');">
<div id="copy"></div>
</body>

四、 創建請求對象
為了創建請求對象,你必須檢查是否瀏覽器使用XMLHttpRequest或ActiveXObject。這兩個對象之間的主要區別在於使用它們的瀏覽器。Windows IE 5 及以上版本使用ActiveX對象;而Mozilla,Netscape 7,Opera和Safari 1.2及以上版本使用XMLHttpRequest對象。另外一個區別是你創建對象的方式:Opera,Mozilla,Netscape和Safari 允許你簡單地調用該對象的構造器,但是Windows IE需要把對象的名字傳遞到ActiveX構造器中。下面是怎樣創建代碼來決定要使用哪個對象和怎樣創建它的示例:
if(window.XMLHttpRequest)
{ request = new XMLHttpRequest();}
else if(window.ActiveXObject)
{ request = new ActiveXObject("MSXML2.XMLHTTP");}

五、 發出請求
現在既然你已經創建了你的請求對象,那麼你已經為向服務器發出請求作了準備。創建一個到事件處理器的參考以聽取 onreadystatechange事件。然後,該事件處理器方法將在狀態發生變化時作出響應。一旦我們完成請求,我們就開始創建這個方法。打開連接以 GET或POST一個定製的URL-在此是一個content.xml,並且設置一個布爾定義-是否你想要進行異步調用。
現在到了發出請求的時間了。在這個示例中,我使用了null,因為我們使用的是GET;為了使用POST,你需要使用下面這個方法發出一個查詢串:
request.onreadystatechange = onResponse;
request.open("GET". url, true);
request.send(null);

六、 定製加載和錯誤處理消息
你為onreadystatechange方法創建的事件處理器正是集中進行加載和處理錯誤的場所。現在到了考慮用戶並針對他們與之交互的內容的狀態提供反饋的時候了。在這個實例中,我針對所有的裝載狀態代碼提供反饋,並且也對最經常發生的錯誤處理狀態代碼提供一些基本的反饋。為了顯示請求對象的當前狀態,readyState屬性包括顯示在下表中的一些值。
描述
0 未初始化,對象沒有用數據進行初始化。
1 裝載中,對象正在裝載它的數據。
2 裝載結束,對象完成了它的數據的裝載。
3 可交互,用戶能與對象交互了,儘管它還沒有裝載結束。
4 完成,對象已經完全被初始化。

W3C中有很長的一串有關HTTP狀態代碼的定義。我選擇了兩個狀態代碼:
‧200:請求成功了。
‧404:服務器沒有找到與所請求的文件相匹配的任何東西。
最後,我檢查任何另外的狀況代碼-它們將生成一個錯誤並提供一個一般錯誤信息。下面是一個代碼示例-你可以用之來處理這些情況。注意,我在定位我們前面在HTML文件的主體中創建的div ID並且對它應用裝載和/或錯誤信息-通過innerHTML方法-這個方法用於設置在div對象的開始和結束標籤之間的HTML:
if(obj.readyState == 0)
{ document.getElementById('copy').innerHTML = "Sending Request...";}
if(obj.readyState == 1)
{ document.getElementById('copy').innerHTML = "Loading Response...";}
if(obj.readyState == 2)
{ document.getElementById('copy').innerHTML = "Response Loaded...";}
if(obj.readyState == 3)
{ document.getElementById('copy').innerHTML = "Response Ready...";}
if(obj.readyState == 4){
if(obj.status == 200){ return true; }
else if(obj.status == 404)
{
// 添?#91;一個定製消息或把用戶重定向到另外一個頁面
document.getElementById('copy').innerHTML = "File not found";
}
else
{document.getElementById('copy').innerHTML = "There was a problem retrieving the XML."; }
}

當狀況代碼為200時,這意味著請求成功。下面開始進行響應了。
七、 分析響應
當你準備好分析來自請求對象的響應時,真正的工作開始了。現在你可以用你請求的數據開始工作。僅為測試目的,在開發期間,可以使用 responseText和responseXML屬性來顯示來自響應的原始數據。為了存取XML響應中的結點,首先使用你創建的請求對象,定位到 responseXML屬性以檢索(你可能已經猜測出來)來自響應的XML。定位到documentElement-它檢索一個到XML響應的根結點的參考。
var response = request.responseXML.documentElement;

現在既然你有了到響應的根結點的參考,那麼你可以使用getElementsByTagName()以結點名字來檢索childNodes。下面一行用一個頭部的nodeName來定位一個childNode:
response.getElementsByTagName('header')[0].firstChild.data;

使用firstChild.data可以允許你存取該元素中的文本:
response.getElementsByTagName('header')[0].firstChild.data;

下面是怎樣創建這些代碼的完整的例子:
var response = request.responseXML.documentElement;
var header = response.getElementsByTagName('header')[0].firstChild.data;
document.getElementById('copy').innerHTML = header;

八、 需求分析
現在既然你知道怎樣使用AJAX的基礎知識,那麼下一步就是決定是否在一工程使用它。須記住的最重要的事情是,在你還沒有刷新頁面時你無法使用 "Back"按鈕。為此,可以先專注於你的工程中的一小部分-它能夠從使用這種類型的交互中受益。例如,你可以創建一個表單-它在用戶每次輸入一個輸入字段或一個字母時查詢一個腳本以便進行實時校驗。你可以創建一個拖放頁面-在釋放一項時,它能夠把數據發送到一個腳本中並把該頁面的狀態保存到一個數據庫中。使用AJAX的理由毫無疑問是存在的;並且這種使用無論對開發者還是用戶都會帶來益處;這全依賴於具體的條件和執行情況。
還有其它方法可用來解決"Back"按鈕的問題,例如使用Google Gmail-它現在能夠為你的操作提供一種撤消功能而不刷新該頁面。以後還會出現許多更具創造性的例子-它們將通過提供給開發者創建獨特實時的體驗的手段給用戶帶來更大的好處。
九、 結論
儘管AJAX允許我們構建新的和改進的方式來與一個WEB頁面進行交互;但是作為開發者,我們需要牢記產品是不考慮技術的;它關心的是用戶以及其如何與用戶進行交互。沒有了用戶群,我們構建的工程毫無用處。基於這個標準,我們就能評估應該使用什麼技術以及何時使用它們來創建對相應用戶有用的應用軟件。
冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15758
[轉貼]爪哇教室 >> 配合 JAVA 技術使用 AJAX
爪哇教室 >> 配合 JAVA 技術使用 AJAX

AJAX 為 Asynchronous JavaScript and XML 的縮寫。基本上,AJAX 是 Web 應用程式操縱使用者與 Web 網頁之間互動的高效率方式;此方式減少每一次使用者互動所需進行的頁面重新整理及整頁重新載入。因而實現使用瀏覽器來呈現更好的表現方式 (類似於桌面應用程式或外掛 (plugin) 式 Web 應用程式的表現方式)。AJAX 互動係在背景以非同步方式操縱。在此過程中,使用者可以繼續使用頁面。Web 網頁中的 JavaScript 起始 AJAX 互動。當 AJAX 互動完成時,JavaScript 更新頁面的 HTML 來源。變更係立即進行,且不需要進行頁面重新整理。例如,AJAX 互動的用途為:使用伺服器端邏輯來驗證表單項目 (當使用者正在輸入表單項目時);從伺服器擷取詳細資料;動態更新頁面上的資料;以及提交頁面中的局部表單。

特別引人注目的事項在於,AJAX 應用程式不需要分開的外掛程式 (plug-in),並且係平台及瀏覽器中立的程式。即,較舊版瀏覽器也不支援 AJAX。所以,在撰寫用戶端指令檔過程中,必須謹慎考量到瀏覽器之間的差異。

您可考慮使用摘要瀏覽器差異的 JavaScript 程式庫,並且在某些情況下,使用替代互動技術來支援較舊版的瀏覽器。若需詳細資訊,請參閱「AJAX FAQ for the Java Developer」(
http://weblogs.java.net/blog/gmurray71/ )。


■ 何處適合使用 Java 技術?
==============================

Java 技術與 AJAX 適當地一起運作。Java 技術處理伺服器端的 AJAX 互動。可以利用 servlet、JavaServer Pages (JSP) 技術、JavaServer Faces (JSF) 技術及 web 服務來處理 AJAX 互動。

處置 AJAX 要求的程式撰寫模型 (Programming Model) 所使用的 API 與傳統 Web 應用程式所使用的 API 相同。可以使用 JSF 技術來建立可重複使用的元件,這些可重複使用的元件產生用戶端 JavaScript 及相對應的伺服器端 AJAX 處理程式碼。接下來介紹使用 AJAX 及 servlet 的範例。


■ Autocomplete (自動填寫) 範例
==============================


請想像使用者可搜尋員工資訊的 Web 網頁。頁面包括使用者可輸入員工姓名的欄位。在這個範例中,項目欄位具有自動填寫功能。換言之,使用者可輸入員工姓名的某部分,並且 Web 應用程式列出以所輸入之字元開頭的員工名字或姓氏,藉以嘗試填寫該員工姓名。自動填寫功能省去使用者記得員工的全名,或省去在另一頁面上查看姓名。

在搜尋欄位中實作自動填寫,就是 AJAX 的用途之一。如果您要這樣做,必須在用戶端及伺服器上提供程式碼。


在用戶端上

首先,使用者指定瀏覽器所載入的頁面 URL。在這個範例中,假設頁面是 JSF 產生的 HTML 頁面、servlet 或 JSP 頁面。

頁面包括表單文字欄位,此欄位具有含 JavaScript 函式 doCompletion() 名稱的 onkeyup 屬性 (Attribute)。每次在表單文字欄位中按下按鍵時呼叫此函式。


                <input type="text"
                   size="20"
                   autocomplete="off"
                   id="complete-field"
                        name="id"
                   onkeyup="doCompletion();">
            



假設使用者在表單文字欄位中輸入「M」字元。回應動作為,呼叫 doCompletion() 函式,接著此函式初始化 XMLHttpRequest 物件:


                function initRequest(url) {
                  if (window.XMLHttpRequest) {
                    return new XMLHttpRequest();
                  } else if (window.ActiveXObject) {
                    isIE = true;
                    return new ActiveXObject("Microsoft.XMLHTTP");
                  }
                }
              
                function doCompletion() {
                  if (completeField.value == "") {
                    clearTable();
                  } else {
                    var url = "autocomplete?action=complete&id=" + 
                        escape(completeField.value);
                    var req = initRequest(url);
                    req.onreadystatechange = function() {
                      if (req.readyState == 4) {
                        if (req.status == 200) {
                          parseMessages(req.responseXML);
                        } else if (req.status == 204){
                          clearTable();
                        }
                      }
                    };
                    req.open("GET", url, true);
                    req.send(null);
                  }
                }
            



目前,XMLHttpRequest 物件不屬於標準 JavaScript 部分 (正致力於其標準化),但是事實上是標準且是 AJAX 的心臟。此物件負責透過 HTTP 與伺服器端元件 (在此情況下是servlet) 互動。

當建立 XMLHttpRequest 物件時,請指定三個參數:URL、HTTP 方法 (GET 或 POST) 以及互動是否是非同步。在 XMLHttpRequest 範例中,參數是:

URL autocomplete 以及來自 complete-field 的文字 (M 字元):


                var url = "autocomplete?action=complete&id=" + 
                  escape(completeField.value);
            



參數 GET 表明 HTTP 互動使用 GET 方法;以及參數 true 表明互動是非同步:


                req.open("GET", url, true);
            



如果使用非同步呼叫,則必須設定回呼函式 (Callback Function)。當 XMLHttpRequest 上的 readyState 屬性 (property) 變更時,在 HTTP 互動期間的特定時間點,以非同步方式呼叫回呼函式。在這個範例中,回呼函式為 processRequest()。這是設定為函式的 XMLHttpRequest.onreadystatechange 屬性 (property)。請注意,當 readState 係「4」時呼叫 parseMessages 函式。

XMLHttpRequest.readyState 為「4」表示成功完成 HTTP 互動。

當呼叫 XMLHttpRequest.send() 時開始 HTTP 互動。

如果互動是非同步,則瀏覽器繼續處理頁面中的事件。


在伺服器上

XMLHttpRequest 提出對 URL autocomplete 的 HTTP GET 要求,這對應至名為 AutoComplete 的 servlet。

呼叫 AutoComplete servlet 的 doGet() 方法。doGet() 方法類似如下:


                public void doGet(HttpServletRequest request, 
                    HttpServletResponse response) 
                  throws IOException, ServletException { 
                  ... 
                  String targetId = request.getParameter("id"); 
                  Iterator it = employees.keySet().iterator(); 
                  while (it.hasNext()) { 
                    EmployeeBean e = (EmployeeBean)employees.get(
                        (String)it.next()); 
                    if ((e.getFirstName().toLowerCase().startsWith(targetId) || 
                      e.getLastName().toLowerCase().startsWith(targetId)) 
                      && !targetId.equals("")) { 
                      sb.append("<employee>"); 
                      sb.append("<id>" + e.getId() + "</id>"); 
                      sb.append("<firstName>" + e.getFirstName() + 
                        "</firstName>"); 
                      sb.append("<lastName>" + e.getLastName() + 
                        "</lastName>"); 
                      sb.append("</employee>"); 
                      namesAdded = true; 
                    } 
                  } 
                  if (namesAdded) { 
                    response.setContentType("text/xml"); 
                    response.setHeader("Cache-Control", "no-cache"); 
                    response.getWriter().write("<employees>" + 
                      sb.toString() + "</employees>"); 
                  } else { 
                    response.setStatus(HttpServletResponse.SC_NO_CONTENT); 
                  } 
                }
            



您可以在這個 servlet 中發現到,對於撰寫 AJAX 處理的伺服器端程式碼,您確實不需要學習新知識。如果您想要交換 XML 文件,則必須將回應內容型別 (response content type) 設定為 text/xml設定為。您還可以運用 AJAX 來交換純文字或甚至交換用戶端上的回呼函式可評估或執行的 JavaScript 片段 (snippet)。

請注意,某些瀏覽器可快取結果,所以可能需要將 Cache-Control HTTP 標頭設定為 no-cache。在這個範例中,servlet 所產生的 XML 文件包含所有名字或姓氏以字元 M 開頭的員工。在下列範例中,將 XML 文件傳回至提出呼叫的 XMLHttpRequest 物件:


                <employees>
                  <employee>
                    <id>3</id>
                    <firstName>George</firstName>
                    <lastName>Murphy</lastName>
                  </employee>
                  <employee>
                    <id>2</id>
                    <firstName>Greg</firstName>
                    <lastName>Murphy</lastName>
                  </employee>
                  <employee>
                    <id>11</id><firstName>Cindy</firstName>
                    <lastName>Murphy</lastName>
                    </employee>
                  <employee>
                    <id>4</id>
                    <firstName>George</firstName>
                    <lastName>Murray</lastName>
                  </employee>
                  <employee>
                    <id>1</id>
                    <firstName>Greg</firstName>
                    <lastName>Murray</lastName>
                  </employee>
                </employees>
            




傳回至用戶端

提出起始呼叫的 XMLHttpRequest 物件在接收到回應時呼叫 parseMessages() 函式 (如需詳細資訊,請參閱之前在這個範例中的 XMLHttpRequest 初始化)。parseMessages() 函式類似如下:


                function parseMessages(responseXML) {
                  clearTable();
                    var employees = responseXML.getElementsByTagName(
                      "employees")[0];
                  if (employees.childNodes.length > 0) {
                    completeTable.setAttribute("bordercolor", "black");
                    completeTable.setAttribute("border", "1");
                  } else {
                    clearTable();
                  }
              
                  for (loop = 0; loop < employees.childNodes.length; loop++) {
                    var employee = employees.childNodes[loop];
                    var firstName = employee.getElementsByTagName(
                      "firstName")[0];
                    var lastName = employee.getElementsByTagName(
                      "lastName")[0];
                    var employeeId = employee.getElementsByTagName(
                      "id")[0];
                    appendEmployee(
                      firstName.childNodes[0].nodeValue,
                      lastName.childNodes[0].nodeValue, 
                      employeeId.childNodes[0].nodeValue);
                  }
                }
            



parseMessages() 函式接收 AutoComplete servlet 作為參數所傳回之 XML 文件表示的物件。函式利用程式來全面研究 XML 文件,並且接著使用結果來更新 HTML 頁面的內容。達成此目的之方式為,將 XML 文件中姓名的 HTML 來源插入至 id 是「menu-popup」的
元素中:


                <div style="position: absolute; 
                  top:170px;left:140px" id="menu-popup">
            



清單隨著使用者輸入更多字元而縮短。接著,使用者可點選其中一個姓名。

希望現在您瞭解到 AJAX 僅僅是在頁面背景中透過 HTTP 交換資訊,以及依據結果來動態更新該頁面。如需關於 AJAX 及 Java 技術的詳細資訊,請參閱技術文章《Asynchronous JavaScript Technology and XML (AJAX) With Java 2 Platform, Enterprise Edition》( http://java.sun.com/developer/technicalArticles/J2EE/AJAX/index.html )。

另請參閱 AJAX BluePrints 網頁 ( http://java.sun.com/blueprints/ajax.html ),以及 Greg Murray's blog「AJAX FAQ for the Java Developer」( http://weblogs.java.net/blog/gmurray71/ )。


■ 執行範例程式碼
==============================


此祕訣中隨附的範例套裝程式展示此祕訣中所涵蓋的技術。您可以在任何支援 Servlet 2.4 API (或更新版本) 的 Web 容器 (web container) 上部署範例套裝程式。若要安裝及執行範例:

1.如果您已做好安裝及執行範例的準備,請從 GlassFish Project 頁面( https://glassfish.dev.java.net/ ) 下載 GlassFish。
 GlassFish 支援「全新的」 Servlet 2.5 及 JSP Standard Tag Library (JSTL)。
 如果您正在使用 J2EE 1.4 或 Servlet 2.4 容器,則可能必須在 web/WEB-INF/lib 目錄中包含 JSTL JAR 檔案.


2.設定下列環境變數:
。GLASSFISH_HOME:此變數應指向 GlassFish 的安裝位置 (例如,C:\Sun\AppServer)
。ANT_HOME:此變數應指向 ant 的安裝位置。Ant 係包含在下載的 GlassFish 束中。
 (在 Windows 中,Ant 位於 lib\ant 子目錄中)。
。JAVA_HOME:此變數應指向系統上的 JDK 5.0 位置。

再者,將 ant 位置加入至 PATH 環境變數中。


3.下載範例檔案
 (
http://java.sun.com/developer/EJTechTips/download/ttnov2005ajax-autocomplete.zip )
 及擷取其內容。現在,您應發現到最新擷取的目錄為 \ajax-autocomplete。
 例如,如果您擷取內容至 Windows 電腦上的 C:\,則最新建立的目錄應位於 C:\ajax-autocomplete。


4.移至 ajax-autocomplete 目錄,並且將 build.properties.sample 複製至 build.properties 檔案。


5. 開啟 build.properties 檔案,並且將 servlet.jar property 設定為包含 Servlet 2.4 (或更新版本) API 的 JAR 檔案。
 對於 GlassFish 而言,JAR 檔案是 /glassfish/lib/javaee.jar,
 其中 是 GlassFish 的安裝位置。
 將 javaee.autodeploy 目錄設定為 Web 容器將自動部署應用程式的目錄。
 在 GlassFish 上,此目錄是 /glassfish/domains/domain1/autodeploy。


6. 請輸入以下命令來啟動 GlassFish:

 \bin\asadmin start-domain domain1,其中 是 GlassFish 的安裝位置。


7. 使用 Ant 工具來建置及部署應用程式。
 GlassFish 具有 Ant 的複本,在 /glassfish/bin/asant 目錄中。
 您也可以從 Apache Ant Project 頁面 ( http://ant.apache.org/ ) 下載天線。

 若要建置應用程式,請輸入以下命令:

   ant

 若要部署應用程式,請輸入以下命令:

   ant deploy


8. 開啟瀏覽器並且連至下載 URL: http://localhost:8080/ajax-autocomplete/


如果您正在使用 NetBeans 4.1 或更新版本,請選擇 Help ->BluePrints Solutions Catalog,其中包含範例且可從工具執行。接著選擇 AJAX -> Autocomplete 範例,並且您已完成操作。您可以在 NetBeans 內執行範例,並且可視需要修改範例。

冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15758
[轉貼]原生AJAX入門講解(含實例)

原生AJAX入門講解(含實例)

相對於jQuery、YUI以及其他一些類庫的AJAX封裝,原生JS的AJAX顯得那麼的尷尬,兼容性不好,要記很多的方法屬性,調用不便捷,代碼臃腫…但我還是想說,原生JS才是最根本最底層的知識(雖然實際項目中我也是以jQuery AJAX為主,為什麼?高效!),求木之長者,必固其根本。
什麼是AJAX? 它的優點劣勢是什麼?
Asynchronous JavaScript and XML(異步JavaScript和XML),是一種創建交互式網頁應用的網頁開發技術。簡單的說它是多種技術的組合,目的就是讓前台的數據交互變得更快捷,不用刷新頁面就可以完成數據的更新。關於它的概念,止於此。想瞭解更多,請前往:
http://zh.wikipedia.org/zh/AJAX
優點很明顯,利於用戶體驗,不會打斷用戶的操作,在不刷新頁面的情況下更新內容,減小服務器壓力也是它很硬性的一個優點;而缺點,除了倍受追捧的SEO問題,安全問題、前進後退(這個雖然可以用其他方法解決,但AJAX本身的機制還是沒變)、破壞程序的異常機制以及對新興手持設備支持不完美的問題都是它現存的一些缺點。人無完人,AJAX也是如此,我們並不能因為它有缺點而摒棄它。
什麼地方需要AJAX?
其實這是一個太寬泛的問題,各人各項目都有不同的用處,依我的經驗與理解,AJAX應該用於小面積更新數據而不希望整個頁面刷新的情況下使用。比如對用戶名或者註冊郵箱等數據判斷、內容選項卡內容、彈出的登錄註冊窗口以及用戶提交信息後的反饋信息等等。
實踐出真知!
崇尚思考加實踐,我堅信這是深入任何一門技術的必備法寶。下面,我就以一個常用的驗證用戶是否使用的實例,淺嘗輒止的講解一下基礎的AJAX。 查看樣例演示
驗證用戶名這種數據判斷,不用多說了,會一點點前端的人都知道是必須的。最傳統的模式可能是輸入信息,然後用戶點提交後alert出一個窗口,告訴用戶XXX用戶名已被註冊,請重新輸入!我討厭極醜的alert框!我想大多用戶也是一樣。此時,AJAX就可以華麗登場了。當用戶輸入完名字後,在表單外任何地方點一下(失去焦點),AJAX就迅速把用戶輸入的信息反饋到服務器端判斷,並迅速返回一個信息告知用戶輸入的暱稱是否可用。如此,我們需要一個前台的輸入表單,代碼如下:




<p>
</p>


另外,我們還需要一個判斷輸入暱稱是否存在的後端頁面(本文以PHP為例,這部分不用細究):



...
if(isset($_GET['entryname'])){
$entryname=$_GET['entryname'];
}else{
$entryname='DATA NULL';
}
$sql=sprintf("select * from i_test_ajax where nickname='%s'",$entryname);
$res=$iajax->query($sql);
//sleep只是為了展示readState==1時的效果
sleep(1);
if(($res->num_rows)>0){
echo "抱歉!此暱稱已存在 :(";
}else{
echo "恭喜!此暱稱可註冊 :)";
}
...

如此,萬事俱備,只欠東風,剩下的就交給AJAX來處理了。
XMLHttpRequest,不得不提的一個對象,AJAX最核心也是最底層的對象。可悲哀的是,它是W3C的一個標準,但微軟IE一直很自我(微軟IE)。怎麼辦?當然是用一個方法和諧掉它們。微軟IE支持ActiveXObject(『Microsoft.XMLHTTP』)對象,這樣就簡單了:



//兼容的XMLHttpRequest對像
IXHR: function(){
if(window.ActiveXObject){
XHR=new ActiveXObject('Microsoft.XMLHTTP');
}else if(window.XMLHttpRequest){
XHR=new XMLHttpRequest();
}else{
return null;
}
}

兼容的XMLHttpRequest對像實現了,接下來寫一個簡單的onblur事件,即當輸入值後,表單失去焦點後開始判斷並迅速回饋一個信息到前台。代碼如下:



//觸發焦點時執行
document.forms['iform'].nickname.onblur = function(){
//輸入的值
var val=document.forms['iform'].nickname.value;
//對用戶名的判斷
if(!/^[a-zA-Z0-9_]{3,16}$/.test(val)){
alert('請輸入3~16位由英文、數字、下劃線組成的暱稱!');
return false;
}
//初始化一下XHR
iBase.IXHR();
//原來需要新打開的判斷頁面用GET使用異步
XHR.open('GET','/demo/ajax/iajax20110306_query.php?entryname='+val,true);
//與readyState屬性有關,當readyState改變時它才會觸發
XHR.onreadystatechange=returnFun;
//異步處理完成後發送數據出去(比如某些需要在焦點事件後再執行的)
XHR.send(null);
}

解釋一下AJAX部分的代碼。iBase.IXHR(),初始化XHR,以保證XMLHttpRequest對象的兼容。接下來,通過以GET的方式,異步發送到/demo/ajax/iajax20110306_query.php頁面進行驗證。有人會問什麼是GET,GET是從服務器上請求數據,GET方法就是把數據參數隊列加到一個URL上,值和表單是一一對應的,比如本文的entryname=val。這個概念可能屬於後台程序的範疇,不在此細說。然後,我們需要用到一個onreadystatechange事件屬性,這個屬性是用來存儲函數(或函數名),每當readyState屬性改變時,就會調用該函數,即本文中的returnFun;最後,我們還要發送一個數據到服務器,send屬性一般用於數據交換,而本文只是一個簡單的驗證判斷,所以,send一個空值。
基本的判斷與數據發送完成了,接下來還剩一個關鍵的信息獲取,即returnFun。先看代碼:



function returnFun(){
//當send()已調用,正在發送請求時,顯示Loading...
if(XHR.readyState==1){
iBase.Id('tips').innerHTML='Loding...';
}else if(XHR.readyState==4){
//當響應內容解析完成,可以調用時
//更縝密,再判斷一下status是否成功
if(XHR.status==200){
//responseText為返回的文本
iBase.Id('tips').innerHTML=XHR.responseText;
}
//使用完請銷毀,避免內存洩露
XHR=null;
}
}

此函數是用來通過判斷readyState及status狀態也及時反饋給用戶相應的提示信息。readyState有五種狀態:
  0 (未初始化): (XMLHttpRequest)對像已經創建,但還沒有調用open()方法;
  1 (載入):已經調用open() 方法,但尚未發送請求;
  2 (載入完成): 請求已經發送完成;
  3 (交互):可以接收到部分響應數據;
  4 (完成):已經接收到了全部數據,並且連接已經關閉。
如此一來,你應該就能明白readyState的功能,而status實際是一種輔狀態判斷,只是status更多是服務器方的狀態判斷。關於status,由於它的狀態有幾十種,我只列出平時常用的幾種:
  100——客戶必須繼續發出請求
  101——客戶要求服務器根據請求轉換HTTP協議版本
  200——成功
  201——提示知道新文件的URL
  300——請求的資源可在多處得到
  301——刪除請求數據
  404——沒有發現文件、查詢或URl
  500——服務器產生內部錯誤
至此,一個簡單的AJAX驗證實例就完成了: 查看樣例演示

關於AJAX的基礎介紹與實例就這麼多,關鍵還是在於自己的實踐與思考。其實這其中涉及知識並不複雜,若有後端程序的基礎,學起AJAX會更加容易,關鍵是要想明白其中的邏輯關係。有興趣的話,可以自己寫一個不刷新頁面加載新內容的AJAX,或者研究一下jQuery中關於AJAX的封裝。


原文出處: 原生AJAX入门讲解(含实例) | Mr.Think的博客
前一個主題 | 下一個主題 | 頁首 | | |



Powered by XOOPS 2.0 © 2001-2008 The XOOPS Project|