files/zh-tw/web/guide/ajax/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

---
title: Ajax
slug: Web/Guide/AJAX
translation_of: Web/Guide/AJAX
---
<div class="callout-box"><strong><a href="/zh-TW/docs/Web/Guide/AJAX/Getting_Started" title="zh-TW/docs/Web/Guide/AJAX/Getting_Started">入門篇</a></strong><br>
Ajax 簡介。</div>

<div>
<p><strong>非同步 JavaScript 及 XML（Asynchronous JavaScript and XML，AJAX）</strong> 並不能稱做是種「技術」，而是 2005 年時由 Jesse James Garrett 所發明的術語，描述一種使用數個既有技術的「新」方法。這些技術包括 <a href="/zh-TW/docs/HTML" title="zh-TW/docs/HTML">HTML</a> 或 <a href="/zh-TW/docs/XHTML" title="zh-TW/docs/XHTML">XHTML</a>、<a href="/zh-TW/docs/CSS" title="zh-TW/docs/CSS">層疊樣式表</a>、<a href="/zh-TW/docs/JavaScript" title="zh-TW/docs/JavaScript">JavaScript</a>、<a href="/zh-TW/docs/DOM" title="zh-TW/docs/DOM">文件物件模型</a>、<a href="/zh-TW/docs/XML" title="zh-TW/docs/XML">XML</a>、<a href="/zh-TW/docs/XSLT" title="zh-TW/docs/XSLT">XSLT</a> 以及最重要的 <a href="/zh-TW/docs/XMLHttpRequest" title="zh-TW/docs/XMLHttpRequest">XMLHttpRequest 物件</a>。<br>
 當這些技術被結合在 Ajax 模型中，Web 應用程式便能快速、即時更動介面及內容，不需要重新讀取整個網頁，讓程式更快回應使用者的操作。</p>

<p>雖然 X 在 Ajax 中代表 XML，但由於 <a href="/zh-TW/docs/JSON" title="https://developer.mozilla.org/en-US/docs/JSON">JSON</a> 的許多優點，如輕量以及其本身就是 JavaScript 的一部分等，讓現今 JSON 比起 XML 被更廣泛的使用。JSON 與 XML 兩者都被用來在 Ajax 模型中包裝資訊。</p>
</div>

<div class="row topicpage-table">
<div class="section">
<h2 class="Documentation" id="文件">文件</h2>

