天地方圓

AJAX 簡介

作者:趙榮香  工作單位:天地方圓公司  聯系方式:13834535037  發表時間:2011-03-21  瀏覽次數:1901

1.1 AJAX 簡介
  AJAX 指異步 JavaScript 及 XML(Asynchronous JavaScript And XML)。
㈠您應當具備的基礎知識
   在繼續學習之前,您需要對下面的知識有基本的了解:
   AJAX = 異步 JavaScript 及 XML(Asynchronous JavaScript and XML)。 AJAX 不是一種新的編程語言,而是一種用于創建更好更快以及交互性更強的 Web 應用程序的技術。
   通過 AJAX,您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 對象來直接與服務器進行通信。通過這個對象,您的JavaScript 可在不重載頁面的情況與 Web 服務器交換數據。
   AJAX 在瀏覽器與 Web 服務器之間使用異步數據傳輸(HTTP 請求),這樣就可使網頁從服務器請求少量的信息,而不是整個頁面。
   AJAX 可使因特網應用程序更小、更快,更友好。
   AJAX 是一種獨立于 Web 服務器軟件的瀏覽器技術。
㈡AJAX 基于 Web 標準
   AJAX 基于下列 Web 標準:
    JavaScript XML HTML CSS 在 AJAX 中使用的 Web 標準已被良好定義,并被所有的主流瀏覽器支持。AJAX 應用程序獨立于瀏覽器和平臺。
㈢AJAX 是更優秀的應用程序
   Web 應用程序較桌面應用程序有諸多優勢;它們能夠涉及廣大的用戶,它們更易安裝及維護,也更易開發。
   不過,因特網應用程序并不像傳統的桌面應用程序那樣完善且友好。
   通過 AJAX,因特網應用程序可以變得更完善,更友好。
㈣今天您就可以使用 AJAX
   沒有什么新東西可學。
   AJAX 基于已有的標準。這些標準已被大多數開發者使用多年。
㈤應用案例
   該技術在1998年前后得到了應用。允許客戶端腳本發送HTTP請求(XMLHTTP)的第一個組件由Outlook Web Access小組寫成。該組件原屬于微軟Exchange Server,并且迅速地成為了Internet Explorer 4.0的一部分。部分觀察家認為,Outlook Web Access是第一個應用了Ajax技術的成功的商業應用程序,并成為包括Oddpost的網絡郵件產品在內的許多產品的領頭羊。但是,2005年初,許多事件使得Ajax被大眾所接受。Google在它著名的交互應用程序中使用了異步通訊,如Google討論組、Google地圖、Google搜索建議、Gmail等。Ajax這個詞由《Ajax: A New Approach to Web Applications》一文所創,該文的迅速流傳提高了人們使用該項技術的意識。另外,對Mozilla/Gecko的支持使得該技術走向成熟,變得更為易用。
   AJAX前景非常樂觀,可以提高系統性能,優化用戶界面。AJAX現有直接框架AjaxPro,可以引入AjaxPro.2.dll文件,可以直接在前臺頁面JS調用后臺頁面的方法。但此框架與FORM驗證有沖突。另微軟也引入了AJAX組件,需要添加AjaxControlToolkit.dll文件,可以在控件列表中出現相關控件。
㈥AJAX模式
   許多重要的技術和AJAX開發模式可以從現有的知識中獲取。例如,在一個發送請求到服務端的應用中,必須包含請求順序、優先級、超時響應、錯誤處理及回調,其中許多元素已經在Web服務中包含了,就像現在的SOA。AJAX開發人員擁有一個完整的系統架構知識。同時,隨著技術的成熟還會有許多地方需要改進,特別是UI部分的易用性。
   AJAX開發與傳統的CS開發有很大的不同。這些不同引入了新的編程問題,最大的問題在于易用性。由于AJAX依賴瀏覽器的JavaScript和XML,瀏覽器的兼容性和支持的標準也變得和JavaScript的運行時性能一樣重要了。這些問題中的大部分來源于瀏覽器、服務器和技術的組合,因此必須理解如何才能最好的使用這些技術。
   綜合各種變化的技術和強耦合的客戶服務端環境,AJAX提出了一種新的開發方式。AJAX開發人員必須理解傳統的MVC架構,這限制了應用層次之間的邊界。同時,開發人員還需要考慮CS環境的外部和使用AJAX技術來重定型MVC邊界。最重要的是,AJAX開發人員必須禁止以頁面集合的方式來考慮Web應用而需要將其認為是單個頁面。一旦UI設計與服務架構之間的范圍被嚴格區分開來后,開發人員就需要更新和變化的技術集合了。
