AJAX 是什麼？

Web 進化論

老式做法

傳統網頁無論新增、修改、換頁，以及排序都會有頁面重新讀取的動作 (範例)。在過去如果我們希望頁面不重新讀取、達成上述動作時，就必須藉助如「開新視窗」、「Frame 或 Iframe」、「Cookie」等方式來達成我們的目標。但不論是用那種方式，都一樣是送出一個 Request 給 Server。只是這些方式都必須產生一些不必要的元素（框架、新視窗、破圖），感覺像是一種 Hack、並不是很正規的做法。

Web 2.0 的現在

現今我們有看到許多像 Yahoo! Map、Google Calendar 等「網路應用程式」（使用習慣類似電腦中的應用程式），如果我們還是使用過去的老式做法，頁面上一定會一大堆隱藏的 Iframe 或跳出一大堆視窗。幸好，現在我們有了 AJAX，簡單來說我們可以直接用 Javascript 去發出一個 Request，不需要產生許多累贅的東西。

回到最上層

AJAX 名詞

XMLHttpRequest

微軟在 IE5 內建了一個 XMLHttpRequest 的 ActiveX 物件，讓 Javascript 可以直接傳送以及接收 XML 文件，初次用於 Outlook Web Access。如此一來就為 Javascript 賦予送出 Request 的能力。而雖然 XMLHttpRequest 以 XML 開頭，其實 Request / Receive 並不需要一定是 XML 的格式，只要是文字便可使用。

同步與非同步

XMLHttpRequest 有兩種模式：同步 (Synchronous) 與非同步 (Asynchronous)。在 Javascript 中，同步可以以 alert()、confirm()、prompt() 等方法為例，也就是當你一執行這幾種方法，再還沒有按下確定或取消之前，下一行的程式碼都不會被執行，可以說是獨佔性的方法。

如果我們是採用同步式的 XMLHttpRequest，整個頁面必須等到 Server 傳回資料之後，才會繼續處理（以生活+為例，在拖曳地圖後，若資料還沒傳回，使用者是無法在頁面上做任何事的）。

如果是非同步 (Asynchronous) 我們則可以 setTimeout （計時器）為例，當執行了 setTimeout，不會有任何的等待時間、而會繼續執行下面的程式碼，等待時間到後，才會執行指定的 function。

所以如果我們是採用非同步式的 XMLHttpRequest，我們就不需要等待 Server 端傳送資料完畢，使用者仍然可以在頁面上繼續動作。

所以... AJAX 就是...

AJAX 只是一個商業化的名詞，全名就是 Asynchronous JavaScript XMLHttpRequest，簡單說來就是非同步的 XMLHttpRequest。

那為什麼會針對非同步呢？其實是因為同步的風險太高了，如果 Server 因為某些因素（Server負荷過大、程式錯誤...）遲遲不傳回來，那整個頁面就會無法操作，演變類似當掉的感覺。但非同步比較好的一點，如果遲遲沒有傳回來，頂多就丟掉這個 Request 即可，不會造成整個網頁無法使用。

回到最上層

AJAX 運作

示意圖

AJAX 示意圖解釋：

由 Web Page 觸發 Javascript
Javascript 呼叫 XMLHttpRequest 物件
XMLHttpRequest 物件發出一個非同步的 Request 給 Server（此時 Javascript 會繼續往下執行）
一旦 Server 輸出內容、就將所輸出的字串傳回給 XMLHttpRequest 物件
XMLHttpRequest 物件會去尋找預先定義好的 Callback Function（這個 Callback Function 是負責處理成功回應的後續動作）
將處理成功的反應顯示在網頁上（端看 Callback 如何處理）

回到最上層

我的第一個 AJAX

Hello World!

首先我們先寫 demo.php，只要簡單的一行 <?php echo 'Hello World!'?> 即可

另外再開一份 demo.html，下面是此網頁的的 code

如果你用 FireFox ( 範例 ) :

如果你用 IE 6 ( 範例 ) :

<html>
                    <head><title>Hello World! AJAX !!</title></head>
                    <body>
                    <script>
                    
                    </script>
                    </body>
                    </html>

來整合一下吧～ ( 範例 )

<html>
                    <head><title>Hello World! AJAX !!</title></head>
                    <body>
                    <script>
                    // 這個就是 AJAX 的主要處理程序
                    var makeRequest = function(sUrl,fCallback) {
                        // 如果有內建 window.XMLHttpRequest 物件，就表示是 Firefox 或 Safari...
                        if(window.XMLHttpRequest) {
                            var oXhr = new XMLHttpRequest();
                            oXhr.onload = fCallback(oXhr);
                        }
                        // 如果沒有，那就是 IE6
                        else {
                            var oXhr = new ActiveXObject("Microsoft.XMLHTTP");
                            oXhr.onreadystatechange = function() {
                                if (oXhr.readyState == 4) {
                                   if (oXhr.status == 200) {
                                       fCallback(oXhr);
                                   };
                                };
                            };
                        };
                        oXhr.open('GET', sUrl, true);
                        oXhr.send(null);
                    };
                    // 依照不同的 Request, 可以制定不同的 Callback 函式
                    var fCallback = function(oXhr) {
                        document.write(oXhr.responseText);
                    };
                    // 發出一個 Request
                    makeRequest('demo.php',fCallback);
                    </script>
                    </body>
                    </html>

經過整合，我們整理出主要的 makeRequest 函式、再搭配自訂的 Callback 處理函式，就可以重複使用 AJAX、也可以相容於 IE、FireFox、Safari 等瀏覽器。

但是... 事情並沒有這麼簡單

上面的寫法似乎可以幫我們解決大多數的問題，但是，我必須誠實地告訴你、事情並沒有這麼簡單。

瀏覽器相容的問題 : 眼尖的人可能會發現，上面並沒有處理 IE 7 的問題。以及 Safari, IE6, Firefox 以外瀏覽器是否可使用...
Request 控管的問題 : 當是一個複雜的 Web Application 時，我們可能會一次發出很多個 Request，這時管理 Request 就是一個大問題、因為 AJAX 是非同步的，第一個發出的 Request 並不代表會是第一個回來的！上面的範例並沒有幫你控管、或篩選失敗的連線。

如果要妥善解決以上的問題，那勢必得花上許多功夫。那麼為何我們不去使用現有的一些 Javascript Libray 呢？像 Yahoo! User Interface、Prototype、、Dojo 都有類似的 AJAX Library，上述的問題便能迎刃而解了～

回到最上層