<dl>
 <dt><a href="/zh-TW/docs/AJAX/Getting_Started" title="zh-TW/docs/AJAX/Getting_Started">入門篇</a></dt>
 <dd>這篇文章會指引你瞭解 Ajax 的基礎知識並提供了兩個簡單的動手做範例來入門。</dd>
 <dt><a href="/zh-TW/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="/zh-TW/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest">使用 XMLHttpRequest API</a></dt>
 <dd><a href="/zh-TW/docs/DOM/XMLHttpRequest" title="XMLHttpRequest"><code>XMLHttpRequest</code> API</a> 是 Ajax 的核心。這篇文章將解釋如何使用一些 Ajax 技術，例如：
 <ul>
  <li><a href="/zh-TW/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Handling_responses" title="/zh-TW/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Handling_responses">分析及處理伺服器回應</a></li>
  <li><a href="/zh-TW/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress" title="/zh-TW/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress">監視請求進度</a></li>
  <li><a href="/zh-TW/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="/zh-TW/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">提交表單與上傳二進制檔案</a> – 使用<em>單純的</em> Ajax，或使用 <a href="/zh-TW/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> 物件</li>
  <li><a href="/zh-TW/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Types_of_requests" title="/zh-TW/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Types_of_requests">建立同步或非同步請求</a></li>
  <li>在 <a href="/en-US/docs/DOM/Worker" title="/zh-TW/docs/DOM/Worker">Web workers</a> 中使用 Ajax</li>
 </ul>
 </dd>
 <dt><a href="/zh-TW/docs/Web/API/Fetch_API">Fetch API</a></dt>
 <dd>Fetch API 提供了取得資源（fetching resources）的介面（interface）。這似乎對於曾使用過 {{domxref("XMLHTTPRequest")}} 的人而言並不陌生，然而這個 API 提供一個更強大且彈性的功能集。</dd>
 <dt><a href="/en-US/docs/Server-sent_events" title="/en-US/docs/Server-sent_events">Server-sent events</a></dt>
 <dd>傳統上來說，一個網頁必須送出 request 到伺服器來得到新的資料，也就是說，網頁藉由server-sent 事件從伺服器請求 (request) 資料，伺服器在任何時候都能送新的資料給網頁，藉由推送訊息到網頁。這些傳入的訊息可以被視為網頁中的 <em><a href="/en-US/docs/DOM/event" title="DOM/Event">事件</a></em> + 資料，請參見 <a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="/en-US/docs/Server-sent_events/Using_server-sent_events">使用server-sent event </a>。</dd>
 <dt><a href="/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history/Example" title="/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history/Example"><em>Pure-Ajax</em> navigation example</a></dt>
 <dd>This article provides a working (minimalist) example of a <em>pure-Ajax</em> website composed only of three pages.</dd>
 <dt><a href="/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data" title="/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data">Sending and Receiving Binary Data</a></dt>
 <dd>The <code>responseType</code> property of the XMLHttpRequest object can be set to change the expected response type from the server. Possible values are the empty string (default), <code>"arraybuffer"</code>, <code>"blob"</code>, <code>"document"</code>, <code>"json"</code>, and <code>"text"</code>. The <code>response</code> property will contain the entity body according to <code>responseType</code>, as an <code>ArrayBuffer</code>, <code>Blob</code>, <code>Document</code>, <code>JSON</code>, or string. This article will show some Ajax I/O techniques.</dd>
 <dt><a href="/en-US/docs/XML" title="XML">XML</a></dt>
 <dd>可擴展標記語言（The Extensible Markup Language, XML）是W3C推薦的用於創建特殊用途標記語言的通用標記語言。它是SGML的簡化子集，能夠描述許多不同類型的數據。其主要目的是促進不同系統間的數據共享，特別是通過網際網路連接的系統。</dd>
 <dt><a href="/en-US/docs/JXON" title="JXON">JXON</a></dt>
 <dd>JXON 代表無損耗 <strong>J</strong>avascript <strong>X</strong>ML <strong>O</strong>bject <strong>N</strong>otation, 是一個通用名稱，用來定義使用 XML 的 Javascript 物件樹(JSON) 的通用名稱。</dd>
 <dt><a href="/en-US/docs/Parsing_and_serializing_XML" title="Parsing_and_serializing_XML">解析和序列化 XML</a></dt>
 <dd>如何從一串字串，一個檔案中透過 Javascript 解析一個 XML 文件  ，以及如何將 XML 檔案序列化成字串、Javascript 物件樹(JXON) 或檔案。 </dd>
 <dt><a href="/en-US/docs/XPath" title="XPath">XPath</a></dt>
 <dd>XPath stands for <strong>X</strong>ML <strong>Path</strong> Language, it uses a non-XML syntax that provides a flexible way of addressing (pointing to) different parts of an <a href="/en-US/docs/XML" title="XML">XML</a> 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.</dd>
 <dt><a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader">The <code>FileReader</code> API</a></dt>
 <dd>The <code>FileReader</code> API lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using <a href="https://developer.mozilla.org/en-US/docs/DOM/File" title="/en-US/docs/DOM/File"><code>File</code></a> or <a href="https://developer.mozilla.org/en-US/docs/DOM/Blob" title="/en-US/docs/DOM/Blob"><code>Blob</code></a> objects to specify the file or data to read. File objects may be obtained from a <a href="https://developer.mozilla.org/en-US/docs/DOM/FileList" title="/en-US/docs/DOM/FileList"><code>FileList</code></a> object returned as a result of a user selecting files using the <code><a href="https://developer.mozilla.org/en-US/docs/HTML/Element/input" title="&lt;input>">&lt;input&gt;</a></code> element, from a drag and drop operation's <a href="https://developer.mozilla.org/En/DragDrop/DataTransfer" title="En/DragDrop/DataTransfer"><code>DataTransfer</code></a> object, or from the <code>mozGetAsFile()</code> API on an <a href="https://developer.mozilla.org/en-US/docs/DOM/HTMLCanvasElement" title="/en-US/docs/DOM/HTMLCanvasElement"><code>HTMLCanvasElement</code></a>.</dd>
 <dt><a href="/en-US/docs/HTML_in_XMLHttpRequest" title="en-US/docs/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></dt>
 <dd>The W3C <a class="external" href="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">XMLHttpRequest</a> specification adds HTML parsing support to <a href="/en/DOM/XMLHttpRequest" title="en/DOM/XMLHttpRequest"><code>XMLHttpRequest</code></a>, which originally supported only XML parsing. This feature allows Web apps to obtain an HTML resource as a parsed DOM using <code>XMLHttpRequest</code>.</dd>
 <dt><a href="/en-US/docs/AJAX/Other_Resources" title="en-US/docs/AJAX/Other_Resources">Other resources</a></dt>
 <dd>Other Ajax resources you may find useful.</dd>