㈦更好的用戶體驗
  AJAX的最大機遇在于用戶體驗。在使應用更快響應和創新的過程中,定義Web應用的規則正在被重寫;因此開發人員必須更注重用戶。現在用戶已經逐漸習慣如何使用Web應用了。例如用戶通常希望每一次按鈕點擊會導致幾秒的延遲和屏幕刷新,但AJAX正在打破這種長時間的狀況。因此用戶需要重新體驗按鈕點擊的響應了。
    可用性是AJAX令人激動的地方而且已經產生了幾種新穎的技術。其中最引人注目的是一種稱為“黃色隱出”的技術,它在數據更新之前時將用戶界面變為黃色,更新完成后立刻恢復原來的顏色。AJAX開發人員將用戶從Web應用的負載中解放出來;小心地利用AJAX提供的豐富接口,不久桌面開發人員會發現AJAX是他們的方向。
1.2 幾種工具和技術
  隨著AJAX迅速地引人注目起來,我想開發人員對這種技術的期待也迅速地增加。就像任何新技術,AJAX的興旺也需要一整個開發工具/編程語言及相關技術系統來支撐。
㈠主要包含的技術
  基web標準(standards-based presentation)XHTML+CSS的表示;
    使用 DOM(Document Object Model)進行動態顯示及交互;
    使用 XML 和 XSLT 進行數據交換及相關操作;
    使用 XMLHttpRequest 進行異步數據查詢、檢索;
   使用 JavaScript 將所有的東西綁定在一起。英文參見Ajax的提出者Jesse James Garrett的原文,原文題目(Ajax: A New Approach to Web Applications)。
   類似于DHTML或LAMP,AJAX不是指一種單一的技術,而是有機地利用了一系列相關的技術。事實上,一些基于AJAX的“派生/合成”式(derivative/composite)的技術正在出現,如“AFLAX”。
   AJAX的應用使用支持以上技術的web瀏覽器作為運行平臺。這些瀏覽器目前包括:
   Google Chrome、Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式對象,也不支持XSLT。
㈡JavaScript
  如名字所示,AJAX的概念中最重要而最易被忽視的是它也是一種JavaScript編程語言。JavaScript是一種粘合劑使AJAX應用的各部分集成在一起。在大部分時間,JavaScript通常被服務端開發人員認為是一種企業級應用不需要使用的東西應該盡力避免。這種觀點來自以前編寫JavaScript代碼的經歷:繁雜而又易出錯的語言。類似的,它也被認為將應用邏輯任意地散布在服務端和客戶端中,這使得問題很難被發現而且代碼很難重用。在AJAX中JavaScript主要被用來傳遞用戶界面上的數據到服務端并返回結果。XMLHttpRequest對象用來響應通過HTTP傳遞的數據,一旦數據返回到客戶端就可以立刻使用DOM將數據放到網面上。
㈢XMLHttpRequest
  XMLHttpRequest對象在大部分瀏覽器上已經實現而且擁有一個簡單的接口允許數據從客戶端傳遞到服務端,但并不會打斷用戶當前的操作。使用XMLHttpRequest傳送的數據可以是任何格式,雖然從名字上建議是XML格式的數據。
   開發人員應該已經熟悉了許多其他XML相關的技術。XPath可以訪問XML文檔中的數據,但理解XML DOM是必須的。類似的,XSLT

是最簡單而快速的從XML數據生成HTML或XML的方式。許多開發人員已經熟悉Xpath和XSLT,因此AJAX選擇XML作為數據交換格式是有意義的。XSLT可以被用在客戶端和服務端,它能夠減少大量的用JavaScript編寫的應用邏輯。
㈢CSS
  為了正確的瀏覽AJAX應用,CSS是一種AJAX開發人員所需要的重要武器。CSS提供了從內容中分離應用樣式和設計的機制。雖然CSS在AJAX應用中扮演至關重要的角色,但它也是構建跨瀏覽器應用的一大阻礙,因為不同的瀏覽器廠商支持各種不同的CSS級別。
