aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/guide/ajax
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
commit33058f2b292b3a581333bdfb21b8f671898c5060 (patch)
tree51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/guide/ajax
parent8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff)
downloadtranslated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip
initial commit
Diffstat (limited to 'files/zh-cn/web/guide/ajax')
-rw-r--r--files/zh-cn/web/guide/ajax/getting_started/index.html273
-rw-r--r--files/zh-cn/web/guide/ajax/index.html93
2 files changed, 366 insertions, 0 deletions
diff --git a/files/zh-cn/web/guide/ajax/getting_started/index.html b/files/zh-cn/web/guide/ajax/getting_started/index.html
new file mode 100644
index 0000000000..4aed922902
--- /dev/null
+++ b/files/zh-cn/web/guide/ajax/getting_started/index.html
@@ -0,0 +1,273 @@
+---
+title: Getting Started
+slug: Web/Guide/AJAX/Getting_Started
+translation_of: Web/Guide/AJAX/Getting_Started
+---
+<div>{{DefaultAPISidebar("XMLHttpRequest")}}</div>
+
+<p class="summary">这篇文章旨在帮助你了解AJAX基础,并提供两个可上手的简单案例供你学习。</p>
+
+<h2 id="什么是AJAX?">什么是AJAX?</h2>
+
+<p>AJAX是异步的JavaScript和XML(<strong>A</strong>synchronous <strong>J</strong>avaScript <strong>A</strong>nd <strong>X</strong>ML)。简单点说,就是使用 <code><a href="/en/DOM/XMLHttpRequest">XMLHttpRequest</a></code> 对象与服务器通信。 它可以使用JSON,XML,HTML和text文本等格式发送和接收数据。AJAX最吸引人的就是它的“异步”特性,也就是说它可以在不重新刷新页面的情况下与服务器通信,交换数据,或更新页面。</p>
+
+<p>你可以使用AJAX最主要的两个特性做下列事:</p>
+
+<ul>
+ <li>在不重新加载页面的情况下发送请求给服务器。</li>
+ <li>接受并使用从服务器发来的数据。</li>
+</ul>
+
+<h2 id="Step_1_–_怎样发送http请求">Step 1 – 怎样发送http请求</h2>
+
+<p>为了使用JavaScript向服务器发送一个http请求,你需要一个包含必要函数功能的对象实例。这就是为什么会有 <code>XMLHttpRequest</code> 的原因。 这是IE浏览器的ActiveX对象 <code>XMLHTTP</code>的前身。 随后Mozilla,Safari和其他浏览器也都实现了类似的方法,被称为 <code>XMLHttpRequest</code> 。同时,微软也实现了XMLHttpRequest方法。</p>
+
+<pre class="brush: js">// Old compatibility code, no longer needed.
+if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
+ httpRequest = new XMLHttpRequest();
+} else if (window.ActiveXObject) { // IE 6 and older
+ httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
+}
+</pre>
+
+<div class="note"><strong>Note: 上面代码只是简单版的如何创建一个XMLHttp实例。更实际的例子,请看本篇文章的step 3。</strong></div>
+
+<p>发送一个请求后,你会收到响应。在这一阶段,你要告诉XMLHttp请求对象是由哪一个JavaScript函数处理响应,在设置了对象的 <code>onreadystatechange </code>属性后给他命名,当请求状态改变时调用函数。</p>
+
+<pre class="brush: js"><code>httpRequest.onreadystatechange = nameOfTheFunction;</code></pre>
+
+<p>要注意的是,函数名后没有参数,因为你把一个引用赋值给了函数,而不是真正的调用了它。 此外,如果不使用函数名的方式,你还可以用JavaScript的匿名函数响应处理的动作,就像下面这样:</p>
+
+<pre class="brush: js">httpRequest.onreadystatechange = function(){
+ // Process the server response here.
+};
+</pre>
+
+<p>接下来,声明当你接到响应后要做什么,你要发送一个实际的请求,通过调用HTTP请求对象的 <code>open()</code> 和 <code>send()</code> 方法,像下面这样:</p>
+
+<pre class="brush: js">httpRequest.open('GET', 'http://www.example.org/some.file', true);
+httpRequest.send();
+</pre>
+
+<ul>
+ <li><code>open()</code> 的第一个参数是HTTP请求方法 - 有GET,POST,HEAD以及服务器支持的其他方法。 保证这些方法一定要是大写字母,否则其他一些浏览器(比如FireFox)可能无法处理这个请求。更多关于HTTP的请求方法,可以查看 <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html">W3C specs</a>。</li>
+ <li>第二个参数是你要发送的URL。由于安全原因,默认不能调用第三方URL域名。 确保你在页面中使用的是正确的域名,否则在调用 <code>open()</code> 方法是会有 "permission denied" 错误提示。一个容易犯的错误是你企图通过 <code>domain.tld</code> 访问网站, 而不是使用 <code>www.domain.tld</code>。如果你真的需要向另一个域名发送请求, 可以查看 <a href="/En/HTTP_access_control">HTTP access control</a>。</li>
+ <li>第三个参数是可选的,用于设置请求是否是异步的。如果设为 <code>true</code> (默认值),即开启异步,JavaScript就不会在此语句阻塞,使得用户能在服务器还没有响应的情况下与页面进行交互。</li>
+</ul>
+
+<p><code>send()</code> 方法的参数可以是任何你想发送给服务器的内容,如果是 <code>POST</code> 请求的话。发送表单数据时应该用服务器可以解析的格式,像查询语句:</p>
+
+<pre><code>"name=value&amp;anothername="+encodeURIComponent(myVar)+"&amp;so=on"</code></pre>
+
+<p>或者其他格式, 类似 <code>multipart/form-data</code>,JSON,XML等。</p>
+
+<p>如果你使用 POST 数据,那就需要设置请求的MIME类型。比如,在调用 <code>send()</code> 方法获取表单数据前要有下面这个:</p>
+
+<pre class="brush: js">httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+</pre>
+
+<h2 id="Step_2_–_处理服务器响应">Step 2 – 处理服务器响应</h2>
+
+<p>在发送请求时,你提供的JavaScript函数名负责处理响应:</p>
+
+<pre class="brush: js">httpRequest.onreadystatechange = nameOfTheFunction;
+</pre>
+
+<p>这个函数应该做什么?首先,函数要检查请求的状态。如果状态的值是 <code>XMLHttpRequest.DONE</code> (对应的值是4),意味着服务器响应收到了并且是没问题的,然后就可以继续执行。</p>
+
+<pre class="brush: js">if (httpRequest.readyState === XMLHttpRequest.DONE) {
+ // Everything is good, the response was received.
+} else {
+ // Not ready yet.
+}
+</pre>
+
+<p>全部readyState状态值都在 <a href="/en-US/docs/Web/API/XMLHttpRequest#Properties">XMLHTTPRequest.readyState</a>,如下也是:</p>
+
+<ul>
+ <li>0 (未初始化) or (<strong>请求还未初始化</strong>)</li>
+ <li>1 (正在加载) or (<strong>已建立</strong><strong>服务器链接</strong>)</li>
+ <li>2 (加载成功) or (<strong>请求已接受</strong>)</li>
+ <li>3 (交互) or (<strong>正在处理请求</strong>)</li>
+ <li>4 (完成) or (<strong>请求已完成并且响应已准备好</strong>)</li>
+</ul>
+
+<p>(<a class="external" href="http://msdn.microsoft.com/en-us//library/ms534361%28en-us,VS.85%29.aspx">Source</a>)</p>
+
+<p>接下来,点击HTTP响应的 <a href="/en/HTTP#HTTP_Response_Codes">response code</a>。 可能的响应码都已经列在 <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html">W3C</a>这个列表里。在下面的例子中,我们通过检查响应码 <code>200 OK</code> 判断AJAX有没有成功。</p>
+
+<pre class="brush: js">if (httpRequest.status === 200) {
+ // Perfect!
+} else {
+ // There was a problem with the request.
+ // For example, the response may have a 404 (Not Found)
+ // or 500 (Internal Server Error) response code.
+}</pre>
+
+<p>在检查完请求状态和HTTP响应码后, 你就可以用服务器返回的数据做任何你想做的了。你有两个方法去访问这些数据:</p>
+
+<ul>
+ <li><code>httpRequest.responseText</code> – 服务器以文本字符的形式返回</li>
+ <li><code>httpRequest.responseXML</code> – 以 XMLDocument 对象方式返回,之后就可以使用JavaScript来处理</li>
+</ul>
+
+<p>注意上面这一步只在你发起异步请求时有效(即 <code>open()</code> 的第三个参数未特别指定或设为 <code>true</code>)。如果你你发起的是<strong>同步</strong>请求则不必使用函数,但是非常不推荐这样子做,它的用户体验很糟糕。</p>
+
+<h2 id="Step_3_–_一个简单的例子">Step 3 – 一个简单的例子</h2>
+
+<p>让我们把所有的知识都集中起来做一个简单的HTTP请求。这个JavaScript会请求一个HTML文档 <code>test.html</code>,包含 "I'm a  test" 内容。然后我们 <code>alert()</code> 响应的内容。注意这个例子我们只是用了JavaScript,没有用jQuery。而且,HTML,XML和PHP文件都要放在用一个目录下。</p>
+
+<pre class="brush: html">&lt;button id="ajaxButton" type="button"&gt;Make a request&lt;/button&gt;
+
+&lt;script&gt;
+(function() {
+ var httpRequest;
+ document.getElementById("ajaxButton").addEventListener('click', makeRequest);
+
+ function makeRequest() {
+ httpRequest = new XMLHttpRequest();
+
+ if (!httpRequest) {
+ alert('Giving up :( Cannot create an XMLHTTP instance');
+ return false;
+ }
+ httpRequest.onreadystatechange = alertContents;
+ httpRequest.open('GET', 'test.html');
+ httpRequest.send();
+ }
+
+ function alertContents() {
+ if (httpRequest.readyState === XMLHttpRequest.DONE) {
+ if (httpRequest.status === 200) {
+ alert(httpRequest.responseText);
+ } else {
+ alert('There was a problem with the request.');
+ }
+ }
+ }
+})();
+&lt;/script&gt;
+</pre>
+
+<p>在这个例子中:</p>
+
+<ul>
+ <li>用户点击 “Make a request” 按钮;</li>
+ <li>事件处理调用 <code>makeRequest()</code> 函数;</li>
+ <li>请求已通过然后(<code>onreadystatechange</code>)传给 <code>alertContents()</code> 执行。</li>
+ <li><code>alertContents()</code> 检查返回的响应是否OK,然后 <code>alert()</code> <code>test.html</code> 文件内容。</li>
+</ul>
+
+<div class="note"><strong>Note</strong>: 如果你向一个代码片段发送请求,将返回XML,而不是静态XML文件,在IE浏览器上则必须要设置响应头才能正常工作。如果不设置响应头为 <code>Content-Type:application/xml</code> ,IE浏览器会在你访问XML元素时抛出 “Object Expected” 错误。</div>
+
+<div class="note"><strong>Note 2</strong>: 如果不设置响应头 <code>Cache-Control: no-cache</code> 浏览器将会把响应缓存下来而且再也无法重新提交请求。你也可以添加一个总是不同的 GET 参数,比如时间戳或者随机数 (详情见 <a href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache">bypassing the cache</a>)</div>
+
+<div class="note"><strong>Note 3</strong>: 如果变量 <code>httpRequest</code> 在全局范围内使用,它会在 <code>makeRequest()</code> 函数中被相互覆盖,从而导致资源竞争。为了避免这个情况,请在包含 AJAX 函数的<a href="/zh-CN/docs/Web/JavaScript/Closures">闭包</a>中声明 <code>httpRequest </code>变量。</div>
+
+<p>在通信错误的事件中(例如服务器宕机),在访问响应状态 onreadystatechange 方法中会抛出一个例外。为了缓和这种情况,则可以使用 <code>try...catch</code> 把 <code>if...then</code> 语句包裹起来。</p>
+
+<pre class="brush: js">function alertContents() {
+ try {
+ if (httpRequest.readyState === XMLHttpRequest.DONE) {
+ if (httpRequest.status === 200) {
+ alert(httpRequest.responseText);
+ } else {
+ alert('There was a problem with the request.');
+ }
+ }
+ }
+ catch( e ) {
+ alert('Caught Exception: ' + e.description);
+ }
+}
+</pre>
+
+<h2 id="Step_4_–_处理_XML_响应">Step 4 – 处理 XML 响应</h2>
+
+<p>在上一个例子中,在收到HTTP请求的响应后我们会请求对象的 <code>responseText</code> 属性,包含 <code>test.html</code> 文件的内容。现在我们试试 <code>responseXML </code>属性。 </p>
+
+<p>首先,我们创建一个稍后将要请求的有效的 XML 文档。文档(<code>test.html</code>)包含以下内容:</p>
+
+<pre class="brush: html">&lt;?xml version="1.0" ?&gt;
+&lt;root&gt;
+ I'm a test.
+&lt;/root&gt;
+</pre>
+
+<p>在脚本里我们只需要把请求行改为:</p>
+
+<pre class="brush: html">...
+onclick="makeRequest('test.xml')"&gt;
+...
+</pre>
+
+<p>然后在 <code>alertContents()</code> 里,我们把 <code>alert(httpRequest.responseText)</code> 改为:</p>
+
+<pre class="brush: js">var xmldoc = httpRequest.responseXML;
+var root_node = xmldoc.getElementsByTagName('root').item(0);
+alert(root_node.firstChild.data);
+</pre>
+
+<p>这部分代码采用 <code>responseXML</code> 提供的 <code>XMLDocument</code> 对象,并使用 DOM 方法访问 XML 文档中包含的一些数据。你可以在<a href="http://www.w3clubs.com/mozdev/test.xml">这里</a>查看 <code>test.xml</code> 并且在<a href="http://www.w3clubs.com/mozdev/httprequest_test_xml.html">这里</a>更新测试代码。</p>
+
+<h2 id="Step_5_–_处理数据">Step 5 – 处理数据</h2>
+
+<p>最后,我们发送一个数据给服务器并收到响应。这次我们用 JavaScript 请求动态页面,<code>test.php</code>  并返回一个计算后的字符串 - “Hello, [user date]”,并用 <code>alert()</code> 出来。</p>
+
+<p>首先要添加一个文本到 HTML 中以方便用户输入名字:</p>
+
+<pre class="brush: html">&lt;label&gt;Your name:
+  &lt;input type="text" id="ajaxTextbox" /&gt;
+&lt;/label&gt;
+&lt;span id="ajaxButton" style="cursor: pointer; text-decoration: underline"&gt;
+  Make a request
+&lt;/span&gt;
+</pre>
+
+<p>还要添加事件处理程序,从表单中获取用户数据连同服务器端的UTL一并发送给 makeRequest()  函数:</p>
+
+<pre class="brush: js">  document.getElementById("ajaxButton").onclick = function() {
+      var userName = document.getElementById("ajaxTextbox").value;
+      makeRequest('test.php',userName);
+  };
+</pre>
+
+<p>我们还要修改 <code>makeRequest()</code> 让它接受用户数据并将其发给服务器。把请求方法从 <code>GET</code> 改为 <code>POST</code>,把数据作为参数让<code> httpRequest.send()</code> 调用。</p>
+
+<pre class="brush: js"> function makeRequest(url, userName) {
+
+ ...
+
+ httpRequest.onreadystatechange = alertContents;
+ httpRequest.open('POST', url);
+ httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+ httpRequest.send('userName=' + encodeURIComponent(userName));
+ }
+</pre>
+
+<p>如果这就是服务器返回的全部内容,<code>alertContents()</code> 函数可以使用 step 3 中的相同函数写。可是,服务器会返回计算后的内容和原内容。所以,如果用户输入 “Jane” 在输入框中,那服务器就会返回如下内容:</p>
+
+<p><code>{"userData":"Jane","computedString":"Hi, Jane!"}</code></p>
+
+<p>为了在 <code>alertContents()</code> 中使用这个数据,我们可不能只是alert <code>responseText</code> ,我们要解析它并 alert <code>conputedString</code>,我们想要的属性:</p>
+
+<pre class="brush: js">function alertContents() {
+ if (httpRequest.readyState === XMLHttpRequest.DONE) {
+ if (httpRequest.status === 200) {
+ var response = JSON.parse(httpRequest.responseText);
+ alert(response.computedString);
+ } else {
+ alert('There was a problem with the request.');
+ }
+ }
+}
+</pre>
+
+<p><code>test.php 文件应该包含以下内容:</code></p>
+
+<pre class="brush: php"><code>$name = (isset($_POST['userName'])) ? $_POST['userName'] : 'no name';
+$computedString = "Hi, " . $name;
+$array = ['userName' =&gt; $name, 'computedString' =&gt; $computedString];
+echo json_encode($array);</code></pre>
+
+<p><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee;">想获取更多 DOM 方法,可以查看</span></font><code> <a class="external" href="http://www.mozilla.org/docs/dom/">Mozilla's DOM implementation</a> 文档.</code></p>
diff --git a/files/zh-cn/web/guide/ajax/index.html b/files/zh-cn/web/guide/ajax/index.html
new file mode 100644
index 0000000000..875ee9c9d6
--- /dev/null
+++ b/files/zh-cn/web/guide/ajax/index.html
@@ -0,0 +1,93 @@
+---
+title: Ajax
+slug: Web/Guide/AJAX
+translation_of: Web/Guide/AJAX
+---
+<div class="callout-box"><strong><a href="/en-US/docs/AJAX/Getting_Started" title="en-US/docs/AJAX/Getting_Started">新手入门</a></strong><br>
+ Ajax简介</div>
+
+<div>
+<p>Asynchronous JavaScript + XML(异步JavaScript和XML), 其本身不是一种新技术,而是一个在 2005年被Jesse James Garrett提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括: <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="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS">CSS</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model">DOM</a>, <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a>, <a href="/en-US/docs/XSLT" title="en-US/docs/XSLT">XSLT</a>, 以及最重要的 {{domxref("XMLHttpRequest")}}。当使用结合了这些技术的AJAX模型以后, 网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面。这使得程序能够更快地回应用户的操作。</p>
+
+<p>尽管X在Ajax中代表XML, 但由于{{glossary("JSON")}}的许多优势,比如更加轻量以及作为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="https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started">新手入门</a></dt>
+ <dd>本文将为您引导完成ajax基础知识,并为您提供两个简单的实际操作示例。</dd>
+ <dt><a href="/zh-CN/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest">使用XMLHttpRequest API</a></dt>
+ <dd>{{domxref("XMLHttpRequest")}}<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest" title="XMLHttpRequest"> API</a>是Ajax的核心。本文将解释如何使用一些Ajax技术,比如:
+ <ul>
+ <li><a href="/zh-CN/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Handling_responses">分析和操纵服务器响应</a></li>
+ <li><a href="/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress">监控请求过程</a></li>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#提交表单和上传文件"> 提交表单或者上传二进制文件</a>– 使用纯Ajax或者{{domxref("FormData")}}对象</li>
+ <li><a href="/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Types_of_requests">创建异步或同步请求</a></li>
+ <li>在<a href="/zh-CN/docs/Web/API/Web_Workers_API">Web workers</a>中使用Ajax</li>
+ </ul>
+ </dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch API</a></dt>
+ <dd>Fetch API 提供一个获取资源的接口。对于用过 {{domxref("XMLHTTPRequest")}} 的人来说会觉得很熟悉,但这个API提供了更加强大且灵活的特性。</dd>
+ <dt><a href="/zh-CN/docs/Server-sent_events">Server-sent 事件</a></dt>
+ <dd>在过去,一个网页必须发送请求到服务器来获取新的数据,也就是说,网页必须主动向服务器请求数据。有了server-sent events之后,服务器可以向网页推送消息,使得服务器可以随时向网页传送数据。这些发送过来的消息可以看作是带有数据的<a href="/en-US/docs/DOM/event">事件</a>。参见: <a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="/en-US/docs/Server-sent_events/Using_server-sent_events">Using server-sent events</a>.</dd>
+ <dt><a href="/zh-CN/docs/Web/API/History_API/Example">纯 Ajax 导航示例 </a></dt>
+ <dd>本文提供了一个仅由三个页面组成的纯Ajax网站的(简易)工作示例。</dd>
+ <dt><a href="/zh-CN/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data">发送和接收二进制数据</a></dt>
+ <dd>可以设置 <code>XMLHttpRequest</code> 对象的 <code>responseType</code> 属性以改变从服务器端获取数据的类型。可接受的值为空字符串(默认)、<code>arraybuffer</code>、<code>blob</code>、<code>document</code>、<code>json</code> 以 及 <code>text</code>。 <code>response</code> 属性性根据 <code>responseType</code> 的值成为对应的数据对象,如 <code>ArrayBuffer<font face="Arial, x-locale-body, sans-serif">,</font></code><code>Blob</code>、 <code>Document</code>、 <code>JSON</code> 或者 <code>string</code> 。本文会展示一些Ajax I/O技术。</dd>
+ <dt><a href="/zh-CN/docs/Glossary/XML">XML</a></dt>
+ <dd>The <strong>Extensible Markup Language (XML)</strong> 可扩展标记语言是W3C推荐的一种专用于创建专用标记语言的通用标记语言 。它是SGML的简化子集,能够描述许多不同类型的数据。其主要目的是促进在不同的系统,尤其是通过互联网连接的系统间的数据共享。</dd>
+ <dt><a href="/zh-CN/docs/Web/Guide/Parsing_and_serializing_XML">解析和序列化 XML</a></dt>
+ <dd>如何从字符串,文件或者Javascript中解析XML文档,以及如何将XML文档序列转化为字符串,Javascript对象树 (JSON)或者文件 。</dd>
+ <dt><a href="/zh-CN/docs/Web/XPath">XPath</a></dt>
+ <dd>XPath 代表<strong>X</strong>ML <strong>Path</strong> Language,它使用非XML 语法,提供了一种灵活的方式来寻址(指向)XML文档的不同部分。除此之外,它还可以用于测试文档中的寻址节点,以确定他们是否匹配模式。</dd>
+ <dt>{{domxref("FileReader")}}<a href="/zh-CN/docs/WEB/API/FileReader"> API</a></dt>
+ <dd> <code>FileReader</code> API允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓存)的内容,使用 {{domxref("File")}} 或 {{domxref("Blob")}} 对象指定要读取的文件或数据。文件对象可以从用户选择文件后的 {{HTMLElement("input")}} 元素的 {{domxref("FileList")}} 对象中获取,也可以从拖放操作的 {{domxref("DataTransfer")}} 对象获取,或者从{{domxref("HTMLCanvasElement")}} 的<code>mozGetAsFile()</code> API获取。</dd>
+ <dt><a href="/zh-CN/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">XMLHttpRequest对HTML的支持</a> </dt>
+ <dd>W3C <a href="https://xhr.spec.whatwg.org/">XMLHttpRequest</a>规范向XMLHttpRequest添加了HTML解析支持,XMLHttpRequest原本只支持XML解析。此功能允许Web应用程序使用XMLHttpRequest获取HTML资源作为解析的DOM。</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/zh-CN/docs/tag/AJAX" title="zh-CN/docs/tag/AJAX">View All...</a></span></p>
+
+<h2 class="Other" id="参见">参见</h2>
+
+<dl>
+ <dt><a href="https://pdfs.semanticscholar.org/c440/ae765ff19ddd3deda24a92ac39cef9570f1e.pdf">Ajax: A New Approach to Web Applications</a></dt>
+ <dd>Jesse James Garrett在2005年2月写了这篇文章 <a href="http://www.adaptivepath.com/">adaptive path</a>,介绍了Ajax及其相关概念。</dd>
+ <dt><a href="https://xhr.spec.whatwg.org/">XMLHttpRequest Specification</a></dt>
+ <dd>WHATWG 现行标准</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Tools" id="工具">工具</h2>
+
+<ul>
+ <li class="Tools"><a href="http://www.ajaxprojects.com/">工具包和框架 </a></li>
+ <li class="Tools"><a href="http://getfirebug.com/">Firebug - Ajax / Web开发工具</a></li>
+ <li class="Tools"><a href="http://blog.monstuff.com/archives/000252.html">AJAX调试工具 </a></li>
+ <li class="Tools"><a href="Flash/AJAX Integration Kit">Flash / AJAX集成套件</a></li>
+ <li class="Tools"><a href="http://xkr.us/code/javascript/XHConn/">一个简单的XMLHTTP接口库</a></li>
+ <li class="Tools"><a href="https://github.com/axios/axios">axios</a> 基于 {{jsxref("Promise")}} 的 {{glossary("HTTP")}} 客户端,使用<code>XMLHttpRequest</code> 实现。</li>
+</ul>
+
+<p class="Tools"><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脚本</a></li>
+ <li><a href="http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=9">Ajax聊天教程</a></li>
+ <li><a href="http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=13">RSS代码与Ajax</a></li>
+ <li><a href="http://www.thinkvitamin.com/features/ajax/create-your-own-ajax-effects">创建自己的Ajax效果</a></li>
+ <li><a href="http://codinginparadise.org/weblog/2005/08/ajax-creating-huge-bookmarklets.html">Ajax:创建巨大的书签</a></li>
+ <li><a href="http://www.hotajax.org/">Ajax:Hot!Ajax有很多很酷的例子</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>