入門篇 Ajax 簡介。

非同步 JavaScript 及 XML(Asynchronous JavaScript and XML,AJAX)並不能稱做是種「技術」,而是 2005 年時由 Jesse James Garrett 所發明的術語,描述一種使用數個既有技術的「新」方法。這些技術包括 HTMLXHTML層疊樣式表JavaScript文件物件模型XML (en-US)XSLT (en-US) 以及最重要的 XMLHttpRequest 物件 (en-US)。 當這些技術被結合在 Ajax 模型中,Web 應用程式便能快速、即時更動介面及內容,不需要重新讀取整個網頁,讓程式更快回應使用者的操作。

雖然 X 在 Ajax 中代表 XML,但由於 JSON (en-US) 的許多優點,如輕量以及其本身就是 JavaScript 的一部分等,讓現今 JSON 比起 XML 被更廣泛的使用。JSON 與 XML 兩者都被用來在 Ajax 模型中包裝資訊。



這篇文章會指引你瞭解 Ajax 的基礎知識並提供了兩個簡單的動手做範例來入門。

使用 XMLHttpRequest API

XMLHttpRequest API 是 Ajax 的核心。這篇文章將解釋如何使用一些 Ajax 技術,例如: 分析及處理伺服器回應

Fetch API

Fetch API 提供了取得資源(fetching resources)的介面(interface)。這似乎對於曾使用過 XMLHTTPRequest 的人而言並不陌生,然而這個 API 提供一個更強大且彈性的功能集。

Server-sent events (en-US)

傳統上來說,一個網頁必須送出 request 到伺服器來得到新的資料,也就是說,網頁藉由 server-sent 事件從伺服器請求 (request) 資料,伺服器在任何時候都能送新的資料給網頁,藉由推送訊息到網頁。這些傳入的訊息可以被視為網頁中的 事件 (en-US) + 資料,請參見 使用 server-sent event (en-US)

Pure-Ajax navigation example (en-US)

This article provides a working (minimalist) example of a pure-Ajax website composed only of three pages.

Sending and Receiving Binary Data (en-US)

The responseType property of the XMLHttpRequest object can be set to change the expected response type from the server. Possible values are the empty string (default), "arraybuffer", "blob", "document", "json", and "text". The response property will contain the entity body according to responseType, as an ArrayBuffer, Blob, Document, JSON, or string. This article will show some Ajax I/O techniques.

XML (en-US)

可擴展標記語言(The Extensible Markup Language, XML)是 W3C 推薦的用於創建特殊用途標記語言的通用標記語言。它是 SGML 的簡化子集,能夠描述許多不同類型的數據。其主要目的是促進不同系統間的數據共享,特別是通過網際網路連接的系統。


JXON 代表無損耗 Javascript XML Object Notation, 是一個通用名稱,用來定義使用 XML 的 Javascript 物件樹(JSON) 的通用名稱。

解析和序列化 XML (en-US)

如何從一串字串,一個檔案中透過 Javascript 解析一個 XML 文件 ,以及如何將 XML 檔案序列化成字串、Javascript 物件樹(JXON) 或檔案。

XPath (en-US)

XPath stands for XML Path Language, it uses a non-XML syntax that provides a flexible way of addressing (pointing to) different parts of an XML (en-US) document. As well as this, it can also be used to test addressed nodes within a document to determine whether they match a pattern or not.

The FileReader API (en-US)

The FileReader API lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File (en-US) or Blob (en-US) objects to specify the file or data to read. File objects may be obtained from a FileList (en-US) object returned as a result of a user selecting files using the "><input> (en-US) element, from a drag and drop operation's DataTransfer object, or from the mozGetAsFile() API on an HTMLCanvasElement (en-US).

HTML in XMLHttpRequest (en-US)

The W3C XMLHttpRequest specification adds HTML parsing support to XMLHttpRequest, which originally supported only XML parsing. This feature allows Web apps to obtain an HTML resource as a parsed DOM using XMLHttpRequest.

Other resources

Other Ajax resources you may find useful.


Alternate Ajax Techniques

Most articles on Ajax have focused on using XMLHttp as the means to achieving such communication, but Ajax techniques are not limited to just XMLHttp. There are several other methods.

Ajax: A New Approach to Web Applications

Jesse James Garrett, of adaptive path, wrote this article in February 2005, introducing Ajax and its related concepts.

A Simpler Ajax Path

"As it turns out, it's pretty easy to take advantage of the XMLHttpRequest object to make a web app act more like a desktop app while still using traditional tools like web forms for collecting user input."

Ajax Mistakes

Alex Bosworth has written this article outlining some of the mistakes Ajax application developers can make.

Tutorial with examples.


XMLHttpRequest specification

W3C Working draft