㈣服務器端
  但不像在客戶端,在服務端AJAX應用還是使用建立在如Java,.Net和PHP語言基礎上機制;并沒有改變這個領域中的主要方式。既然如此,我們對Ruby o n Rails框架的興趣也就迅速增加了。在一年多以前,Ruby o n Rails已經吸引了大量開發人員基于其強大功能來構建Web和AJAX應用。雖然目前還有很多快速應用開發工具存在,Ruby o n Rails看起來已經儲備了簡化構建AJAX應用的能力。
1.3 調試與瀏覽器兼容性問題
㈠調試問題
  在實際構建AJAX應用中,你需要的不只是文本編輯器。既然JavaScript是非編譯的,它可以容易地編寫和運行在瀏覽器中。然而,許多工具提供了有用的擴展如語法高亮和智能完成。
   不同的IDE提供了對JavaScript支持的不同等級。來自JetBrains的IntelliJ IDEA是一個用來JavaScript開發的更好的IDE,雖然許多開發人員也喜歡Microsoft’s Visual Studio產品(允諾會在最新的版本中改善對AJAX的支持)。Eclipse包含了兩個免費的JavaScript編輯器插件和一個商業的來自ActiveStat的Komodo IDE。   另一個JavaScript和AJAX開發中的問題是調試困難。不同的瀏覽器提供不同的通常是隱藏的運行時錯誤信息,而JavaScript的缺陷如雙重變量賦值(通常是由于缺少數據類型)使得調試更加困難。在AJAX的開發中,調試就更復雜了,因為其需要標識究竟是客戶端還是服務端產生的錯誤。在過去,JavaScript調試的方法是刪除所有代碼然后一行行的增加直到錯誤出現。現在,更多開發人員回到為IE準備的Microsoft Script Debugger和為Mozilla瀏覽器準備的Venkman。
㈡瀏覽器兼容性
  JavaScript編程的最大問題來自不同的瀏覽器對各種技術和標準的支持。構建一個運行在不同瀏覽器(如IE和火狐)是一個困難的任務。因此幾種AJAX JavaScript框架或者生成基于服務端邏輯或標記庫的JavaScript,或者提供符合跨瀏覽器AJAX開發的客戶端JavaScript庫。一些流行的框架包括:, Backbase, Bitkraft, Django, DOJO, DWR, MochiKit, Prototype, Rico, Sajax, Sarissa, and Script.
   這些框架給開發人員更多的空間使得他們不需要擔心跨瀏覽器的問題。雖然這些框架提升了開發人員構建應用的能力,但由于廠商已經開發了更細節的用戶界面的打包組件解決方案,因此在AJAX組件市場中需要考慮一些其他因素。例如提供通用用戶界面的組件如組合框和數據柵格的幾個廠商,都可以被用來在應用中創建良好的通過類似電子數據表方式來查看和編輯數據的體驗。但這些組件不僅是封裝了組件的用戶界面而且包括與服務端數據的通訊方式,這些組件通常使用基于標記方式來實現如或JSF控件。
㈢展望
  最近IE和火狐之間的瀏覽器之爭變得火熱起來,因此AJAX開發人員需要足夠敏捷的作出反應。關鍵點在一些問題如CSS或XML,雖然各種瀏覽器形成采用最新標準的不同陣營(如Mozilla擁抱SVG和E4X標準及在最新火狐BETA版本中使用XUL,而微軟使用自己的XAML技術)。所有這些技術代表當前AJAX主流JavaScript和XML的市場方向改變。
   總的來說,AJAX開發人員必須盡快地跟進最新的技術并利用高產的工具集。成功的AJAX開發人員還需要留心他們的使用者以避免將任何問題擴大化。并且AJAX開發人員還需要持續地創新來創建增強Web應用易用性的新方法。
1.4 AJAX示例程序
  將以下文本放入一個HTML頁面即可看到效果,將會有兩次彈出提示,最后在頁面上顯示YES,表示完成
