uTools-Manuals/docs/jQuery/jQuery.ajaxTransport.html

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