AJAX介紹

AJAX全稱爲“Asynchronous JavaScript and XML”(異步JavaScript和XML),是指一種創建交互式網頁應用的網頁開發技術。
  另外很多人對AJAX讀音爲阿甲克斯,正確讀音應該爲“ai jian ke si”(漢字拼音,其實應該是ai jai ke si ,但jai在漢字中沒有此拼音)
編輯本段主要包含了以下幾種技術
  Ajax(Asynchronous JavaScript + XML)的定義
  基於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瀏覽器作爲運行平臺。這些瀏覽器目前包括:Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式對象,也不支持XSLT。
編輯本段發展史
  該技術在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前景非常樂觀,可以提高系統性能,優化用戶界面。AJAX現有直接框架AjaxPro,可以引入AjaxPro.2.dll文件,可以直接在前臺頁面JS調用後臺頁面的方法。但此框架與FORM驗證有衝突。另微軟也引入了AJAX組建,需要添加AjaxControlToolkit.dll文件,可以在控件列表中出現相關控件,但如以往微軟控件類似,屬於雞肋,靈活性較差
編輯本段優點和缺點
  傳統的web應用允許用戶填寫表單(form),當提交表單時就向web服務器發送一個請求。服務器接收並處理傳來的表單,然後返回一個新的網頁。這個做法浪費了許多帶寬,因爲在前後兩個頁面中的大部分HTML代碼往往是相同的。由於每次應用的交互都需要向服務器發送請求,應用的響應時間就依賴於服務器的響應時間。這導致了用戶界面的響應比本地應用慢得多。
  與此不同,AJAX應用可以僅向服務器發送並取回必需的數據,它使用SOAP或其它一些基於XML的web service接口,並在客戶端採用JavaScript處理來自服務器的響應。因爲在服務器和瀏覽器之間交換的數據大量減少,結果我們就能看到響應更快的應用。同時很多的處理工作可以在發出請求的客戶端機器上完成,所以Web服務器的處理時間也減少了。
  使用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好;
編輯本段基礎應用
  創建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對象方式返回響應
