Ajax: Asynchronous JavaScript XML

談談Ajax這項技術概念，Ajax(第一個字母大寫)名詞代表的是「Asynchronous JavaScript + XML」，由Jesse James Garrett所創造一個新名詞，大概在2005年中對Web Application產生衝擊，大概是2006年時風靡所有的網頁設計與開發人員(2006年幾乎一堆出版社都在發行相關書籍)，現在幾乎所有的網站都會使用Ajax以提高瀏覽網頁的品質，這篇文章「adaptive path » Ajax: A New Approach to Web Applications」是最多人看也是最多人引用的一篇。

值得一提的：Ajax不需要Server端的技術支援，也就是一般的Web Server就可以支援Ajax技術，Ajax完全是用Browser的技術，目的是達到非同步的請求，提高使用者友善的瀏覽體驗。這一點是我在當時學習Ajax所疑惑的問題，與大家分享。

談到Browser，也是這篇文章所撰寫的目的：談談Ajax與JavaScript。

這裡使用jQuery 1.4.1說明如何解決跨瀏覽器的相容性問題，下方這段程式碼目的是判斷瀏覽器是否支援XMLHttpRequest物件(Extensible Markup Language / Hypertext Transfer Protocol，簡稱XMLHTTP)，如果不支援則使用ActiveXObject物件(這是Microsoft Internet Explorer特有的問題，版本IE5和IE6)。

ajaxSettings: {
 url: location.href,
 global: true,
 type: "GET",
 contentType: "application/x-www-form-urlencoded",
 processData: true,
 async: true,
 /*
 timeout: 0,
 data: null,
 username: null,
 password: null,
 traditional: false,
 */
 // Create the request object; Microsoft failed to properly
 // implement the XMLHttpRequest in IE7 (can't request local files),
 // so we use the ActiveXObject when it is available
 // This function can be overriden by calling jQuery.ajaxSetup
 xhr: window.XMLHttpRequest && (window.location.protocol !== "file:" || !window.ActiveXObject) ?
  function() {
   return new window.XMLHttpRequest();
  } :
  function() {
   try {
    return new window.ActiveXObject("Microsoft.XMLHTTP");
   } catch(e) {}
  },
 accepts: {
  xml: "application/xml, text/xml",
  html: "text/html",
  script: "text/javascript, application/javascript",
  json: "application/json, text/javascript",
  text: "text/plain",
  _default: "*/*"
 }
}

關於Ajax的底層技術也可以參考：

1. XMLHttpRequest Object：http://msdn.microsoft.com/en-us/library/ms535874(VS.85).aspx
2. Scripting and Ajax - W3C：http://www.w3.org/standards/webdesign/script
3. XMLHttpRequest：http://www.w3.org/TR/2009/WD-XMLHttpRequest-20091119/

另外，使用Ajax不外乎就是操作DOM(Document Object Model，文件物件模型)和BOM(Browser Object Model，瀏覽器物件模型)，兩者關係如下：

• BOM
• window物件(全域物件，BOM核心)
• location物件
• history物件
• screen物件
• navigator物件
• DOM(document物件)
• body物件
• cookie物件

其模型架構如清單所示，window物件之中有五個子物件，比方說要存取document的cookie物件，則用window.document.cookie的語法，而window可以省略，因為window是預設的全域物件，所有JavaScript宣告的物件基本上預設都在這個範疇內。