uTools-Manuals/docs/jQuery/jQuery.ajaxTransport.html
2019-04-21 11:50:48 +08:00

241 lines
17 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.ajaxTransport()</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.ajaxTransport/" target="_blank">jQuery.ajaxTransport()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry method" id="jQuery-ajaxTransport1"><h2 class="section-title">
<span class="name">jQuery.ajaxTransport( dataType, handler(options, originalOptions, jqXHR) )</span><span class="returns">返回: <a href="/Types/#undefined">undefined</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>创建一个对象用于处理Ajax数据的实际传输。</p>
<ul class="signatures"><li class="signature" id="jQuery-ajaxTransport-dataType-handleroptions--originalOptions--jqXHR">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.5/">1.5</a></span>jQuery.ajaxTransport( dataType, handler(options, originalOptions, jqXHR) )</h4>
<ul>
<li>
<div><strong>dataType</strong></div>
<div>类型: <a href="/Types/#String">String</a>
</div>
<div>一个字符串,标识使用的数据类型</div>
</li>
<li>
<div><strong>handler(options, originalOptions, jqXHR)</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>()</div>
<div>
一个处理程序使用第一个参数中提供的数据类型返回新的传输transport对象。</div>
</li>
</ul>
</li></ul>
<div class="longdesc" id="entry-longdesc">
<p>传输transport是一个对象它提供了两种方法<code>send</code><code>abort</code>,内部使用由<code>$.ajax()</code>发出请求。传输transport是最高级的方法用来增强<code>$.ajax()</code>并且应仅作为当预过滤器prefilters和转换器converters无法满足你的需求的时候的最后的手段。
</p>
<p>由于每个请求需要有自己的传输transport对象实例传输不能直接注册。因此你应该提供一个函数代替返回传输transport</p>
<p>传输transports工厂注册使用<code>$.ajaxTransport()</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>$.ajaxTransport( <span class="keyword">function</span>( options, originalOptions, jqXHR ) {</code></div></div><div class="container"><div class="line"><code> <span class="keyword">if</span>( <span class="comment">/* transportCanHandleRequest */</span> ) {</code></div></div><div class="container"><div class="line"><code> <span class="keyword">return</span> {</code></div></div><div class="container"><div class="line"><code> send: <span class="keyword">function</span>( headers, completeCallback ) {</code></div></div><div class="container"><div class="line"><code> <span class="comment">/* send code */</span></code></div></div><div class="container"><div class="line"><code> },</code></div></div><div class="container"><div class="line"><code> abort: <span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> <span class="comment">/* abort code */</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><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>以下的情况下:</p>
<ul>
<li>
<code>options</code> 是请求的选项</li>
<li>
<code>originalOptions</code> 值作为提供给Ajax方法未经修改的选项因此没有<code>ajaxSettings</code>设置中的默认值
</li>
<li>
<code>jqXHR</code> 是请求的jqXHR对象</li>
<li>
<code>headers</code>
是一个请求头信息(键 - 值对象该传输transport都可以发送如果它支持
</li>
<li>
<code>completeCallback</code>
是回调用于该请求Ajax的完成通知</li>
</ul>
<p><code>completeCallback</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><span class="keyword">function</span>( status, statusText, responses, headers ) {}</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>以下的情况下:</p>
<ul>
<li><code>status</code> 是响应的HTTP状态代码像200是一个典型的成功或404是没有找到资源。</li>
<li><code>statusText</code> 是响应状态文本。</li>
<li><code>responses</code> (可选)是一个对象,它包含数据类型/值dataType/value包含响应运输提供的所有格式。例如一个原生的XMLHttpRequest对象设置reponses为<code>{ xml: XMLData, text: textData }</code> 这样响应是一个XML文档)</li>
<li><code>headers</code> (可选)是一个字符串,其中包含所有的响应信息头,如果运输对它们的访问(类似于<code>XMLHttpRequest.getAllResponseHeaders()</code>提供的方法)。</li>
</ul>
<p>
就像预过滤器prefilters一个传输transport的工厂函数可以被连接到一个特定的 dataType数据类型</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>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.ajaxTransport( <span class="string">"script"</span>, <span class="keyword">function</span>( options, originalOptions, jqXHR ) {</code></div></div><div class="container"><div class="line"><code> <span class="comment">/* Will only be called for script requests */</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>面的示例演示小的图像怎样传输实现:</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>
<div class="line n30">30</div>
<div class="line n31">31</div>
<div class="line n32">32</div>
<div class="line n33">33</div>
<div class="line n34">34</div>
<div class="line n35">35</div>
<div class="line n36">36</div>
<div class="line n37">37</div>
<div class="line n38">38</div>
<div class="line n39">39</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.ajaxTransport( <span class="string">"image"</span>, <span class="keyword">function</span>( s ) {</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="keyword">if</span> ( s.type === <span class="string">"GET"</span> &amp;&amp; s.async ) {</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="keyword">var</span> image;</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> {</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> send: <span class="keyword">function</span>( _ , callback ) {</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> image = <span class="keyword">new</span> Image();</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="function"><span class="keyword">function</span> <span class="title">done</span><span class="params">( status )</span> {</span></code></div></div><div class="container"><div class="line"><code> <span class="keyword">if</span> ( image ) {</code></div></div><div class="container"><div class="line"><code> <span class="keyword">var</span> statusText = ( status == <span class="number">200</span> ) ? <span class="string">"success"</span> : <span class="string">"error"</span>,</code></div></div><div class="container"><div class="line"><code> tmp = image;</code></div></div><div class="container"><div class="line"><code> image = image.onreadystatechange = image.onerror = image.onload = <span class="literal">null</span>;</code></div></div><div class="container"><div class="line"><code> callback( status, statusText, { image: tmp } );</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><div class="container"><div class="line"><code> image.onreadystatechange = image.onload = <span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> done( <span class="number">200</span> );</code></div></div><div class="container"><div class="line"><code> };</code></div></div><div class="container"><div class="line"><code> image.onerror = <span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> done( <span class="number">404</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> image.src = s.url;</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> abort: <span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> <span class="keyword">if</span> ( image ) {</code></div></div><div class="container"><div class="line"><code> image = image.onreadystatechange = image.onerror = image.onload = <span class="literal">null</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><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="handling-custom-data-types">Handling Custom Data Types处理自定义数据类型</h4>
<p>jQuery的Ajax实现了一套标准的数据类型比如text, json, xml, 和 html。</p>
<p>
<code><a href="/jQuery.ajaxSetup">$.ajaxSetup()</a></code> 中使用<code>converters</code>选项
来增加或修改数据类型使用<code>$.ajax()</code>转换策略。</p>
<p> 未更改的 jQuery 代码
本身包含一个列表的默认转换器,这有力地说明了可以如何使用它们:</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>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="comment">// List of data converters</span></code></div></div><div class="container"><div class="line"><code><span class="comment">// 1) key format is "source_type destination_type"</span></code></div></div><div class="container"><div class="line"><code><span class="comment">// (a single space in-between)</span></code></div></div><div class="container"><div class="line"><code><span class="comment">// 2) the catchall symbol "*" can be used for source_type</span></code></div></div><div class="container"><div class="line"><code>converters: {</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="comment">// Convert anything to text</span></code></div></div><div class="container"><div class="line"><code> <span class="string">"* text"</span>: window.String,</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="comment">// Text to html (true = no transformation)</span></code></div></div><div class="container"><div class="line"><code> <span class="string">"text html"</span>: <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> <span class="comment">// Evaluate text as a json expression</span></code></div></div><div class="container"><div class="line"><code> <span class="string">"text json"</span>: jQuery.parseJSON,</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="comment">// Parse text as xml</span></code></div></div><div class="container"><div class="line"><code> <span class="string">"text xml"</span>: jQuery.parseXML</code></div></div><div class="container"><div class="line"><code>}</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>
当你在<code>$.ajaxSetup()</code>全局的指定一个<code>converters</code> 选项,或者每次调用<code>$.ajax()</code>,这个对象将映射到默认的转换器,覆盖您所指定的那些,让其他不变。</p>
<p>例如jQuery代码使用<code>$.ajaxSetup()</code>添加一个“text script”转换器:</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>jQuery.ajaxSetup({</code></div></div><div class="container"><div class="line"><code> accepts: {</code></div></div><div class="container"><div class="line"><code> script: <span class="string">"text/javascript, application/javascript"</span></code></div></div><div class="container"><div class="line"><code> },</code></div></div><div class="container"><div class="line"><code> contents: {</code></div></div><div class="container"><div class="line"><code> script: <span class="regexp">/javascript/</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 script"</span>: jQuery.globalEval</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>
</div>
</div></article> </div>
</article>