1.5 優點和缺點
優點:更迅捷的響應速度
  傳統的web應用允許用戶填寫表單(form),當提交表單時就向web服務器發送一個請求。服務器接收并處理傳來的表單,然後返回一個新的網頁。這個做法浪費了許多帶寬,因為在前後兩個頁面中的大部分HTML代碼往往是相同的。由于每次應用的交互都需要向服務器發送請求,應用的響應時間就依賴于服務器的響應時間。這導致了用戶界面的響應比本地應用慢得多。
   與此不同,AJAX應用可以僅向服務器發送并取回必需的數據,它使用SOAP或其它一些基于XML的web service接口,并在客戶端采用JavaScript處理來自服務器的響應。因此在服務器和瀏覽器之間交換的數據大量減少,結果我們就能看到響應更快的應用。同時很多的處理工作可以在發出請求的客戶端機器上完成,所以Web服務器的處理時間也減少了。
   使用Ajax的最大優點,就是能在不更新整個頁面的前提下維護數據。這使得Web應用程序更為迅捷地回應用戶動作,并避免了在網絡上發送那些沒有改變過的信息。
  Ajax不需要任何瀏覽器插件,但需要用戶允許JavaScript在瀏覽器上執行。就像DHTML應用程序那樣,Ajax應用程序必須在眾多不同的瀏覽器和平臺上經過嚴格的測試。隨著Ajax的成熟,一些簡化Ajax使用方法的程序庫也相繼問世。同樣,也出現了另一種輔助程序設計的技術,為那些不支持JavaScript的用戶提供替代功能。