</dl>

<p><span class="alllinks"><a href="/en-US/docs/tag/AJAX" title="en-US/docs/tag/AJAX">View All...</a></span></p>

<h2 class="Other" id="參見">參見</h2>

<dl>
 <dt><a href="http://www.webreference.com/programming/ajax_tech/">Alternate Ajax Techniques</a></dt>
 <dd>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.</dd>
 <dt><a href="http://adaptivepath.org/ideas/ajax-new-approach-web-applications/">Ajax: A New Approach to Web Applications</a></dt>
 <dd>Jesse James Garrett, of <a href="http://www.adaptivepath.com">adaptive path</a>, wrote this article in February 2005, introducing Ajax and its related concepts.</dd>
 <dt><a href="http://www.onlamp.com/pub/a/onlamp/2005/05/19/xmlhttprequest.html">A Simpler Ajax Path</a></dt>
 <dd>"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."</dd>
 <dt><a href="http://alexbosworth.backpackit.com/pub/67688">Ajax Mistakes</a></dt>
 <dd>Alex Bosworth has written this article outlining some of the mistakes Ajax application developers can make.</dd>
 <dt><a href="http://www.xul.fr/en-xml-ajax.html">Tutorial</a> with examples.</dt>
 <dd> </dd>
 <dt><a href="http://www.w3.org/TR/XMLHttpRequest/">XMLHttpRequest specification</a></dt>
 <dd>W3C Working draft</dd>
</dl>
</div>

<div class="section">
<h2 class="Community" id="社群">社群</h2>

<ul>
 <li>View Mozilla forums...</li>
</ul>

<div>{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }}</div>

<ul>
 <li><a href="/en-US/docs/AJAX/Community" title="en-US/docs/AJAX/Community">Ajax community links</a></li>
</ul>

<h2 class="Tools" id="工具">工具</h2>

<ul>
 <li><a href="http://www.ajaxprojects.com">Toolkits and frameworks</a></li>
 <li><a href="http://www.getfirebug.com/">Firebug - Ajax/Web development tool</a></li>
 <li><a href="http://blog.monstuff.com/archives/000252.html">AJAX Debugging Tool</a></li>
 <li><a href="http://www.osflash.org/doku.php?id=flashjs">Flash/AJAX Integration Kit</a></li>
 <li><a href="http://xkr.us/code/javascript/XHConn/">A Simple XMLHTTP Interface Library</a></li>
</ul>

<p><span class="alllinks"><a href="/en-US/docs/AJAX:Tools" title="en-US/docs/AJAX:Tools">View All...</a></span></p>

<h2 id="範例">範例</h2>

<ul>
 <li><a href="http://www.dhtmlgoodies.com/index.html?whichScript=ajax-poller">Ajax poller script</a></li>
 <li><a href="http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=9">Ajax Chat Tutorial</a></li>
 <li><a href="http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=13">RSS Ticker with Ajax</a></li>
 <li><a href="http://www.thinkvitamin.com/features/ajax/create-your-own-ajax-effects">Create your own Ajax effects</a></li>
 <li><a href="http://codinginparadise.org/weblog/2005/08/ajax-creating-huge-bookmarklets.html">Ajax: Creating Huge Bookmarklets</a></li>
 <li><a href="http://www.hotajax.org">Ajax: Hot!Ajax There are many cool examples</a></li>
</ul>

<h2 class="Related_Topics" id="相關主題">相關主題</h2>

<p><a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>, <a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/DOM" title="en-US/docs/DOM">DOM</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>, <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a>, <a href="/en-US/docs/nsIXMLHttpRequest" title="en-US/docs/XMLHttpRequest">XMLHttpRequest</a>, <a href="/en-US/docs/XSLT" title="en-US/docs/XSLT">XSLT</a>, <a href="/en-US/docs/DHTML" title="en-US/docs/DHTML">DHTML</a>, <a href="/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript" title="en-US/docs/JavaScript/Same_origin_policy_for_JavaScript">Same Origin Policy</a></p>
</div>
</div>

<p>{{ListSubpages}}</p>