Ajax 簡介和學習小感

之前有說過,Heresy 會寫一些簡單的互動網頁,但是不會寫 Ajax。不過,最近因為工作上的需要,又開始需要寫些 PHP MySQL 的網頁了∼而由於部分輸入的資料相當複雜,所以也開始學習寫 Ajax 了…

什麼是 Ajax 呢?他是「Asynchronous JavaScript and XML」的縮寫,顧名思義,主要就是 JavaScript 和 XML 了!也因此,實際上就算是 Ajax 這個字被 Jesse James Garrett 提出來的時候,在技術層面上也不算是什麼新東西,可以算是用現有的東西來組成的∼

基本上,它的概念就是透過 JavaScript 來動態讀取 XML,並使用 DOM(Document Object Model) 來修改現有網頁的內容。傳統的互動式網頁要讓使用者輸入資料,必須要透過 Form 來做 POST 或 GET 的傳遞,每次傳遞資料,都得換到另一個網頁或重新讀取,實際上算是滿不方便的。而 Ajax 主要的概念,就是可以在同一個頁面中,動態地去傳送使用者的資料和更新現有網頁。右邊的圖就是 Jesse James Garrett 網站上的圖。上面是傳統互動式網頁的運作狀況,每一次的動作,都需要傳送到伺服器端,等到伺服器端回應用,才能繼續進行;下方則是 Ajax 的運作模型,使用者的資料傳送到伺服器端時,並不會打斷使用者的操作,還是可以繼續做別的事情!這也是 Asynchronous(非同步)的好處了!

而在 Heresy 看來,把它發揚光大的應該就是 Google 了!GMail、Google Maps 等等,都大量地使用了這樣的技術;到了現在所謂的 Web 2.0 的時代,網頁上沒有用到 Ajax 好像也變成滿落伍了…

而由於它基本上就是由 JavaScript、DOM、XML 所組成的,所以如果這三者都熟系的話,要開始寫 Ajax 網頁應該不會有太大的問題!而由於這篇不是打算教怎麼用 AJAX 的,所以想學的人,請參考文末參考資料的聯結吧∼

簡介就到此結束,接下來,算是一些 Heresy 學寫 Ajax 的感想吧∼

  1. 請熟悉 JavaScript
    雖然 Ajax 是複合技術,要用到的東西滿多的,但是 Heresy 真的覺得其實只要 JavaScript 夠熟系,就差不多沒問題了!(偏偏 Heresy 不熟)
  2. IE 真的很討厭
    這點算是 Heresy 第一次體認到吧…以往寫網頁的時候,由於沒什麼在用 JavaScript,所以頂多排版有點變化,不至於出大問題;但是現在要寫 Ajax,就遇到了許多 IE 和其他瀏覽器行為不相同的問題。
    1. XMLHttpRequest 不同
      一開始的 XMLHttpRequest 物件,IE 就要特別去使用 ActiveX 的物件,而且新舊版還不同。
    2. setAttribute 使用有限制
      而在 DOM 的物件,IE 也沒辦法透過 setAttribute 這個函式來指定 callback function。
      此外,像 id 不能小寫、bgColor 的 C 一定要大寫、colSpan 的 S 一定要大寫,這些都是很讓人討厭的地方。
    3. Table 一定要有 tbody
      一般 table 直接加上 tr 就可以了,但是 IE 一定要先有一個 tbody…
  3. 直接對 innerHTML 操作很詭異
    直接寫東西到 innerHTML 裡,好像會被做檢查;像是如果只先給 <DIV>,晚一點在給 </DIV> 的話,似乎會在給 <DIV> 的時候就被自動補上 </DIV>…所以,可能還是先用一個字串來存,最後再丟給 innerHTML 會比較保險。
  4. 很難除錯
    JavaScript 要除錯滿麻煩的,好像也沒有什麼真的夠好的工具可以來輔助除錯?(有的話請告訴 Heresy)

牢騷發到這裡。實際上,Ajax 雖然可以直接用純文字編輯器從頭開始寫(Heresy 就是用 UltraEdit 來硬幹),但是實際上現在已經有不少輔助工具和現成的函式庫可以用了∼像是 jQuery 就是相當有名的一套!使用他的話,也不用自己處理瀏覽器間的差異了;另外像是 jQuery UI 則是提供了許多現成的介面,可以減少自行設計圖形介面的時間。


參考:

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *