study/uTools-Manuals
1
0
Fork 0
mirror of https://github.com/fofolee/uTools-Manuals.git synced 2025-06-08 15:04:05 +08:00
Code Issues Packages Projects Releases Wiki Activity
uTools-Manuals/docs/jQuery/jQuery.ajax.html
fofolee 38dcd51d8a v0.0.2
2019-04-21 11:50:48 +08:00

706 lines
60 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<article class="" id="post-">
<header class="entry-header">
<h1 class="entry-title">jQuery.ajax()</h1>
<div class="entry-meta">
所属分类：<span class="category"><a href="/category/ajax/">Ajax</a> &gt; <a href="/category/ajax/low-level-interface/">底层接口</a></span>
<span class="pull-right">英文文档：<a href="https://api.jquery123.com/jQuery.ajax/" target="_blank">jQuery.ajax()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry method" id="jQuery-ajax1">
<h2 class="section-title"> <span class="name">jQuery.ajax( url [, settings ] )</span><span class="returns">返回: <a href="/Types/#jqXHR">jqXHR</a></span> </h2>
<div class="entry-wrapper">
<p class="desc"><strong>说明: </strong>执行一个异步的HTTP（Ajax）的请求。</p>
<ul class="signatures">
<li class="signature" id="jQuery-ajax-url-settings">
<h4 class="name"> <span class="version-details">添加的版本: <a href="/category/version/1.5/">1.5</a></span>jQuery.ajax( url [, settings ] )</h4>
<ul>
<li>
<div><strong>url</strong></div>
<div>类型: <a href="/Types/#String">String</a> </div>
<div>一个用来包含发送请求的URL字符串。</div>
</li>
<li>
<div><strong>settings</strong></div>
<div>类型: <a href="/Types/#PlainObject">PlainObject</a> </div>
<div>
一个以"{键:值}"组成的AJAX 请求设置。所有选项都是可选的。可以使用<a href="/jQuery.ajaxSetup">$.ajaxSetup()</a>设置任何默认参数。看<a href="#jQuery-ajax-settings">jQuery.ajax( settings )</a>下所有设置的完整列表。 </div>
</li>
</ul>
</li>
<li class="signature" id="jQuery-ajax-settings">
<h4 class="name"> <span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>jQuery.ajax( [settings ] )</h4>
<ul>
<li>
<div><strong>settings</strong></div>
<div>类型: <a href="/Types/#PlainObject">PlainObject</a> </div>
<div>
一个以"{键:值}"组成的AJAX 请求设置。所有选项都是可选的。可以使用<a href="/jQuery.ajaxSetup">$.ajaxSetup()</a>设置任何默认参数。</div>
<ul>
<li>
<div> <strong>accepts</strong> (默认: <code>取决于数据类型</code>)</div>
<div>类型: <a href="/Types/#PlainObject">PlainObject</a> </div>
<div>
内容类型发送请求头（Content-Type），用于通知服务器该请求需要接收何种类型的返回结果。如果<code>accepts</code>设置需要修改，推荐在<code>$.ajaxSetup()</code> 方法中设置一次。</div>
</li>
<li>
<div> <strong>async</strong> (默认: <code>true</code>)</div>
<div>类型: <a href="/Types/#Boolean">Boolean</a> </div>
<div>默认设置下，所有请求均为异步请求（也就是说这是默认设置为 <code>true</code> ）。如果需要发送同步请求，请将此选项设置为 <code>false</code> 。跨域请求和 <code>dataType: "jsonp"</code> 请求不支持同步操作。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。<strong>从 jQuery 1.8 开始, jqXHR (<code>$.Deferred</code>)中使用 <code> async: false </code> 已经过时。您必须使用的 success/error/complete 的回调选项代替相应的jqXHR对象的方法，比如<code>jqXHR.done()</code> 或者过时的<code>jqXHR.success()</code></strong>
</div>
</li>
<li>
<div><strong>beforeSend</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>( <a href="/Types/#jqXHR">jqXHR</a> jqXHR, <a href="/Types/#PlainObject">PlainObject</a> settings )</div>
<div>请求发送前的回调函数，用来修改请求发送前jqXHR（在jQuery 1.4.x的中，XMLHttpRequest）对象，此功能用来设置自定义 HTTP 头信息，等等。该jqXHR和设置对象作为参数传递。这是一个<a href="http://docs.jquery.com/Ajax_Events">Ajax事件</a> 。在<code>beforeSend</code>函数中返回<code>false</code>将取消这个请求。<strong>从jQuery 1.5开始，</strong> <code>beforeSend</code>选项将被访问，不管请求的类型。</div>
</li>
<li>
<div> <strong>cache</strong> (默认: <code>true, dataType为"script"和"jsonp"时默认为false</code>)</div>
<div>类型: <a href="/Types/#Boolean">Boolean</a> </div>
<div>如果设置为 false ，浏览器将不缓存此页面。<strong>注意:</strong> 设置<code>cache</code>为 false将在 HEAD和GET请求中正常工作。它的工作原理是在GET请求参数中附加"_={timestamp}"（译者注：时间戳）。该参数不是其他请求所必须的，除了在IE8中，当一个POST请求一个已经用GET请求过的URL。
</div>
</li>
<li>
<div><strong>complete</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>( <a href="/Types/#jqXHR">jqXHR</a> jqXHR, <a href="/Types/#String">String</a> textStatus )</div>
<div>请求完成后回调函数 (请求<code>success</code> 和 <code>error</code>之后均调用)。这个回调函数得到2个参数： jqXHR (在 jQuery 1.4.x中是 XMLHTTPRequest) 对象和一个描述请求状态的字符串(<code>"success"</code>, <code>"notmodified"</code>, <code>"error"</code>, <code>"timeout"</code>, <code>"abort"</code>, 或者 <code>"parsererror"</code>) 。<strong>从jQuery 1.5开始，</strong> <code>complete</code>设置可以接受一个函数的数组。每个函数将被依次调用。这是一个<a href="http://docs.jquery.com/Ajax_Events">Ajax事件</a> 。 </div>
</li>
<li>
<div><strong>contents</strong></div>
<div>类型: <a href="/Types/#PlainObject">PlainObject</a> </div>
<div>一个以"{字符串/正则表达式}"配对的对象，根据给定的内容类型，解析请求的返回结果。<span class="version-details"> (<a href="http://www.css88.com/jqapi-1.5/">1.5</a>新增)</span> </div>
</li>
<li>
<div> <strong>contentType</strong> (默认: <code>'application/x-www-form-urlencoded; charset=UTF-8'</code>)</div>
<div>类型: <a href="/Types/#String">String</a> </div>
<div>发送信息至服务器时内容编码类型。默认值是"application/x-www-form-urlencoded; charset=UTF-8"，适合大多数情况。如果你明确地传递了一个内容类型（Content-Type）给 <code>$.ajax()</code>，那么他必定会发送给服务器（即使没有数据要发送）。数据将总是使用UTF-8字符集传递给服务器；你必须在服务器端进行适当的解码。
</div>
</li>
<li>
<div><strong>context</strong></div>
<div>类型: <a href="/Types/#Object">Object</a> </div>
<div>
这个对象用于设置Ajax相关回调函数的上下文。
默认情况下，这个上下文是一个ajax请求使用的参数设置对象，（<code>$.ajaxSettings</code>合并独傲这个设置，传递给<code>$.ajax</code>）。比如指定一个DOM元素作为context参数，这样就设置了<code>complete</code>回调函数的上下文为这个DOM元素。就像这样：
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.ajax({</code></div></div><div class="container"><div class="line"><code> url: <span class="string">"test.html"</span>,</code></div></div><div class="container"><div class="line"><code> context: document.body</code></div></div><div class="container"><div class="line"><code>}).done(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> $(<span class="keyword">this</span>).addClass(<span class="string">"done"</span>);</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li>
<div> <strong>converters</strong> (默认: <code>{"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML}</code>)</div>
<div>类型: <a href="/Types/#PlainObject">PlainObject</a> </div>
<div>
一个数据类型到数据类型转换器的对象。每个转换器的值是一个函数，返回经转换后的请求结果。
<span class="version-details"> ( <a href="http://www.css88.com/jqapi-1.5/">1.5</a>新增)</span> </div>
</li>
<li>
<div> <strong>crossDomain</strong> (默认: <code>同域请求为false， 跨域请求为true</code>)</div>
<div>类型: <a href="/Types/#Boolean">Boolean</a> </div>
<div>
如果你想在同一域中强制跨域请求（如JSONP形式），例如，想服务器端重定向到另一个域，那么需要将crossDomain设置为 <code>true</code> 。<span class="version-details"> ( <a href="http://www.css88.com/jqapi-1.5/">1.5</a> 新增)</span> </div>
</li>
<li>
<div><strong>data</strong></div>
<div>类型: <a href="/Types/#Object,%20String">Object, String</a> </div>
<div>发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后面。查看 <code>processData</code> 选项说明，以禁止此自动转换。对象必须为"{键:值}"格式。如果这个参数是一个数组，jQuery会按照<code>traditional</code> 参数的值， 将自动转化为一个同名的多值查询字符串(查看下面的说明)。注：如 {foo:["bar1", "bar2"]} 转换为 '&amp;foo=bar1&amp;foo=bar2'。
</div>
</li>
<li>
<div><strong>dataFilter</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>( <a href="/Types/#Object">Object</a> data, <a href="/Types/#String">String</a> type )
=&gt; <a href="/Types/#Object">Object</a> </div>
<div>
一个函数被用来处理XMLHttpRequest的原始响应数据。这是一个预过滤功能，净化响应。您应该返回安全数据。提供data和type两个参数：data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。</div>
</li>
<li>
<div> <strong>dataType</strong> (默认: <code>Intelligent Guess (xml, json, script, or html)</code>)</div>
<div>类型: <a href="/Types/#String">String</a> </div>
<div>
预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML MIME类型就被识别为XML。在1.4中，JSON就会生成一个JavaScript对象，而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:
<ul>
<li>"xml": 返回 XML 文档，可用 jQuery 处理。.</li>
<li>"html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。</li>
<li>"script": 把响应的结果当作 JavaScript 执行。并将其当作纯文本返回。默认情况下不会通过在URL中附加查询字符串变量 "_=[TIMESTAMP]" 进行自动缓存结果，除非设置了<code>cache</code>参数为<code>true</code>。<strong>Note:</strong> 在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)</li>
<li>"json": 把响应的结果当作 JSON 执行，并返回一个JavaScript对象。在 jQuery 1.4 中，JSON 格式的数据以严格的方式解析，如果格式有错误，jQuery都会被拒绝并抛出一个解析错误的异常。（见<a href="http://json.org/">json.org</a>的更多信息，正确的JSON格式。）</li>
<li>"jsonp": 以 <a href="http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/">JSONP</a> 的方式载入 JSON 数据块。会自动在所请求的URL最后添加 "?callback=?"。默认情况下不会通过在URL中附加查询字符串变量 "_=[TIMESTAMP]" 进行自动缓存结果，除非将 <code>cache</code>参数设置为<code>true</code>。</li>
<li>"text": 返回纯文本字符串。</li>
<li>多个空格分割的值:<strong>从 jQuery 1.5 开始</strong>， jQuery可以内容类型（Content-Type）头收到并转换一个您需要的数据类型。例如，如果你想要一个文本响应为XML处理，使用"text xml"数据类型。您也可以将一个JSONP的请求，以文本形式接受，并用jQuery以XML解析: "jsonp text xml"。同样地可以使用"jsonp xml"简写,首先会尝试从 jsonp 到 xml 的转换，如果转换失败，就先将 jsonp 转换成 text, 然后再由 text 转换成 xml。</li>
</ul>
</div>
</li>
<li>
<div><strong>error</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>( <a href="/Types/#jqXHR">jqXHR</a> jqXHR, <a href="/Types/#String">String</a> textStatus, <a href="/Types/#String">String</a> errorThrown )</div>
<div>请求失败时调用此函数。有以下三个参数：jqXHR (在 jQuery 1.4.x前为XMLHttpRequest) 对象、描述发生错误类型的一个字符串 和 捕获的异常对象。如果发生了错误，错误信息（第二个参数）除了得到<code>null</code>之外，还可能是<code>"timeout"</code>, <code>"error"</code>, <code>"abort"</code> ，和 <code>"parsererror"</code>。
当一个HTTP错误发生时，<code>errorThrown</code> 接收HTTP状态的文本部分，比如： "Not Found"（没有找到） 或者 "Internal Server Error."（服务器内部错误）。 <strong>从jQuery 1.5开始</strong>, 在<code>error</code>设置可以接受函数组成的数组。每个函数将被依次调用。
<strong>注意：</strong><em>此处理程序在跨域脚本和JSONP形式的请求时不被调用。</em>这是一个 <a href="http://docs.jquery.com/Ajax_Events">Ajax Event</a>。
</div>
</li>
<li>
<div> <strong>global</strong> (默认: <code>true</code>)</div>
<div>类型: <a href="/Types/#Boolean">Boolean</a> </div>
<div>
无论怎么样这个请求将触发全局AJAX事件处理程序。默认是<code>true</code> 。设置为 <code>false</code> 将不会触发全局 AJAX 事件，如 <code>ajaxStart</code> 或者 <code>ajaxStop</code>。这可以用来控制各种 <a href="http://docs.jquery.com/Ajax_Events">Ajax Event</a>.
</div>
</li>
<li>
<div> <strong>headers</strong> (默认: <code>{}</code>)</div>
<div>类型: <a href="/Types/#PlainObject">PlainObject</a> </div>
<div>
一个额外的"{键:值}"对映射到请求一起发送。此设置会在<code>beforeSend</code> 函数调用之前被设置 ;因此，请求头中的设置值，会被<code>beforeSend</code> 函数内的设置覆盖 。 <span class="version-details"> (<a href="http://www.css88.com/jqapi-1.5/">1.5</a> 新增 ）</span>
</div>
</li>
<li>
<div> <strong>ifModified</strong> (默认: <code>false</code>)</div>
<div>类型: <a href="/Types/#Boolean">Boolean</a> </div>
<div>只有上次请求响应改变时，才允许请求成功。使用 HTTP 包 Last-Modified 头信息判断。默认值是<code>false</code>，忽略HTTP头信息。在jQuery 1.4中，他也会检查服务器指定的'etag'来确定数据没有被修改过。
</div>
</li>
<li>
<div> <strong>isLocal</strong> (默认: <code>取决于当前的位置协议</code>)</div>
<div>类型: <a href="/Types/#Boolean">Boolean</a> </div>
<div>
允许当前环境被认定为“本地”，（如文件系统），即使jQuery默认情况下不会这么做。以下协议目前公认为本地：<code>file</code>, <code>*-extension</code>, and <code>widget</code>。如果<code>isLocal</code>设置需要修改，建议在<code>$.ajaxSetup()</code>方法中这样做一次。 <span class="version-details"> (<a href="http://www.css88.com/jqapi-1.5/">1.5</a> 新增 ）</span>
</div>
</li>
<li>
<div><strong>jsonp</strong></div>
<div>类型: <a href="/Types/#String">String</a> </div>
<div>在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。<strong>在jQuery 1.5，</strong>，设置<code>jsonp</code>选项为<code>false</code>，阻止了jQuery从加入"?callback"字符串的URL或试图使用"=?"转换。在这种情况下，你也应该明确设置<code>jsonpCallback</code>设置。例如, <code>{ jsonp: false, jsonpCallback: "callbackName" }</code></div>
</li>
<li>
<div><strong>jsonpCallback</strong></div>
<div>类型: <a href="/Types/#String,%20Function">String, Function</a> </div>
<div>为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成一个独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候，指定这个回调函数名。<strong>从jQuery 1.5开始，</strong>你也可以使用一个函数作为该参数设置，在这种情况下，该函数的返回值就是<code>jsonpCallback</code>的结果。
</div>
</li>
<li>
<div><strong>mimeType</strong></div>
<div>类型: <a href="/Types/#String">String</a> </div>
<div>
一个mime类型用来覆盖<abbr title="XMLHttpRequest">XHR</abbr>的 MIME类型。<span class="version-details"> (<a href="http://www.css88.com/jqapi-1.5/">1.5</a> 新增 ）</span> </div>
</li>
<li>
<div><strong>password</strong></div>
<div>类型: <a href="/Types/#String">String</a> </div>
<div>用于响应HTTP访问认证请求的密码</div>
</li>
<li>
<div> <strong>processData</strong> (默认: <code>true</code>)</div>
<div>类型: <a href="/Types/#Boolean">Boolean</a> </div>
<div>默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 <code>false</code>。</div>
</li>
<li>
<div><strong>scriptCharset</strong></div>
<div>类型: <a href="/Types/#String">String</a> </div>
<div>
仅适用于当"script"传输使用时（例如，跨域的"jsonp"或 dataType选项为"script" 和 "GET"类型）。请求中使用在script标签上设置<code>charset</code> 属性。通常只在本地和远程的内容编码不同时使用。
</div>
</li>
<li>
<div> <strong>statusCode</strong> (默认: <code>{}</code>)</div>
<div>类型: <a href="/Types/#PlainObject">PlainObject</a> </div>
<div>
<p>一组数值的HTTP代码和函数对象，当响应时调用了相应的代码。例如，如果响应状态是404，将触发以下警报：</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.ajax({</code></div></div><div class="container"><div class="line"><code> statusCode: {</code></div></div><div class="container"><div class="line"><code> <span class="number">404</span>: <span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> alert(<span class="string">"page not found"</span>);</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>如果请求成功，状态代码对应的函数作为回调的成功相同的参数;如果在一个错误的结果，他们采取了相同的参数<code>error</code>回调。</p>
<span class="version-details"> (<a href="http://www.css88.com/jqapi-1.5/">1.5</a> 新增 ）</span></div>
</li>
<li>
<div><strong>success</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>( <a href="/Types/#Object">Object</a> data, <a href="/Types/#String">String</a> textStatus, <a href="/Types/#jqXHR">jqXHR</a> jqXHR )</div>
<div>请求成功后的回调函数。这个函数传递3个参数：从服务器返回的数据，并根据dataType参数进行处理后的数据，一个描述状态的字符串;还有 jqXHR（在jQuery 1.4.x前为XMLHttpRequest） 对象 。<strong>在jQuery 1.5，</strong> <em>成功设置可以接受一个函数数组。每个函数将被依次调用。</em>这是一个 <a href="http://docs.jquery.com/Ajax_Events">Ajax Event</a></div>
</li>
<li>
<div><strong>timeout</strong></div>
<div>类型: <a href="/Types/#Number">Number</a> </div>
<div>
设置请求超时时间（毫秒）。此设置将覆盖<a href="/jQuery.ajaxSetup">$.ajaxSetup()</a> 里的全局设置。
超时周期开始于<code>$.ajax</code> 访问成功的那个时间点；如果几个其他请求都在进步并且浏览器有没有可用的连接，它有可能在被发送前就超时了。<strong>在 jQuery 1.4.x 和前面的版本中,</strong> 如果请求超时，XMLHttpRequest对象是处于无效状态;访问任何对象的成员可能会抛出一个异常。<strong>只有在 Firefox 3.0+,</strong>script 和 JSONP请求在超时后不能被取消;该脚本将运行即使超时后到达。
</div>
</li>
<li>
<div><strong>traditional</strong></div>
<div>类型: <a href="/Types/#Boolean">Boolean</a> </div>
<div>如果你想要用传统的方式来序列化数据，那么就设置为<code>true</code>。请参考工具分类下面的<a href="/jQuery.param">jQuery.param </a>方法.</div>
</li>
<li>
<div> <strong>type</strong> (默认: <code>'GET'</code>)</div>
<div>类型: <a href="/Types/#String">String</a> </div>
<div>
请求方式 ("POST" 或 "GET")， 默认为 "GET"。<strong>注意:</strong>其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
</div>
</li>
<li>
<div> <strong>url</strong> (默认: <code>当前页面地址</code>)</div>
<div>类型: <a href="/Types/#String">String</a> </div>
<div>发送请求的地址。</div>
</li>
<li>
<div><strong>username</strong></div>
<div>类型: <a href="/Types/#String">String</a> </div>
<div>于响应HTTP访问认证请求的用户名</div>
</li>
<li>
<div> <strong>xhr</strong> (默认: <code>当可用的ActiveXObject（IE）中，否则为XMLHttpRequest</code>)</div>
<div>类型: <a href="/Types/#Function">Function</a>()</div>
<div>回调创建XMLHttpRequest对象。当可用时默认为ActiveXObject（IE）中，否则为XMLHttpRequest。提供覆盖你自己的执行的XMLHttpRequest或增强工厂。</div>
</li>
<li>
<div><strong>xhrFields</strong></div>
<div>类型: <a href="/Types/#PlainObject">PlainObject</a> </div>
<div>
<p>一对“文件名-文件值”组成的映射，用于设定原生的 <code><abbr title="XMLHttpRequest">XHR</abbr></code>对象。例如，如果需要的话，在进行跨域请求时，你可以用它来设置<code>withCredentials</code>为<code>true</code>。</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.ajax({</code></div></div><div class="container"><div class="line"><code> url: a_cross_domain_url,</code></div></div><div class="container"><div class="line"><code> xhrFields: {</code></div></div><div class="container"><div class="line"><code> withCredentials: <span class="literal">true</span></code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p><strong>在 jQuery 1.5中</strong>，<code> withCredentials</code>属性不会传递给原生的<code>XHR</code>从而对于需要使用此属性的 CORS 请求，则只能忽略这个属性。。出于这个原因，我们建议您使用jQuery1.5.1+，如果您需要使用它。</p>
<span class="version-details"> (<a href="/category/version/1.5.1/">1.5.1</a>新增)</span> </div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<div class="longdesc" id="entry-longdesc">
<p>jQuery 发送的所有 Ajax 请求，内部都会通过调用 <code>$.ajax()</code> 函数来实现。通常没有必要直接调用这个函数，可以使用几个已经封装的简便方法，如<a href="/jQuery.get"><code>$.get()</code></a>和<a href="/load"><code>.load()</code></a>。如果你需要用到那些不常见的选项，那么， <code>$.ajax()</code>使用起来更灵活。</p>
<p>在简单地说， <code>$.ajax()</code>函数可以不带参数调用：</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter"><div class="line n1">1</div></td>
<td class="code"><pre><div class="container"><div class="line"><code>$.ajax();</code></div></div>
</pre></td>
</tr>
</tbody>
</table>
</div>
<p><strong>注意:</strong> 所有的选项都可以通过<code><a href="/jQuery.ajaxSetup">$.ajaxSetup()</a></code> 函数来全局设置</p>
<p>这个例子中，不使用选项，加载当前页面的内容，但其结果没用的。若要使用结果，我们可以实现的回调功能之一。 </p>
<h4 id="jqXHR"> jqXHR 对象</h4>
<p>
<strong>从jQuery 1.5开始</strong>，<code>$.ajax()</code> 返回XMLHttpRequest（jqXHR）对象，该对象是浏览器的原生的XMLHttpRequest对象的一个超集。例如，它包含<code>responseText</code>和<code>responseXML</code>属性，以及一个<code>getResponseHeader()</code>方法。当传输机制不是是XMLHttpRequest时（例如，一个JSONP请求脚本，返回一个脚本 tag 时），jqXHR对象尽可能的模拟原生的XHR功能。 </p>
<p><strong>从jQuery 1.5.1开始</strong>， <code>jqXHR</code>对象还包含了<code>overrideMimeType</code>方法 (它在jQuery 1.4.x中是有效的，但是在jQuery 1.5中暂时的被移除)。<code>.overrideMimeType()</code> 方法可能用在<code>beforeSend()</code>的回调函数中，例如，修改响应的Content-Type信息头：</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.ajax({</code></div></div><div class="container"><div class="line"><code> url: <span class="string">"http://fiddle.jshell.net/favicon.png"</span>,</code></div></div><div class="container"><div class="line"><code> beforeSend: <span class="function"><span class="keyword">function</span> <span class="params">( xhr )</span> {</span></code></div></div><div class="container"><div class="line"><code> xhr.overrideMimeType(<span class="string">"text/plain; charset=x-user-defined"</span>);</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code>}).done(<span class="function"><span class="keyword">function</span> <span class="params">( data )</span> {</span></code></div></div><div class="container"><div class="line"><code> <span class="keyword">if</span>( console &amp;&amp; console.log ) {</code></div></div><div class="container"><div class="line"><code> console.log(<span class="string">"Sample of data:"</span>, data.slice(<span class="number">0</span>, <span class="number">100</span>));</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>从 jQuery 1.5 开始，<code>$.ajax()</code>返回的jqXHR对象 实现了 Promise 接口, 使它拥有了 Promise 的所有属性，方法和行为。（见<a href="/category/deferred-object/">Deferred object</a>获取更多信息）。为了让回调函数的名字统一，便于在<code>$.ajax()</code>中使用。jqXHR也提供<code>.error()</code> <code>.success()</code>和<code>.complete()</code>方法。这些方法都带有一个参数，该参数是一个函数，此函数在 <code>$.ajax()</code>请求结束时被调用,并且这个函数接收的参数，与调用 <code>$.ajax()</code>函数时的参数是一致。这将允许你在一次请求时，对多个回调函数进行赋值，甚至允许你在请求已经完成后，对回调函数进行赋值(如果该请求已经完成，则回调函数会被立刻调用)。</p>
<ul>
<li> <strong>jqXHR.done(function(data, textStatus, jqXHR) {});</strong>
<p>一个可供选择的 success 回调选项的构造函数，<code>.done()</code>方法取代了的过时的<code>jqXHR.success()</code>方法。请参阅<code><a href="/deferred.done">deferred.done()</a></code>的实现细节。</p>
</li>
<li> <strong>jqXHR.fail(function(jqXHR, textStatus, errorThrown) {});</strong>
<p>
一种可供选择的 error 回调选项的构造函数，<code>.fail()</code>方法取代了的过时的<code>.error()</code>方法。请参阅<code><a href="/deferred.fail">deferred.fail()</a></code>的实现细节。 </p>
</li>
<li> <strong>jqXHR.always(function(data|jqXHR, textStatus, jqXHR|errorThrown) { });</strong>
<p>
一种可供选择的 complete 回调选项的构造函数，<code>.always()</code>方法取代了的过时的<code>.complete()</code>方法。</p>
<p>
在响应一个成功的请求后，该函数的参数和<code>.done()</code>的参数是相同的：data, textStatus, 和 jqXHR 对象.对于失败的请求，参数和<code>.fail()</code>的参数是相同的：jqXHR 对象, textStatus, 和 errorThrown。请参阅<code><a href="/deferred.always">deferred.always()</a></code>的实现细节。</p>
</li>
<li> <strong>jqXHR.then(function(data, textStatus, jqXHR) {}, function(jqXHR, textStatus, errorThrown) {});</strong>
<p>
包含了 <code>.done()</code> 和 <code>.fail()</code>方法的功能，（从 jQuery 1.8 开始）允许底层被操纵。请参阅<code><a href="/deferred.then">deferred.then()</a></code>的实现细节。</p>
</li>
</ul>
<div class="warning">
<p><strong>推荐使用的注意事项:</strong>
<code>jqXHR.success()</code>, <code>jqXHR.error()</code>, 和 <code>jqXHR.complete()</code>回调从 jQuery 1.8开始 被弃用。他们将最终被取消，您的代码应做好准备，使用<code>jqXHR.done()</code>, <code>jqXHR.fail()</code>, 和 <code>jqXHR.always()</code> 代替。</p>
</div>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="comment">// Assign handlers immediately after making the request,</span></code></div></div><div class="container"><div class="line"><code><span class="comment">// and remember the jqxhr object for this request</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> jqxhr = $.ajax( <span class="string">"example.php"</span> )</code></div></div><div class="container"><div class="line"><code> .done(<span class="keyword">function</span>() { alert(<span class="string">"success"</span>); })</code></div></div><div class="container"><div class="line"><code> .fail(<span class="keyword">function</span>() { alert(<span class="string">"error"</span>); })</code></div></div><div class="container"><div class="line"><code> .always(<span class="keyword">function</span>() { alert(<span class="string">"complete"</span>); });</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// perform other work here ...</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// Set another completion function for the request above</span></code></div></div><div class="container"><div class="line"><code>jqxhr.always(<span class="keyword">function</span>() { alert(<span class="string">"second complete"</span>); });</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>
<code>this</code>在所有的回调中的引用，是这个对象在传递给<code>$.ajax</code>的设置中上下文；如果没有指定<code>context（上下文）</code>，<code>this</code> 引用的是Ajax设置的本身。
</p>
<p>为了向后兼容<code>XMLHttpRequest</code> ，一<code>jqXHR</code>对象将公开下列属性和方法：</p>
<ul>
<li> <code>readyState</code> </li>
<li> <code>status</code> </li>
<li> <code>statusText</code> </li>
<li> <code>responseXML</code> and/or <code>responseText</code> 当底层的请求分别作出XML和/或文本响应</li>
<li> <code>setRequestHeader(name, value)</code> 从标准出发，通过替换旧的值为新的值，而不是替换的新值到旧值</li>
<li> <code>getAllResponseHeaders()</code> </li>
<li> <code>getResponseHeader()</code> </li>
<li> <code>abort()</code> </li>
</ul>
<p>假如没有<code>onreadystatechange</code>属性，因为不同的状态可以分别在 <code>success</code> ， <code>error</code> ， <code>complete</code>和<code>statusCode</code> 方法中进行处理。</p>
<h4 id="callback-functions">Callback Function Queues（回调函数）</h4>
<p>
<code>beforeSend</code>, <code>error</code>, <code>dataFilter</code>, <code>success</code> 和 <code>complete</code>接受的回调函数是在合适的时间调用。</p>
<p><strong>从jQuery 1.5开始，</strong> <code>fail</code> ， <code>done</code> ，和从jQuery 1.6开始的<code>always</code>回调钩子（hooks）采用先入先出队列管理。这意味着你可以为每个挂钩分配多个回调。见<a href="/category/deferred-object/">Deferred object methods</a> ，这是实现内部的<code>$.ajax()</code>回调钩子（hooks）。</p>
<p>这里有<code>$.ajax()</code>提供的回调钩子 （hooks），如下：</p>
<ol>
<li>beforeSend 在发送请求之前调用，它接收<code>jqXHR</code>对象和<code>settings</code>作为参数对象。</li>
<li>error 在请求出错时调用。如果请求失败，在它们的顺序依次登记。他们接受<code>jqXHR</code> ，字符串表示的错误类型，以及异常对象（如果有的话）。一些内置的错误会将 "abort", "timeout", "No Transport" 等字符串作为异常对象。</li>
<li><code>dataFilter</code> 在请求成功之后调用。传入返回的数据以及<code>dataType</code>参数的值。并且必须返回新的数据（可能是处理过的）传递给<code>success</code>回调函数。</li>
<li><code>success</code> 当请求成功并接收到返回数据之后调用。传入返回后的数据，以及包含成功代码的字符串和<code>jqXHR</code>对象。 </li>
<li><code>complete</code> 请求完成时，无论是在失败或成功，它们按顺序依次执行回调。他们收到<code>jqXHR</code>对象，以及一个包含成功或错误代码。</li>
</ol>
<h4 id="data-types">Data Types（数据类型）</h4>
<p>$.ajax()函数依赖服务器提供的信息来处理返回的数据。如果服务器报告说返回的数据是XML，那么返回的结果就可以用普通的XML方法或者jQuery的选择器来遍历。如果见得到其他类型，比如HTML，则数据就以文本形式来对待。 </p>
<p>通过<code>dataType</code>选项还可以指定其他不同数据处理方式。除了单纯的<code>xml</code>，<code>dataType</code>还可以指定 <code>html</code>, <code>json</code>, <code>jsonp</code>, <code>script</code>, 或者 <code>text</code>。 </p>
<p>其中，<code>text</code> 和 <code>xml</code>类型返回的数据不会经过处理。无论是通过<code>jqXHR</code>对象的<code>responseText</code>或<code>responseXML</code>，这些数据仅仅是传递给处理程序的成功</p>
<p><strong>注意:</strong>我们必须确保网页服务器报告的MIME类型与我们选择的 <code>dataType</code>. 所匹配。比如说，XML的话，服务器端就必须声明 <code>text/xml</code> 或者 <code>application/xml</code> 来获得一致的结果。 </p>
<p>如果指定为 <code>html</code>类型，任何内嵌的JavaScript都会在HTML作为一个字符串返回之前执行。类似的，指定<code>script</code>类型的话，也会先执行服务器端生成JavaScript，然后再把脚本作为一个文本数据返回。</p>
<p>如果指定为<code>json</code>类型，则会把获取到的数据作为一个JavaScript对象来解析，并且把构建好的对象作为结果返回。为了实现这个目的，他首先尝试使用<code>jQuery.parseJSON()</code>。如果浏览器不支持，则使用一个<code>Function</code>来<strong>constructor</strong>。畸形的JSON数据将抛出一个解析错误（查看<a href="http://json.org/">json.org</a>了解更多信息）。JSON数据是一种能很方便通过JavaScript解析的结构化数据。如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用<code>jsonp</code>类型代替。</p>
<p><code>jsonp</code>类型会给请求的URL后面创建一个查询字符串参数 <code>callback=?</code> 。服务器端应当在JSON数据前加上回调函数名，以便完成一个有效的JSONP请求。如果要指定回调函数的参数名来取代默认的<code>callback</code>，可以通过设置<code>$.ajax()</code>的<code>jsonp</code>参数。 </p>
<p><strong>注意:</strong>JSONP是JSON格式的扩展。他要求一些服务器端的代码来检测并处理查询字符串参数。更多信息可以参阅<a href="http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/">详细介绍了其使用的原帖</a>.</p>
<p>当数据被从远程服务器取回（这是唯一可能使用<code>script</code> 或者 <code>jsonp</code>数据类型），<code>error</code>回调和全局事件将永远不会被触发。</p>
<p><strong>注：</strong>如果指定了<code>script</code>或者<code>jsonp</code>类型，那么当从服务器接收到数据时，实际上是用了&lt;script&gt;标签而不是XMLHttpRequest对象。这种情况下，$.ajax()不再返回一个XMLHttpRequest对象，并且也不会传递事件处理函数，比如beforeSend。 </p>
<h4 id="sending-data-to-server">Sending Data to the Server（发送数据到服务器）</h4>
<p>默认情况下，Ajax请求使用GET方法。如果要使用POST方法，可以设定<code>type</code>参数值。这个选项也会影响 <code>data</code> 选项中的内容如何发送到服务器。POST数据将被发送到服务器使用UTF-8字符集，根据W3C XMLHttpRequest的标准。</p>
<p>data选项既可以包含一个查询字符串，比如 <code>key1=value1&amp;key2=value2</code>，也可以是一个映射，比如 <code>{key1: 'value1', key2: 'value2'}</code> 。如果使用了后者的形式，则数据再发送前会用<code><a href="/jQuery.param">jQuery.param()</a></code> 将其转换成查询字符串。这个处理过程也可以通过设置<code>processData</code>选项为<code>false</code>来回避。如果我们希望发送一个XML对象给服务器时，这种处理可能并不合适。并且在这种情况下，我们也应当改变<code>contentType</code> 选项的值，用其他合适的MIME类型来取代默认的 <code>application/x-www-form-urlencoded</code> 。 </p>
<h4 id="advanced-options">Advanced Options（高级选项）</h4>
<p>global选项用于阻止响应注册的回调函数，比如<code><a href="/ajaxSend">.ajaxSend()</a></code>, <code><a href="/ajaxError">.ajaxError()</a></code>，以及类似的方法。这在有些时候很有用，比如发送的请求非常频繁且简短的时候，就可以在<code><a href="/ajaxSend">.ajaxSend()</a></code>里禁用这个。跨域脚本和JSONP请求，全局选项自动设置为<code>false</code>。更多关于这些方法的详细信息，请参阅下面的内容。 </p>
<p>如果服务器需要HTTP认证，可以使用用户名和密码可以通过 <code>username</code> 和 <code>password</code> 选项来设置。 </p>
<p>Ajax请求是限时的，所以错误警告被捕获并处理后，可以用来提升用户体验。请求超时这个参数通常就保留其默认值，要不就通过<code><a href="/jQuery.ajaxSetup">$.ajaxSetup()</a></code>来全局设定，很少为特定的请求重新设置<code>timeout</code>选项。 </p>
<p>默认情况下，请求总会被发出去，但浏览器有可能从他的缓存中调取数据。要禁止使用缓存的结果，可以设置<code>cache</code>参数为<code>false</code>。如果希望判断数据自从上次请求后没有更改过就报告出错的话，可以设置<code>ifModified</code>为<code>true</code>。 </p>
<p><code>scriptCharset</code>允许给&lt;script&gt;标签的请求设定一个特定的字符集，用于<code>script</code> 或者 <code>jsonp</code>类似的数据。当脚本和页面字符集不同时，这特别好用。 </p>
<p>Ajax的第一个字母是“asynchronous”的开头字母，这意味着所有的操作都是并行的，完成的顺序没有前后关系。<code>$.ajax()</code>的<code>async</code>参数总是设置成<code>true</code>，这标志着在请求开始后，其他代码依然能够执行。强烈不建议把这个选项设置成<code>false</code>，这意味着所有的请求都不再是异步的了，这也会导致浏览器被锁死。 </p>
<p><code>$.ajax()</code>函数返回他创建的<code>XMLHttpRequest</code>对象。通常jQuery只在内部处理并创建这个对象，但用户也可以通过<code>xhr</code> 选项来传递一个自己创建的xhr对象。返回的对象通常已经被丢弃了，但依然提供一个底层接口来观察和操控请求。比如说，调用对象上的<code>.abort()</code> 可以在请求完成前挂起请求。</p>
<p><strong>目前</strong>, 在Firefox中有一个bug，虽然<code>.getResponseHeader('Content-Type')</code>返回一个非空的字符串，但是 <code>.getAllResponseHeaders()</code>还是返回空字符串， 在Firefox中使用jQuery不支持自动解码JSON CORS 响应。</p>
<p>
重写<code>jQuery.ajaxSettings.xhr</code> 的一种解决方案，如下</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
<div class="line n24">24</div>
<div class="line n25">25</div>
<div class="line n26">26</div>
<div class="line n27">27</div>
<div class="line n28">28</div>
<div class="line n29">29</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>(<span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code> <span class="keyword">var</span> _super = jQuery.ajaxSettings.xhr,</code></div></div><div class="container"><div class="line"><code> xhrCorsHeaders = [ <span class="string">"Cache-Control"</span>, <span class="string">"Content-Language"</span>, <span class="string">"Content-Type"</span>, <span class="string">"Expires"</span>, <span class="string">"Last-Modified"</span>, <span class="string">"Pragma"</span> ];</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> jQuery.ajaxSettings.xhr = <span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code> <span class="keyword">var</span> xhr = _super(),</code></div></div><div class="container"><div class="line"><code> getAllResponseHeaders = xhr.getAllResponseHeaders;</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> xhr.getAllResponseHeaders = <span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code> <span class="keyword">var</span> allHeaders = <span class="string">""</span>;</code></div></div><div class="container"><div class="line"><code> <span class="keyword">try</span> {</code></div></div><div class="container"><div class="line"><code> allHeaders = getAllResponseHeaders.apply( xhr );</code></div></div><div class="container"><div class="line"><code> <span class="keyword">if</span> ( allHeaders ) {</code></div></div><div class="container"><div class="line"><code> <span class="keyword">return</span> allHeaders;</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code> } <span class="keyword">catch</span> ( e ) {</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> $.each( xhrCorsHeaders, <span class="function"><span class="keyword">function</span> <span class="params">( i, headerName )</span> {</span></code></div></div><div class="container"><div class="line"><code> <span class="keyword">if</span> ( xhr.getResponseHeader( headerName ) ) {</code></div></div><div class="container"><div class="line"><code> allHeaders += headerName + <span class="string">": "</span> + xhr.getResponseHeader( headerName ) + <span class="string">"\n"</span>;</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code> });</code></div></div><div class="container"><div class="line"><code> <span class="keyword">return</span> allHeaders;</code></div></div><div class="container"><div class="line"><code> };</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="keyword">return</span> xhr;</code></div></div><div class="container"><div class="line"><code> };</code></div></div><div class="container"><div class="line"><code>})();</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4 id="extending-ajax">Extending Ajax（扩展 Ajax）</h4>
<p><strong>从jQuery 1.5开始，</strong>，jQuery的Ajax实现包括预<a href="/jQuery.ajaxPrefilter">prefilters</a>, <a href="/jQuery.ajaxTransport">transports</a>和传输，让您更加灵活的扩展Ajax。如需有关这些先进功能的信息，请参阅<a href="/extending-ajax/">Extending Ajax</a></p>
<h4 id="using-converters">Using Converters（使用转换器）</h4>
<p><code>$.ajax()</code>的转换器支持的数据类型映射到其它数据类型。但是，如果你想把自定义数据类型映射到一个已知的类型（<code>json</code>等）,您必须<code>contents</code> 选项在响应的Content-Type和实际的数据类型之间的添加一个相关的转换函数：</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.ajaxSetup({</code></div></div><div class="container"><div class="line"><code> contents: {</code></div></div><div class="container"><div class="line"><code> mycustomtype: <span class="regexp">/mycustomtype/</span></code></div></div><div class="container"><div class="line"><code> },</code></div></div><div class="container"><div class="line"><code> converters: {</code></div></div><div class="container"><div class="line"><code> <span class="string">"mycustomtype json"</span>: <span class="function"><span class="keyword">function</span> <span class="params">( result )</span> {</span></code></div></div><div class="container"><div class="line"><code> <span class="comment">// do stuff</span></code></div></div><div class="container"><div class="line"><code> <span class="keyword">return</span> newresult;</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>这额外的对象是必要的，因为响应内容类型(Content-Types)和数据类型从来没有一个严格的一对一对应关系（正则表达式表示结果）。
</p>
<p>转换一个支持的类型（例如<code>text</code>, <code>json</code>）成自定义数据类型，然后再返回，使用另一个直通转换器：</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.ajaxSetup({</code></div></div><div class="container"><div class="line"><code> contents: {</code></div></div><div class="container"><div class="line"><code> mycustomtype: <span class="regexp">/mycustomtype/</span></code></div></div><div class="container"><div class="line"><code> },</code></div></div><div class="container"><div class="line"><code> converters: {</code></div></div><div class="container"><div class="line"><code> <span class="string">"text mycustomtype"</span>: <span class="literal">true</span>,</code></div></div><div class="container"><div class="line"><code> <span class="string">"mycustomtype json"</span>: <span class="function"><span class="keyword">function</span> <span class="params">( result )</span> {</span></code></div></div><div class="container"><div class="line"><code> <span class="comment">// do stuff</span></code></div></div><div class="container"><div class="line"><code> <span class="keyword">return</span> newresult;</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>
现在上面的代码允许通过从<code>text</code> 为<code>mycustomtype</code> ，进而，<code>mycustomtype</code> 转换为 <code>json</code>。</p>
</div>
<h3>Additional Notes:（其他注意事项：）</h3>
<div class="longdesc">
<ul>
<li> 由于浏览器的安全限制，大多数“Ajax”的要求，均采用<a href="http://en.wikipedia.org/wiki/Same_origin_policy" title="维基百科上的同源策略">同一起源的政策</a> ;该请求不能成功地检索来自不同的域，子域或协议的数据。</li>
<li>Script和JSONP形式请求不受同源策略的限制。</li>
</ul>
</div>
<section class="entry-examples" id="entry-examples">
<header>
<h2 class="underline">例子:</h2>
</header>
<div class="entry-example" id="example-0">
<h4>Example: <span class="desc">保存数据到服务器，成功时显示信息。</span> </h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.ajax({</code></div></div><div class="container"><div class="line"><code> type: <span class="string">"POST"</span>,</code></div></div><div class="container"><div class="line"><code> url: <span class="string">"some.php"</span>,</code></div></div><div class="container"><div class="line"><code> data: { name: <span class="string">"John"</span>, location: <span class="string">"Boston"</span> }</code></div></div><div class="container"><div class="line"><code>}).done(<span class="keyword">function</span>( msg ) {</code></div></div><div class="container"><div class="line"><code> alert( <span class="string">"Data Saved: "</span> + msg );</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-1">
<h4>Example: <span class="desc">装入一个 HTML 网页最新版本。</span> </h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.ajax({</code></div></div><div class="container"><div class="line"><code> url: <span class="string">"test.html"</span>,</code></div></div><div class="container"><div class="line"><code> cache: <span class="literal">false</span></code></div></div><div class="container"><div class="line"><code>}).done(<span class="keyword">function</span>( html ) {</code></div></div><div class="container"><div class="line"><code> $(<span class="string">"#results"</span>).append(html);</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-2">
<h4>Example: <span class="desc">发送 XML 数据至服务器。设置 processData 选项为 <code>false</code>，防止自动转换数据格式。</span> </h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="keyword">var</span> xmlDocument = [create xml document];</code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> xmlRequest = $.ajax({</code></div></div><div class="container"><div class="line"><code> url: <span class="string">"page.php"</span>,</code></div></div><div class="container"><div class="line"><code> processData: <span class="literal">false</span>,</code></div></div><div class="container"><div class="line"><code> data: xmlDocument</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>xmlRequest.done(handleResponse);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-3">
<h4>Example: <span class="desc">发送id作为数据发送到服务器，
保存一些数据到服务器上，
并通一旦它的完成知用户。
 如果请求失败，则提醒用户。</span> </h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="keyword">var</span> menuId = $(<span class="string">"ul.nav"</span>).first().attr(<span class="string">"id"</span>);</code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> request = $.ajax({</code></div></div><div class="container"><div class="line"><code> url: <span class="string">"script.php"</span>,</code></div></div><div class="container"><div class="line"><code> type: <span class="string">"POST"</span>,</code></div></div><div class="container"><div class="line"><code> data: {id : menuId},</code></div></div><div class="container"><div class="line"><code> dataType: <span class="string">"html"</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>request.done(<span class="keyword">function</span>(msg) {</code></div></div><div class="container"><div class="line"><code> $(<span class="string">"#log"</span>).html( msg );</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>request.fail(<span class="keyword">function</span>(jqXHR, textStatus) {</code></div></div><div class="container"><div class="line"><code> alert( <span class="string">"Request failed: "</span> + textStatus );</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-4">
<h4>Example: <span class="desc">载入并执行一个JavaScript文件.</span> </h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.ajax({</code></div></div><div class="container"><div class="line"><code> type: <span class="string">"GET"</span>,</code></div></div><div class="container"><div class="line"><code> url: <span class="string">"test.js"</span>,</code></div></div><div class="container"><div class="line"><code> dataType: <span class="string">"script"</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</div>
</article>
</div>
</article>
Reference in New Issue View Git Blame Copy Permalink