---
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="/zh-CN/docs/Web/CSS">CSS</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>, <a href="/zh-CN/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="/zh-CN/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>

<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>

<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>