3.1 AJAX

 

AJAX

AJAX -  Asynchronous JavaScript and XML

ajax不是一種技術而是以xml與xhtml標轉的呈現。

ajax資料透過XMLHttpRequest傳輸。

優點:

目前最可行的ria

一些新興的frameworks和toolkits

不需要下載程式碼及plug-in

缺點:

瀏覽器相容問題

AJAX-based JavaScript所需較大頻寬下載

javascript不易維護除錯 

AJAX

  • AJAX目的為了補足response的不足。
  • XHR=XMLHttpRequest,是微軟最先有的非同步技術。
  • 什麼是RIA?DHTML+XHR=>RIA。
  • 為什麼不用multithread?因為不易撰寫,又要處理安全性。
  • comet:可以改善AJAX,server可以主動服務使用者,不過不有名。AJAX的原則是client端提出要求,server才會有動作,comet可以在server端再家一層,可以主動服務client。
  • AJAX主要是靠XHR達到非同步,response則分為兩種:DOM、text。

AJAX 

  • 全名為 Asynchronous JavaScript And XML
  •  意思為 非同步JavaScript和XML
  • 是一種創建互動式網頁應用的網頁開發技術
  • 四大組成
    1.  
      1.  JavaScript
      2. CSS (Cascading Style Sheets)
      3. DOM (Document Object Model)
      4. XMLHttpRequest
    2.  

  • 目的:提高網頁的互動性、速度、可用性

  • 優點:能在不更新整個頁面的前提下維護資料,減少頻寬浪費,增加互動性、操作性

  • 缺點:在動態更新頁面的情況下,用戶無法回到前一個頁面狀態,因為瀏覽器僅能記下歷史記錄中的靜態頁面

  • 解決方法:瀏覽器允許JavaScript動態更新錨點,這使得Ajax應用程式能夠在更新顯示內容的同時更新錨點

  •  

     

    介紹一些AJAX的應用實例:
    
    目前有 
    

    1.輸入驗證
    2.動態清單
    3.自動表單填寫
    4.網頁聊天室
    5.進度列
    6.提示文字
    7.自動完成
    這些是比較常見的應用

    在編寫一些JavaScript等的時候,

    就需要一些比較好的編譯程式來幫助 

    JSEclipse,Aptana,HTML Validator,DOM Inspector,JSLint,Web Developer

    以上這些都是蠻不錯的編譯工具

    至於什麼時候該使用呢?

    其實在Google Maps中就可以看到了 

    在browser跟web server 這兩個東西之間,一定要傳遞非常多的圖形資料

    以往都是利用同步方式,但是這樣一來我們就沒辦法對這個網頁進行操作除非它的圖形全部下載完成

    而當我們點左button或是右button往往又要再等一次圖形傳遞

    使用AJAX時,

    當 AJAX engine receive我們的 form data

    engine 將完成的資料回傳給 AJAX engine並跟web server聯繫,

    接下來再藉由 engine 把結果顯示在 page 上,整個過程是非同步的,跟傳統不同,所以pag也不會停止接收我們的操作

    (當然這些過程我們也完全不會感受到囉) 

     

     

    Ajax Gossip: Asynchronous JavaScript + XML

    Ajax這個名詞是由 Jesse James Garrett 提出,在他發表的  Ajax: A New Approach to Web Applications 這篇文章中談到 Google Suggest Google Maps 所使用到的技術,是他們在 Adaptive Path 中稱之為Ajax的新方法:

    Google Suggest and Google Maps are two examples of a new approach to web applications that we at Adaptive Path have been calling Ajax. The name is shorthand for Asynchronous JavaScript + XML, and it represents a fundamental shift in what’s possible on the Web.


    在文中指出,Ajax是Asynchronous JavaScript + XML的簡稱,這指出了Ajax的核心觀念(Asynchronous)與所使用到的主要兩個技術(JavaScript、XML)。

    Asynchronous為非同步,要了解Ajax,必須先了解為何要非同步。

    現在許多的應用程式都是在Web上展現,這託了網際網路的普及之福,然而網路當初是Web應用程式繁榮的舞台,現在卻也成了限制Web應用程式發展的因素。

    限制的原因來自於網路延遲的不可確定性,網路連線其實是個很耗資源的行為,程式必須序列化、通訊協定溝通、實體路由傳送等動作,這些動作都很耗時間與資源,所有透過網路必需的額外操作,常足以拖慢一個系統,就Web應用程式而言,通常只能透過表單進行資料提交,在同步的情況下,使用者送出表單之後,就只能等待遠端伺服器回應,在這段時間內,使用者無法作進一步的操作。
    使用者必須等待的時間,瀏覽器預設是使用同步的方式送出請求並等待回應,這也可以想像成存取一個很慢的硬碟,如果這是桌面應用程式,您就可以想像這種等待有多枯燥,人們之所以可以忍受Web應用程式的這種等待,某些原因是因為無從選擇而習慣了。

    如果可以把請求與回應改為非同步進行,也就是發出請求後,瀏覽器無需苦等伺服器的回應,而可以讓使用者對瀏覽器中的Web應用程式進行其它的操作,當伺服器終於處理完請求並送出回應,而電腦接收到回應時,再回過頭來呼叫瀏覽器所設定的對應動作進行處理。
    在的問題是,誰來發送非同步請求,事實上有幾種解決方案,在Ajax這個名詞被提出之前,早就有著用IFrame的方式,也就是在HTML頁面中內嵌另一個HTML頁面,由內嵌的頁面來發出請求,而外圍的HTML頁面還是可以繼續讓使用者進行操作,有時候IFrame的解決方式會是簡單的,甚至比較好的。

    不過現在談到Ajax,都著重在 XMLHttpRequest 物件,您可以使用JavaScript來建立,其實Firefox、NetScape、Safari、Opera中才叫XMLHttpRequest, Internet Explorer中是Microsoft.XMLHTTP或Msxml2.XMLHTTP的ActiveX物件,不過IE7中也正名為 XMLHttpRequest。

    Ajax應用程式是必須由客戶端、伺服端一同合作的應用程式,JavaScript是用來撰寫Ajax應用程式客戶端的語言,XML則是請求時或回應時,建議使用的交換資料格式,Ajax的客戶端與伺服端基本上是可以獨立開發的,只要協議好溝通的資料格式,伺服端不限於使用何種技術。

     參考資料:

    http://caterpillar.onlyfun.net/Gossip/AjaxGossip/AsynchronousJavaScriptX...