缺點與其中一些問題的對應解決方案
  對應用Ajax最主要的批評就是,它可能破壞瀏覽器后退按鈕的正常行為。在動態更新頁面的情況下,用戶無法回到前一個頁面狀態,這是因為瀏覽器僅能記下歷史記錄中的靜態頁面。一個被完整讀入的頁面與一個已經被動態修改過的頁面之間的差別非常微妙;用戶通常都希望單擊后退按鈕,就能夠取消他們的前一次操作,但是在Ajax應用程序中,卻無法這樣做。不過開發者已想出了種種辦法來解決這個問題,當中大多數都是在用戶單擊后退按鈕訪問歷史記錄時,通過建立或使用一個隱藏的IFRAME來重現頁面上的變更。(例如,當用戶在Google Maps中單擊后退時,它在一個隱藏的IFRAME中進行搜索,然后將搜索結果反映到Ajax元素上,以便將應用程序狀態恢復到當時的狀態。)
   一個相關的觀點認為,使用動態頁面更新使得用戶難于將某個特定的狀態保存到收藏夾中。該問題的解決方案也已出現,大部分都使用URL片斷標識符(通常被稱為錨點,即URL中#后面的部分)來保持跟蹤,允許用戶回到指定的某個應用程序狀態。(許多瀏覽器允許JavaScript動態更新錨點,這使得Ajax應用程序能夠在更新顯示內容的同時更新錨點。)這些解決方案也同時解決了許多關于不支持后退按鈕的爭論。
   進行Ajax開發時,網絡延遲——即用戶發出請求到服務器發出響應之間的間隔——需要慎重考慮。不給予用戶明確的回應 ,沒有恰當的預讀數據 ,或者對XMLHttpRequest的不恰當處理,都會使用戶感到延遲,這是用戶不欲看到的,也是他們無法理解的。通常的解決方案是,使用一個可視化的組件來告訴用戶系統正在進行后臺操作并且正在讀取數據和內容。
   一些手持設備(如手機、PDA等)現在還不能很好的支持Ajax;
   用JavaScript作的Ajax引擎,JavaScript的兼容性和DeBug都是讓人頭痛的事;
   Ajax的無刷新重載,由于頁面的變化沒有刷新重載那么明顯,所以容易給用戶帶來困擾――用戶不太清楚現在的數據是新的還是已經更新過的;現有的解決有:在相關位置提示、數據更新的區域設計得比較明顯、數據更新后給用戶提示等;
  對串流媒體的支持沒有FLASH、Java Applet好;

1.6Ajax圖書
   ①Ajax基礎教程
  (亞馬遜計算機榜首圖書,國內第1本Ajax圖書)
   作 者: (美)阿斯利森,(美)舒塔 著,金靈 等譯
   出 版 社: 人民郵電出版社   
     出版時間: 2006-2-1 字 數: 356000 版 次: 1 頁 數: 253
     印刷時間: 2006/02/01 開 本: 印 次: 紙 張:
     膠版紙 I S B N : 9787115144812 包 裝: 平裝
   ②Ajax技術應知應會90題
  編著:卜維豐   改編:丁衛穎、付瑞鋒
   出版社:電子工業出版社   
    出版時間:2008年5月
   開本:720*1000 1/16 印張:22.75 頁數:354頁 ISBN:978-7-121-06197-4 定價:39.80元(含光盤一張)
   運用GWT開發
1.7 基礎應用
㈠創建XMLHttpRequest 方法
  XMLHttpRequest 類首先由Internet Explorer以ActiveX對象引入,被稱為XMLHTTP。 后來Mozilla﹑Netscape﹑Safari 和其他瀏覽器也提供了XMLHttpRequest類,不過它們創建XMLHttpRequest類的方法不同。
   ①對于Internet Explorer瀏覽器:
   xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0, 5.0
  xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");
   xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");
   由于在不同Internet Explorer瀏覽器中XMLHTTP版本可能不一致,為了更好的兼容不同版本的Internet Explorer瀏覽器,因此我們需要根據不同版本的Internet Explorer瀏覽器來創建XMLHttpRequest類,上面代碼就是根據不同的Internet Explorer瀏覽器創建XMLHttpRequest類的方法。
   對于Mozilla﹑Netscape﹑Safari等瀏覽器
   ②創建XMLHttpRequest 方法如下:xmlhttp_request = new XMLHttpRequest();
  如果服務器的響應沒有XML mime-type header,某些Mozilla瀏覽器可能無法正常工作。
    為了解決這個問題,如果服務器響應的header不是text/xml,可以調用其它方法修改該header。
   xmlhttp_request = new XMLHttpRequest();   
    xmlhttp_request.overrideMimeType('text/xml');
   在實際應用中,為了兼容多種不同版本的瀏覽器,一般將創建XMLHttpRequest類的方法寫成如下形式:
   try{   
     if( window.ActiveXObject ){
   for( var i = 5; i; i-- ){
   try{   
     if( i == 2 ){
   xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" ); }
   else{   
     xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );
   xmlhttp_request.setRequestHeader("Content-Type","text/xml");
   xmlhttp_request.setRequestHeader("Charset","gb2312"); }
   break;}   
     catch(e){
   xmlhttp_request = false; } } }
   else if( window.XMLHttpRequest )
   { xmlhttp_request = new XMLHttpRequest();
   if (xmlhttp_request.overrideMimeType)
   { xmlhttp_request.overrideMimeType('text/xml'); } } }
   catch(e){ xmlhttp_request = false; }
㈡發送請求
  可以調用HTTP請求類的open()和send()方法,如下所示:
   xmlhttp_request.open('GET', URL, true);
  xmlhttp_request.send(null);   
open()的第一個參數是HTTP請求方式—GET,POST或任何服務器所支持的您想調用的方式。 按照HTTP規范,該參數要大寫;否則,某些瀏覽器(如Firefox)可能無法處理請求。
   第二個參數是請求頁面的URL。
   第三個參數設置請求是否為異步模式。如果是TRUE,JavaScript函數將繼續執行,而不等待服務器響應。這就是"AJAX"中的"A"。
㈢服務器的響應
  這需要告訴HTTP請求對象用哪一個JavaScript函數處理這個響應。可以將對象的onreadystatechange屬性設置為要使用的JavaScript的函數名,如下所示:
   xmlhttp_request.onreadystatechange =FunctionName;
   FunctionName是用JavaScript創建的函數名,注意不要寫成FunctionName(),當然我們也可以直接將JavaScript代碼創建在onreadystatechange之后,例如:
   xmlhttp_request.onreadystatechange = function(){
   // JavaScript代碼段
   };
  首先要檢查請求的狀態。只有當一個完整的服務器響應已經收到了,函數才可以處理該響應。XMLHttpRequest 提供了readyState屬性來對服務器響應進行判斷。
   readyState的取值如下:   
    0 (未初始化)   
    1 (正在裝載)   
    2 (裝載完畢)   
    3 (交互中)   
    4 (完成)   
    所以只有當readyState=4時,一個完整的服務器響應已經收到了,函數才可以處理該響應。具體代碼如下:
   if (http_request.readyState == 4) { // 收到完整的服務器響應 }
  else { // 沒有收到完整的服務器響應 }
  當readyState=4時,一個完整的服務器響應已經收到了,接著,函數會檢查HTTP服務器響應的狀態值。完整的狀態取值可參見W3C文檔。當HTTP服務器響應的值為200時,表示狀態正常。
㈣處理從服務器得到的數據
  有兩種方式可以得到這些數據:
   (1) 以文本字符串的方式返回服務器的響應
  (2) 以XMLDocument對象方式返回響應

 

2011-3-21

二串一进球稳赚技巧