[心得]從 js 到 jQuery 之八：AJAX 非同步的傳輸

[TonyQ (沉默是金)]

        大概從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
推 cloudccw:推推
推 bazoo:酷  推一個先
推 iambonnie:未看先推~~
推 CKone1209:大推！喜歡這一系列文
推 icycandle:喔喔喔喔喔，未看先推啊！
推 asuka05:整理的不錯
※ TonyQ:轉錄至看板 Web_Design                                     11/30 17:10