大概從2005年迄今 , 在當時幾乎非程式人員都不知道ajax , 到現在幾乎當紅的網站都打著 ajax的名號 , 筆者印象很深刻的是 , 2006年我開始正式接觸碰ajax的時候 , 就在ajax版留下「why ajax」的文章 , 雖然沒得到什麼回應 . 後來也緊接著就寫出屬於自己包裝過的介面跟試用dojo, 很多東西並不是很難或是很高深莫測 , 有時候就只是差一個「介紹」。 如果還有認為ajax很神秘的朋友 , 這篇文章讓我們就ajax本質重新討論起, 筆者曾經在討論這個問題時被說成是個ajax基本教義者 ,不過了解工具 , 絕對是能妥善發揮工具威力的必要條件. AJAX = Asynchronous JavaScript and XML 非同步javascript & xml ──────────────────────────────── ＠ ajax 是新東西嗎？ 在ajax剛竄起來時 , 大多數人都把它當作一個新技術來講 , 但是實際上他只是個coding技巧 , 一個類iframe , 類frame的技巧. 事實上你大部分狀況可以用iframe達到非常接近的效果 , 它其實存在很久了 , 而之所以很久很久以前沒人這樣用 ,有其歷史性因素. ＠ ajax是什麼？ 我們知道傳統網頁間溝通的方法是透過 form（表單） 做submit(遞交）, 而 ajax 就是允許你不需要透過一個真正的form submit , 而透過發送要求(request) 來模擬一個form進行 get / post的處理 , 並能從request成員取得目標頁面的html source 來透過js進行對應的處理. 這代表著我們不再需要那些因為submit而來的頁面跳轉 , 而只要不斷發request , 等待伺服器給我們回應就好 , 在理論上是有可以把網站作成單一頁面的能力 , 也的確有網站這麼做 , 但是是不是應該/值得這麼做 , 我們將選擇權交給讀者 , 在文章末我們會再探討ajax所帶來的問題. 當然 , 以上這些都是都是以 javascript 為基礎進行的. ＠ajax的優點 1.即時的互動 2.簡化page loading. 將頁面切割成零碎的子頁面,僅取所需. 3.具多數共用的檔案如 核心 js檔等 , 可避免多次重複載入或讀取. 4.方便工具型（或稱application型網頁）,同時進行多種任務. 如google doc,gmail等 5.可以跟客戶炫耀你用了ajax （誤） 底下我們先來聊聊為什麼 ajax 在這幾年才比較火熱。 ＠ajax歷史因素之一：伺服器端技術的成熟度 從cgi留言板流行到現在五花八門的語言 , 甚至做到電子商務跟線上刷卡 , 這些在八九年前筆者及大眾還視為洪流猛獸敬而遠之 , 伴隨著科技的進步 , 伺服器端的支援發展出更多可能性 , 人們的接受度也提高, 很慶幸我們現在生活在這樣現代化的社會之中. ajax 的主要優點在於小幅的跨頁傳輸 , 在早期伺服器端沒辦法提供妥善的資料支援的前題下 , ajax可說是自廢武功. 有這種需求的大多投向 flash或applet的懷抱(早期applet是很火熱的), 一般而言幾乎不會特地用ajax去call一個靜態頁面. ＠ajax歷史因素之二：平台標準不一 另一方面則是ie6及firefox對xmlhttprequest的支援度不一 , 導致要取得一個要求發送者(xmlhttprequest) , 都變成一個很難的任務. 看看底下這段開發者應該不陌生的函式 ,層層包疊的try & catch 就是 每一種支援與不支援的可能性. function getXMLHttpRequest(){ var request; try { request = new XMLHttpRequest(); } catch (trymicrosoft) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (othermicrosoft) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { request = false; } } } if (!request) alert("Error initializing XMLHttpRequest!"); return request; } ＠ajax歷史因素之三：破碎的網頁設計法則尚待訓練。 ajax 等於就是把傳統一個大網站拆成片段的小網頁 , 開始把網頁 作成不只是網頁 , 而是一個「網塊」, 如果沒有ajax設計經驗的朋友 可以想像一下如 gmail或igoogle那類一塊一塊進行即時處理的區塊. 這樣的設計概念並不只是把一個小網頁給塞進去 , 而是一種需要全面性去思考的新網頁流程 , 讓我舉一個很有趣的例子. 傳統我們常常會送出submit一個頁面之後 , 確認完成再導向另一個頁面, 但是在ajax情境下 , 如果你透過ajax 非同步submit這樣的頁面 , 你就很有可能取得導向另一個頁面之後的結果！ 就ajax進行而言 , 他比較需要的是是否完成的訊號跟提示訊息, 原本我們用ajax 希望能簡化page loading的目的 , 也就達不到了. 為此其實網站開發者都還在摸索 , 希望能找出一個比較實用的開發管道. 我們接下來先介紹ajax本身的用法 , 再來繼續討論延伸的議題. ＠怎麼做 ajax ? (非同步的發出請求） 首先你需要一個request , 你可以透過本篇前文中所敘述的函式來取得. 我們先以比較簡單的get方法來做說明就好, 有需要純js 做post的資料 , 請參考 #15aVHpQB (Ajax) 這篇文章中所用到的方案。 /*取得request*/ var request= getXMLHttpRequest(); /*開啟request資料*/ request.open("GET", "target.jsp?param1=hi&param2=hello", true); /*設定當網頁讀取狀況更新時要進行的行為*/ request.onreadystatechange = function(){ /* 4是網頁完成時 */ if (request.readyState == 4) { /*正常狀況是200 , 找不到網頁是404（這數字是不是很熟悉？:p）*/ if (request.status == 200) { /*將取到的資料alert出來*/ alert(request.responseText); } else{ /*如果失敗,把失敗的頁面資訊列出來*/ alert(request.responseText); } } }; /*發送request*/ request.send(null); ＠就這樣？ 嗯 , 正如之前所說 , 他並不是個很複雜的概念 , 所以介面上也並不複雜 , 只是因為牽扯到狀態 , 所以比較沒有那麼單純. ＠等等 , 我們已經扯了這麼久 , 怎麼 jQuery到現在還沒出場啊？？？ 就猜到你會這麼問 , 在這章底下其實流程遠比工具重要 , 這也是我們花這麼多篇幅介紹流程跟歷史因素的原因 , 當然 jQuery 也有提供簡化用的方案 , 我直接介紹最常用的三個, get/post/load 就好 . $.get(url,params,callback) 要達到與之前的script一樣的效果,只需要 $.get("target.jsp?param1=hi&param2=hello", function(response){ alert(response); } ); 或者是可以把param獨立出來變成 $.get("target.jsp", {param1:"hi",param2:"hello"}, function(response){ alert(response); } ); post的部份 , 也一樣簡單. 基本上只是把字從get換成post而已. $.post("target.jsp", {param1:"hi",param2:"hello"}, function(response){ alert(response); } ); 而load 則是把某個網頁 , load後對特定元素進行html(response)的一個方法. $("#msg").load("target.jsp",{param1:"hi",param2:"hello"}); 這樣的話 , 原本的response就會直接被載入到msg裡面,適合單純讀取頁面用. http://docs.jquery.com/Ajax ＠2008/11/29補充後文 本篇原稿寫於 2008/08/19 , 但原先設定內容要探討的範圍實在是過大 , 而且也超過筆者當時甚至是目前所能完全掌握的範圍 , 跨到 ajax 以及 server side language 互動的範疇 , 更是涵蓋各種網頁流程設計的技巧 , 很多設計方針現在都尚未有所定論 , 而且像下棋一樣變化萬千 , 難以一一列出演進 . 以至於後半段的介紹遲遲難以下筆,於是將寫好的部份原稿先貼出來 , 希望有一天能夠把這一團思緒好好的整理一下再另闢文章. 筆者認為 ajax 帶來的設計模式是一股時代的洪流 , 包含flash等 RIA體系 , 它不是個很複雜的體制 , 但卻是一個極大的變革 , 以目前網路環境而言 , 也不全然是能看好的發展. 這篇文章技術成份較低 , 與其說教學或分享 , 倒不如說是代表我對ajax結構的迷惘吧！ :) -- What do you want to have ? / What do you have? 從書本中，你可以發現我的各種興趣。 從ＣＤ中，你可以瞭解我所喜歡的偶像明星。 或許從文字你很難以瞭解一個人，但從物品可以。 My PPolis , My past. http://ppolis.tw/user/Tony --

※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 221.169.78.140 ※ TonyQ:轉錄至看板 Web_Design 11/30 17:10