編輯本段基於Ajax的應用程序架構彙總
  ·純Javascript:應用程序框架
  1.1 Bindows(自從2003年)
  網址是:http://www.bindows.net,Bindows是一個軟件開發包(SDK),它,通過強力聯合DHTML,JavaScript,CSS和XML等技術,能生成高度交互的互聯網應用程序-成爲現代的桌面應用程序的強有力對手。Bindows應用程序不要求下載和也不需要在用戶端安裝-僅要求有一個瀏覽器(也不需要Java,Flash或者ActiveX)。Bindows有可能領導面向對象開發的AJAX應用程序的平臺。
  1.2 BackBase(自從2003年)
  網址是:http://www.backbase.com,是一個全面的瀏覽器端框架,支持豐富的瀏覽器功能以及與.NET和Java的集成。
  ·商業化,來自於Backbase B.V(總部在Amsterdam,成立於2003年)。
  1.3 DOJO(開發中;自從2004年9月)
  網址是:http://dojotoolkit.org/,提供全面窗口小組件和瀏覽器-服務器消息支持。
  ·爲創建定製的Javascript窗口小組件提供框架支持。
  1.4 Open Rico(開發中;自從2005年5月;基於早期的私有框架)
  網址是:http://openrico.org/demos.page,是一多用途框架,支持Ajax基礎結構和用戶交互。
  1.5 qooxdoo(開發中;自從2005年5月)
  網址是:http://qooxdoo.sourceforge.net/,是另一個雄心勃勃的框架,提供寬範圍的UI支持和正在開發中的基礎結構特性。
  1.6 Tibet(開發中;自從2005年6月)
  網址是:http://www.technicalpursuit.com/,目的是提供高度可移植的和全面的Javascript API,結果是,可能自動生成大量的客戶端代碼。自稱是"企業級Ajax"。
  2 純Javascript:基礎結構框架
  2.1 AjaxCaller(Alpha版本;自從5月2005年)
  網址是:http://ajaxify.com/run/testAjaxCaller/,是一基本的線程安全的XMLHttpRequest包裝器,主要針對Ajax新手,仍處於原始的alpha開發階段,
  2.2 Flash JavaScript集成包
  網址是:http://www.osflash.org/doku.php?id=flashjs,允許JavaScript和Flash內容的集成
  2.3 Google AJAXSLT(發行於2005年6月)
  網址是:http://goog-ajaxslt.sourceforge.net/,是一個Javascript框架,用來執行XSLT轉換以及XPath查詢。
  2.4 HTMLHttpRequest(Beta版;始於2005年)
  HtmlHttpRequest(http://www.twinhelix.com/javascript/htmlhttprequest/),它使用了XMLHttpRequest和Iframes以改進兼容性。
  2.5 交互式網站框架(自從2005年5月)
  交互式網站框架(http://sourceforge.net/projects/iwf/,是一個項目,目的是從瀏覽器端對Ajax基礎結構的多方面予以支持。自描述爲"使用javascript,css,xml,和html來創造高度交互網站的框架。包括一個定製的針對高度可讀的javascript的xml分析器。實質上,是建立基於AJAX的網站的基礎,還有另外一些通用腳本"。
  2.6 LibXMLHttpRequest(發行於2003年6月)
  libXmlRequest(http://www.whitefrost.com/servlet/connector?file=reference/2003/06/17/libXmlRequest.html),是XMLHttpRequest的一個瘦包裝器。
  2.7 RSLite(x)
  網站是:http://www.ashleyit.com/rs/main.htm,是一個針對XMLHttpRequest的瘦包裝器。
  2.8 Sack(在開發中,自從2005年5月)
  網站是:http://twilightuniverse.com/2005/05/sack-of-ajax/,是一個針對XMLHttpRequest的瘦包裝器。
  2.9 Sarissa(發行於2月,2003年)
  網站是:http://sarissa.sf.net,是一種Javascript API,它封裝了在瀏覽器端可以獨立調用XML的功能。
  2.10 XHConn(發行於自從4月,2005年)
  網站是:http://xkr.us/code/javascript/XHConn/,是一個對XMLHttpRequest的瘦包裝器。
  3 服務器端:多種語言
  3.1 跨平臺異步的接口工具箱(5月2005年)
  CPAINT:http://cpaint.sourceforge.net/,是一真正的支持PHP和ASP/Vbscript的Ajax實現和JSRS(JavaScript遠程腳本)實現。CPAINT提供給你需求的代碼在後臺實現AJAX和JSRS,而返回的數據以JavaScript形式在前臺操作,格式化和顯示。這允許你創建能提供接近實時的反饋給用戶的web應用程序。
  3.2 SAJAX(可用,但是不是1.0版本;自從3月2005年)
  網站是:http://www.modernmethod.com/sajax/,直接把調用從Javascript發送到你的服務器端語言並再次回返。
  3.3 Javascipt對象標誌(JSON)和JSON-RPC
  JSON(http://www.crockford.com/JSON/index.html),是一個"胖的自由的XML選擇",而JSON-RPC(http://www.json-rpc.org/)是一種遠程過程協議,類似於XML-RPC,強有力支持Javascript客戶。
  3.4 Javascript遠程腳本(JSRS)(自從2000年)
  網址是:http://www.ashleyit.com/rs/jsrs/test.htm,直接把調用從Javascript發送到你的服務器端語言並再次回返。
  4 服務器端:Java
  4.1 WebORB for Java(自從2005年8月)
  網址:http://www.themidnightcoders.com/weborb/aboutWeborb.htm,是一個平臺,支持開發AJAX和基於Flash的胖客戶端應用程序,並可以把它們與Java對象和XML Web服務相系起來。在線舉例(http://www.themidnightcoders.com/examples)
  4.2 Echo 2(自從3月2005年)
  網址是:http://www.nextapp.com/products/echo2/,允許你用純Java代碼編寫Ajax應用軟件(範例(http://demo.nextapp.com/InteractiveTest/ia))。
  4.3 Direct Web Remoting (DWR)(2005年)
  網址是:http://www.getahead.ltd.uk/dwr/,是一個框架,用於直接從Javascript代碼中調用Java方法。
  4.4 SWATO(2005年)
  網址是:http://swato.dev.java.net/,是一套可重用的和良好集成的Java/JavaScript庫,它實現了一種更容易的方式來改變你的web應用程序的交互,它是通過AJAX方式實現。
  5 服務器端:Lisp
  5.1 CL-Ajax
  網址:http://cliki.net/cl-ajax,實現Javascript直接調用服務器端Lisp函數。
  6 服務器端:.NET
  6.1 WebORB for.NET(自從8月2005年)
  網址:http://www.themidnightcoders.com/weborb/aboutWeborb.htm,是一個平臺,用於開發AJAX和基於Flash的胖客戶端應用程序,並能把它們連接到.NET對象和XML Web服務。(在線舉例(http://www.themidnightcoders.com/examples))
  6.2 Ajax.NET(自從3月2005年)
  網址是:http://ajax.schwarz-interactive.de/,是一個庫,實現從Javascript到服務器端.NET的存取。
  7 服務器端:PHP
  7.1 AjaxAC(自從2005年4月)
  網址是:http://ajax.zervaas.com.au/,用單個的PHP類封裝了完整的應用程序。
  7.2 JPSpan
  網址是:http://jpspan.sourceforge.net/wiki/doku.php,直接把Javascript調用傳遞到PHP函數。
  7.3 XAJAX
  網址是:http://xajax.sf.net,直接把Javascript調用傳遞到PHP函數。
  8 服務器端:Ruby
  Ruby On Rails(http://www.rubyonrails.org/)是一個通常的強力支持Ajax的web框架:
編輯本段其它Ajax的解釋
  1.Ajax:著名希臘史詩伊利亞特中英雄埃阿斯的名字。
  2.Ajax:荷蘭著名足球俱樂部阿賈克斯,以培養青年球員而著稱,並多次奪得歐洲冠軍盃。
  3.Ajax:亞甲斯炸藥
  4.Ajax:艾傑克斯銅錫鉛軸承合金
 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章