前言:

2006 年第一次看到Yahoo!奇摩字典文字輸入欄位的候選字時,
以為它的作法是先將資料全部下載到前端瀏覽器,
然後再用 JavaScript 適時顯示文字;
可是一次就將整本字典的資料都下載到瀏覽器的話,會耗上許多時間,
而且前端瀏覽器也不見得有足夠的空間可以放置;
後來才知道這是使用一種叫 Ajax 的技術所作成的。
到書店找了一些關於 Ajax 的書籍,可是幾乎都是在介紹 Google Map
另外書中也有提到 Ajax 的相容性問題,因此當時就沒有特別去研究。

後來看到歐萊禮有陸續出版幾本 Ajax 相關的書籍(中文版),
(2006 – Head Rush Ajax & 2008 – Head First Ajax)
雖然有購入,但一直沒時間仔細研究,
直到最近因為想寫個 Ajax 版聊天室程式,才開始研究 Ajax,
閱讀 Head Rush Ajax 並研究及 coding 測試後,寫下了一些心得。
(Head Rush Ajax 有些章節的 code 並不怎麼漂亮)

******** 建立 request 物件 ********

Ajax 的使用是透過瀏覽器的 Request 物件來傳遞及接收資料,
因此必須先用 Javascript 建立這個物件。

除了微軟 IE 之外的多數流行的瀏覽器大多是建立 XMLHttpRequest 物件,
IE 則是建立 ActiveXObject 物件,
而又因 IE 版本的不同,所要建立的 ActiveXObject 又不同,
大致上可以利用以下方式建立這個 Request 物件:
(參考 Head Rush Ajax 中文版 – Ajax 快速上手(歐萊禮))


var request=null;

try{ request=new XMLHttpRequest(); }
catch(trymicrosoft)
{
  try{ request=new ActiveXObject("Msxml2.XMLHTTP"); }
  catch(othermicrosoft)
  {
    try{ request=new ActiveXObject("Microsoft.XMLHTTP"); }
    catch(failed){ request=null; }
  }
}

if(request==null) alert("Request 物件建立失敗!");

以上簡單的幾行 code 就可以在大多數的瀏覽器上建立 request 物件,
如果需要建立多個 request 以接收多個回傳資料,
則可以將以上的 code 設定成 function,最後 return request 就行了。
有了 request 物件之後就可以準備傳輸接收資料了。

如果需要在「同一個網頁」中接收「多項回傳資料」的話,
一定要建立多個 request 物件來接收不同的回傳資料,
如果用同一個 request 接收多項回傳資料,則前面的會被後面覆蓋掉。