加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 大数据 > 正文

AJAX全套

发布时间：2020-12-15 17:20:53 所属栏目：大数据 来源：网络整理
导读：div id="cnblogs_post_body" class="blogpost-body" 概述 伪AJAX /td td class="code" div class="container" div class="line number1 index0 alt2"code class="python plain"!DOCTYPE html div class="line number2 index1 alt1"code class="python plain"

<div id="cnblogs_post_body" class="blogpost-body">

概述







“伪”AJAX

</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="python plain"><!DOCTYPE html>


<div class="line number2 index1 alt1"><code class="python plain">

<div class="line number3 index2 alt2">

<div class="line number4 index3 alt1"><code class="python spaces"><code class="python plain"><head lang<code class="python keyword">=<code class="python string">"en"<code class="python plain">>

<div class="line number5 index4 alt2"><code class="python spaces"><code class="python plain"><meta charset<code class="python keyword">=<code class="python string">"UTF-8"<code class="python plain">>

<div class="line number6 index5 alt1"><code class="python spaces"><code class="python plain"><</code><code class="python keyword">/</code><code class="python plain">title></code></div><br /> <div class="line number7 index6 alt2"><code class="python spaces"></code><code class="python plain"><</code><code class="python keyword">/</code><code class="python plain">head></code></div><br /> <div class="line number8 index7 alt1"></div><br /> <div class="line number9 index8 alt2"><code class="python spaces"></code><code class="python plain"><body></code></div><br /> <div class="line number10 index9 alt1"></div><br /> <div class="line number11 index10 alt2"><code class="python spaces"></code><code class="python plain"><div></code></div><br /> <div class="line number12 index11 alt1"><code class="python spaces"></code><code class="python plain"><p>请输入要加载的地址：<span </code><code class="python functions">id</code><code class="python keyword">=</code><code class="python string">"currentTime"</code><code class="python plain">><</code><code class="python keyword">/</code><code class="python plain">span><</code><code class="python keyword">/</code><code class="python plain">p></code></div><br /> <div class="line number13 index12 alt2"><code class="python spaces"></code><code class="python plain"><p></code></div><br /> <div class="line number14 index13 alt1"><code class="python spaces"></code><code class="python plain"><</code><code class="python functions">input</code> <code class="python functions">id</code><code class="python keyword">=</code><code class="python string">"url"</code> <code class="python functions">type</code><code class="python keyword">=</code><code class="python string">"text"</code> <code class="python keyword">/</code><code class="python plain">></code></div><br /> <div class="line number15 index14 alt2"><code class="python spaces"></code><code class="python plain"><</code><code class="python functions">input</code> <code class="python functions">type</code><code class="python keyword">=</code><code class="python string">"button"</code> <code class="python plain">value</code><code class="python keyword">=</code><code class="python string">"刷新"</code> <code class="python plain">onclick</code><code class="python keyword">=</code><code class="python string">"LoadPage();"</code><code class="python plain">></code></div><br /> <div class="line number16 index15 alt1"><code class="python spaces"></code><code class="python plain"><</code><code class="python keyword">/</code><code class="python plain">p></code></div><br /> <div class="line number17 index16 alt2"><code class="python spaces"></code><code class="python plain"><</code><code class="python keyword">/</code><code class="python plain">div></code></div><br /> <div class="line number18 index17 alt1"></div><br /> <div class="line number19 index18 alt2"></div><br /> <div class="line number20 index19 alt1"><code class="python spaces"></code><code class="python plain"><div></code></div><br /> <div class="line number21 index20 alt2"><code class="python spaces"></code><code class="python plain"><h3>加载页面位置：<</code><code class="python keyword">/</code><code class="python plain">h3></code></div><br /> <div class="line number22 index21 alt1"><code class="python spaces"></code><code class="python plain"><iframe </code><code class="python functions">id</code><code class="python keyword">=</code><code class="python string">"iframePosition"</code> <code class="python plain">style</code><code class="python keyword">=</code><code class="python string">"width: 100%;height: 500px;"</code><code class="python plain">><</code><code class="python keyword">/</code><code class="python plain">iframe></code></div><br /> <div class="line number23 index22 alt2"><code class="python spaces"></code><code class="python plain"><</code><code class="python keyword">/</code><code class="python plain">div></code></div><br /> <div class="line number24 index23 alt1"></div><br /> <div class="line number25 index24 alt2"></div><br /> <div class="line number26 index25 alt1"><code class="python spaces"></code><code class="python plain"><script </code><code class="python functions">type</code><code class="python keyword">=</code><code class="python string">"text/javascript"</code><code class="python plain">></code></div><br /> <div class="line number27 index26 alt2"></div><br /> <div class="line number28 index27 alt1"><code class="python spaces"></code><code class="python plain">window.onload</code><code class="python keyword">=</code> <code class="python plain">function(){</code></div><br /> <div class="line number29 index28 alt2"><code class="python spaces"></code><code class="python plain">var myDate </code><code class="python keyword">=</code> <code class="python plain">new Date();</code></div><br /> <div class="line number30 index29 alt1"><code class="python spaces"></code><code class="python plain">document.getElementById(</code><code class="python string">'currentTime'</code><code class="python plain">).innerText </code><code class="python keyword">=</code> <code class="python plain">myDate.getTime();</code></div><br /> <div class="line number31 index30 alt2"></div><br /> <div class="line number32 index31 alt1"><code class="python spaces"></code><code class="python plain">};</code></div><br /> <div class="line number33 index32 alt2"></div><br /> <div class="line number34 index33 alt1"><code class="python spaces"></code><code class="python plain">function LoadPage(){</code></div><br /> <div class="line number35 index34 alt2"><code class="python spaces"></code><code class="python plain">var targetUrl </code><code class="python keyword">=</code> <code class="python plain">document.getElementById(</code><code class="python string">'url'</code><code class="python plain">).value;</code></div><br /> <div class="line number36 index35 alt1"><code class="python spaces"></code><code class="python plain">document.getElementById(</code><code class="python string">"iframePosition"</code><code class="python plain">).src </code><code class="python keyword">=</code> <code class="python plain">targetUrl;</code></div><br /> <div class="line number37 index36 alt2"><code class="python spaces"></code><code class="python plain">}</code></div><br /> <div class="line number38 index37 alt1"></div><br /> <div class="line number39 index38 alt2"><code class="python spaces"></code><code class="python plain"><</code><code class="python keyword">/</code><code class="python plain">script></code></div><br /> <div class="line number40 index39 alt1"></div><br /> <div class="line number41 index40 alt2"><code class="python spaces"></code><code class="python plain"><</code><code class="python keyword">/</code><code class="python plain">body></code></div><br /> <div class="line number42 index41 alt1"><code class="python plain"><</code><code class="python keyword">/</code><code class="python plain">html></code></div></p> </div> <p></td></p> <p></tr></p> </tbody> <p></table></p> </div> </div> </div> <h1>原生AJAX</h1> <p><span style="font-size: 13px;">Ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作，该对象在主流浏览器中均存在(除早起的IE)，Ajax首次出现IE5.5中存在（ActiveX控件）。</span></p> <h2><strong><span style="font-size: 14pt;">1、XmlHttpRequest对象介绍</span></strong></h2> <p><span style="font-size: 13px;">XmlHttpRequest对象的主要方法：</span></p> <div class="cnblogs_Highlighter"> <pre class="brush:python;collapse:true;;gutter:true;">a. void open(String method,String url,Boolen async) 用于创建请求 <p>参数：<br /> method： 请求方式（字符串类型），如：POST、GET、DELETE...<br /> url： 要请求的地址（字符串类型）<br /> async： 是否异步（布尔类型）</p> <p>b. void send(String body)<br /> 用于发送请求</p> <pre><code>参数： body： 要发送的数据（字符串类型）</code></pre> <p>c. void setRequestHeader(String header,String value)<br /> 用于设置请求头</p> <pre><code>参数： header： 请求头的key（字符串类型） vlaue： 请求头的value（字符串类型）</code></pre> <p>d. String getAllResponseHeaders()<br /> 获取所有响应头</p> <pre><code>返回值： 响应头数据（字符串类型）</code></pre> <p>e. String getResponseHeader(String header)<br /> 获取响应头中指定header的值</p> <pre><code>参数： header： 响应头的key（字符串类型） 返回值： 响应头中指定的header对应的值</code></pre> <p>f. void abort()</p> <pre><code>终止请求</pre></code></pre> </div> <p><span style="font-size: 13px;">XmlHttpRequest对象的主要属性：</span></p> <div class="cnblogs_Highlighter"> <pre class="brush:python;collapse:true;;gutter:true;">a. Number readyState 状态值（整数） <p>详细：<br /> 0-未初始化，尚未调用open()方法；<br /> 1-启动，调用了open()方法，未调用send()方法；<br /> 2-发送，已经调用了send()方法，未接收到响应；<br /> 3-接收，已经接收到部分响应数据；<br /> 4-完成，已经接收到全部响应数据；</p> <p>b. Function onreadystatechange<br /> 当readyState的值改变时自动触发执行其对应的函数（回调函数）</p> <p>c. String responseText<br /> 服务器返回的数据（字符串类型）</p> <p>d. XmlDocument responseXML<br /> 服务器返回的数据（Xml对象）</p> <p>e. Number states<br /> 状态码（整数），如：200、404...</p> <p>f. String statesText<br /> 状态文本（字符串），如：OK、NotFound...</p> </pre> </div> <h2><strong><span style="font-size: 14pt;">2、跨浏览器支持</span></strong></h2> <ul> <li><span style="font-size: 13px;">XmlHttpRequest</span><br /><span style="font-size: 13px;">IE7+,Firefox,Chrome,Opera,etc.</span></li> <li><span style="font-size: 13px;">ActiveXObject("Microsoft.XMLHTTP")</span><br /><span style="font-size: 13px;">IE6,IE5</span></li> </ul> <div class="cnblogs_code" onclick="cnblogs_code_show('cb330f9b-7ab8-490c-b597-90a7d4ace25f')"><p class="pic_center"><img src="http://img50.lidatong.com.cn//uploads/allimg/c20201215/44fedf6a79becff623815a92aa081c3c.gif" alt="" /></p><p class="pic_center"><img src="http://img50.lidatong.com.cn//uploads/allimg/c20201215/e925b1250208cc847aeacb25cf6e8dbb.gif" alt="" /></p> <div id="cnblogs_code_open_cb330f9b-7ab8-490c-b597-90a7d4ace25f" class="cnblogs_code_hide"> <pre><!DOCTYPE html> <html> <head lang=<span style="color: #800000;">"</span><span style="color: #800000;">en</span><span style="color: #800000;">"</span>> <meta charset=<span style="color: #800000;">"</span><span style="color: #800000;">UTF-8</span><span style="color: #800000;">"</span>> <title> 
<h1>XMLHttpRequest - Ajax请求</h1>
<input type=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;button</span><span style="color: #800000;"&gt;"</span> onclick=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;XmlGetRequest();</span><span style="color: #800000;"&gt;"</span> value=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;Get发送请求</span><span style="color: #800000;"&gt;"</span> />
<input type=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;button</span><span style="color: #800000;"&gt;"</span> onclick=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;XmlPostRequest();</span><span style="color: #800000;"&gt;"</span> value=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;Post发送请求</span><span style="color: #800000;"&gt;"</span> />

<script src=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;/statics/jquery-1.12.4.js</span><span style="color: #800000;"&gt;"</span>></script>
<script type=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;text/javascript</span><span style="color: #800000;"&gt;"</span>><span style="color: #000000;"&gt;

    function GetXHR(){
        var xhr </span>=<span style="color: #000000;"&gt; null;
        </span><span style="color: #0000ff;"&gt;if</span><span style="color: #000000;"&gt;(XMLHttpRequest){
            xhr </span>=<span style="color: #000000;"&gt; new XMLHttpRequest();
        }</span><span style="color: #0000ff;"&gt;else</span><span style="color: #000000;"&gt;{
            xhr </span>= new ActiveXObject(<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;Microsoft.XMLHTTP</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;);
        }
        </span><span style="color: #0000ff;"&gt;return</span><span style="color: #000000;"&gt; xhr;

    }

    function XhrPostRequest(){
        var xhr </span>=<span style="color: #000000;"&gt; GetXHR();
        </span>//<span style="color: #000000;"&gt; 定义回调函数
        xhr.onreadystatechange </span>=<span style="color: #000000;"&gt; function(){
            </span><span style="color: #0000ff;"&gt;if</span>(xhr.readyState == 4<span style="color: #000000;"&gt;){
                </span>//<span style="color: #000000;"&gt; 已经接收到全部响应数据，执行以下操作
                var data </span>=<span style="color: #000000;"&gt; xhr.responseText;
                console.log(data);
            }
        };
        </span>// 指定连接方式和地址----<span style="color: #000000;"&gt;文件方式
        xhr.open(</span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;POST</span><span style="color: #800000;"&gt;'</span>,<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;/test/</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;,true);
        </span>//<span style="color: #000000;"&gt; 设置请求头
        xhr.setRequestHeader(</span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;Content-Type</span><span style="color: #800000;"&gt;'</span>,<span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;application/x-www-form-urlencoded; charset-UTF-8</span><span style="color: #800000;"&gt;'</span><span style="color: #000000;"&gt;);
        </span>//<span style="color: #000000;"&gt; 发送请求
        xhr.send(</span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;n1=1;n2=2;</span><span style="color: #800000;"&gt;'</span><span style="color: #000000;"&gt;);
    }

    function XhrGetRequest(){
        var xhr </span>=<span style="color: #000000;"&gt; GetXHR();
        </span>//<span style="color: #000000;"&gt; 定义回调函数
        xhr.onreadystatechange </span>=<span style="color: #000000;"&gt; function(){
            </span><span style="color: #0000ff;"&gt;if</span>(xhr.readyState == 4<span style="color: #000000;"&gt;){
                </span>//<span style="color: #000000;"&gt; 已经接收到全部响应数据，执行以下操作
                var data </span>=<span style="color: #000000;"&gt; xhr.responseText;
                console.log(data);
            }
        };
        </span>// 指定连接方式和地址----<span style="color: #000000;"&gt;文件方式
        xhr.open(</span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;get</span><span style="color: #800000;"&gt;'</span>,true);
        </span>//<span style="color: #000000;"&gt; 发送请求
        xhr.send();
    }

</span></script>

jQuery Ajax

/ jQuery.post(...) 所有参数： url: 待载入页面的URL地址 data: 待发送 Key</span>/<span style="color: #000000;"&gt;value 参数 success: 载入成功时回调函数 dataType: 返回内容格式，xml,html jQuery.getJSON(...) 所有参数： url: 待载入页面的URL地址 data: 待发送 Key</span>/<span style="color: #000000;"&gt;value 参数。 success: 载入成功时回调函数。 jQuery.getScript(...) 所有参数： url: 待载入页面的URL地址 data: 待发送 Key</span>/<span style="color: #000000;"&gt;value 参数。 success: 载入成功时回调函数。 jQuery.ajax(...) 部分参数： url：请求地址 type：请求方式，GET、POST（</span>1.9<span style="color: #000000;"&gt;.0之后用method） headers：请求头 data：要发送的数据 contentType：即将发送信息至服务器的内容编码类型(默认: </span><span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;application/x-www-form-urlencoded; charset=UTF-8</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;) async：是否异步 timeout：设置请求超时时间（毫秒） beforeSend：发送请求前执行的函数(全局) complete：完成之后执行的回调函数(全局) success：成功之后执行的回调函数(全局) error：失败之后执行的回调函数(全局) accepts：通过请求头发送给服务器，告诉服务器当前客户端课接受的数据类型 dataType：将服务器端返回的数据转换成指定类型 </span><span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;xml</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;: 将服务器端返回的内容转换成xml格式 </span><span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;text</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;: 将服务器端返回的内容转换成普通文本格式 </span><span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;html</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;: 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。 </span><span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;script</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;: 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式 </span><span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;json</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;: 将服务器端返回的内容转换成相应的JavaScript对象 </span><span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;jsonp</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;: JSONP 格式 使用 JSONP 形式调用函数时，如 </span><span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;myurl?callback=?</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt; jQuery 将自动替换 ? 为正确的函数名，以执行回调函数 如果不指定，jQuery 将自动根据HTTP包MIME信息返回相应类型(an XML MIME type will </span><span style="color: #0000ff;"&gt;yield</span> XML,<span style="color: #0000ff;"&gt;in</span> 1.4 JSON will <span style="color: #0000ff;"&gt;yield</span> a JavaScript object,<span style="color: #0000ff;"&gt;in</span> 1.4 script will execute the script,<span style="color: #0000ff;"&gt;and</span> anything <span style="color: #0000ff;"&gt;else</span><span style="color: #000000;"&gt; will be returned as a string converters： 转换器，将服务器端的内容根据指定的dataType转换类型，并传值给success回调函数 $.ajax({ accepts: { mycustomtype: </span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;application/x-some-custom-type</span><span style="color: #800000;"&gt;'</span><span style="color: #000000;"&gt; },</span>// Expect a `mycustomtype` back <span style="color: #0000ff;"&gt;from</span><span style="color: #000000;"&gt; server dataType: </span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;mycustomtype</span><span style="color: #800000;"&gt;'</span> // Instructions <span style="color: #0000ff;"&gt;for</span><span style="color: #000000;"&gt; how to deserialize a `mycustomtype` converters: { </span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;text mycustomtype</span><span style="color: #800000;"&gt;'</span><span style="color: #000000;"&gt;: function(result) { </span>//<span style="color: #000000;"&gt; Do Stuff </span><span style="color: #0000ff;"&gt;return</span><span style="color: #000000;"&gt; newresult; } },});</span></pre>

> > 
<p>
    <input type=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;button</span><span style="color: #800000;"&gt;"</span> onclick=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;XmlSendRequest();</span><span style="color: #800000;"&gt;"</span> value=<span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;Ajax请求</span><span style="color: #800000;"&gt;'</span> />
</p>


<script type=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;text/javascript</span><span style="color: #800000;"&gt;"</span> src=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;jquery-1.12.4.js</span><span style="color: #800000;"&gt;"</span>></script>
<script><span style="color: #000000;"&gt;

    function JqSendRequest(){
        $.ajax({
            url: </span><span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;http://c2.com:8000/test/</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;,type: </span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;GET</span><span style="color: #800000;"&gt;'</span><span style="color: #000000;"&gt;,dataType: </span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;text</span><span style="color: #800000;"&gt;'</span><span style="color: #000000;"&gt;,success: function(data,statusText,xmlHttpRequest){
                console.log(data);
            }
        })
    }


</span></script>

跨域AJAX

特别的：由于同源策略是浏览器的限制，所以请求的发送和响应是可以进行，只不过浏览器不接受罢了。

> > 
<p>
    <input type=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;button</span><span style="color: #800000;"&gt;"</span> onclick=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;Jsonp1();</span><span style="color: #800000;"&gt;"</span>  value=<span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;提交</span><span style="color: #800000;"&gt;'</span>/>
</p>

<p>
    <input type=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;button</span><span style="color: #800000;"&gt;"</span> onclick=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;Jsonp2();</span><span style="color: #800000;"&gt;"</span> value=<span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;提交</span><span style="color: #800000;"&gt;'</span>/>
</p>

<script type=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;text/javascript</span><span style="color: #800000;"&gt;"</span> src=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;jquery-1.12.4.js</span><span style="color: #800000;"&gt;"</span>></script>
<script><span style="color: #000000;"&gt;
    function Jsonp1(){
        var tag </span>= document.createElement(<span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;script</span><span style="color: #800000;"&gt;'</span><span style="color: #000000;"&gt;);
        tag.src </span>= <span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;http://c2.com:8000/test/</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;;
        document.head.appendChild(tag);
        document.head.removeChild(tag);

    }

    function Jsonp2(){
        $.ajax({
            url: </span><span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;http://c2.com:8000/test/</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;,dataType: </span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;JSONP</span><span style="color: #800000;"&gt;'</span><span style="color: #000000;"&gt;,xmlHttpRequest){
                console.log(data);
            }
        })
    }


</span></script>

* 简单请求 OR 非简单请求

* 简单请求和非简单请求的区别？

* 关于“预检”

如果复杂请求是PUT等请求，则服务端需要设置允许某请求，否则“预检”不通过
如果复杂请求设置了请求头，则服务端需要设置允许某请求头，否则“预检”不通过

> > 
<p>
    <input type=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;submit</span><span style="color: #800000;"&gt;"</span> onclick=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;XmlSendRequest();</span><span style="color: #800000;"&gt;"</span> />
</p>

<p>
    <input type=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;submit</span><span style="color: #800000;"&gt;"</span> onclick=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;JqSendRequest();</span><span style="color: #800000;"&gt;"</span> />
</p>

<script type=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;text/javascript</span><span style="color: #800000;"&gt;"</span> src=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;jquery-1.12.4.js</span><span style="color: #800000;"&gt;"</span>></script>
<script><span style="color: #000000;"&gt;
    function XmlSendRequest(){
        var xhr </span>=<span style="color: #000000;"&gt; new XMLHttpRequest();
        xhr.onreadystatechange </span>=<span style="color: #000000;"&gt; function(){
            </span><span style="color: #0000ff;"&gt;if</span>(xhr.readyState == 4<span style="color: #000000;"&gt;) {
                var result </span>=<span style="color: #000000;"&gt; xhr.responseText;
                console.log(result);
            }
        };
        xhr.open(</span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;GET</span><span style="color: #800000;"&gt;'</span>,<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;http://c2.com:8000/test/</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;,true);
        xhr.send();
    }

    function JqSendRequest(){
        $.ajax({
            url: </span><span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;http://c2.com:8000/test/</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;,xmlHttpRequest){
                console.log(data);
            }
        })
    }


</span></script>

,)

> > 
<p>
    <input type=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;submit</span><span style="color: #800000;"&gt;"</span> onclick=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;XmlSendRequest();</span><span style="color: #800000;"&gt;"</span> />
</p>

<p>
    <input type=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;submit</span><span style="color: #800000;"&gt;"</span> onclick=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;JqSendRequest();</span><span style="color: #800000;"&gt;"</span> />
</p>

<script type=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;text/javascript</span><span style="color: #800000;"&gt;"</span> src=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;jquery-1.12.4.js</span><span style="color: #800000;"&gt;"</span>></script>
<script><span style="color: #000000;"&gt;
    function XmlSendRequest(){
        var xhr </span>=<span style="color: #000000;"&gt; new XMLHttpRequest();
        xhr.onreadystatechange </span>=<span style="color: #000000;"&gt; function(){
            </span><span style="color: #0000ff;"&gt;if</span>(xhr.readyState == 4<span style="color: #000000;"&gt;) {
                var result </span>=<span style="color: #000000;"&gt; xhr.responseText;
                console.log(result);
            }
        };
        xhr.open(</span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;PUT</span><span style="color: #800000;"&gt;'</span>,true);
        xhr.setRequestHeader(</span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;k1</span><span style="color: #800000;"&gt;'</span>,<span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;v1</span><span style="color: #800000;"&gt;'</span><span style="color: #000000;"&gt;);
        xhr.send();
    }

    function JqSendRequest(){
        $.ajax({
            url: </span><span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;http://c2.com:8000/test/</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;,type: </span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;PUT</span><span style="color: #800000;"&gt;'</span><span style="color: #000000;"&gt;,headers: {</span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;k1</span><span style="color: #800000;"&gt;'</span>: <span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;v1</span><span style="color: #800000;"&gt;'</span><span style="color: #000000;"&gt;},xmlHttpRequest){
                console.log(data);
            }
        })
    }


</span></script>

</span><span style="color: #0000ff;"&gt;def</span><span style="color: #000000;"&gt; put(self): self.set_header(</span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;Access-Control-Allow-Origin</span><span style="color: #800000;"&gt;'</span>,"data": "seven"}</span><span style="color: #800000;"&gt;'</span><span style="color: #000000;"&gt;) </span><span style="color: #0000ff;"&gt;def</span> options(self,*args,**<span style="color: #000000;"&gt;kwargs): self.set_header(</span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;Access-Control-Allow-Origin</span><span style="color: #800000;"&gt;'</span>,<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;http://www.xxx.com</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;) self.set_header(</span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;Access-Control-Allow-Headers</span><span style="color: #800000;"&gt;'</span>,<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;k1,k2</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;) self.set_header(</span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;Access-Control-Allow-Methods</span><span style="color: #800000;"&gt;'</span>,<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;PUT,DELETE</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;) self.set_header(</span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;Access-Control-Max-Age</span><span style="color: #800000;"&gt;'</span>,10)</pre>

> > 
<p>
    <input type=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;submit</span><span style="color: #800000;"&gt;"</span> onclick=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;XmlSendRequest();</span><span style="color: #800000;"&gt;"</span> />
</p>

<p>
    <input type=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;submit</span><span style="color: #800000;"&gt;"</span> onclick=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;JqSendRequest();</span><span style="color: #800000;"&gt;"</span> />
</p>

<script type=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;text/javascript</span><span style="color: #800000;"&gt;"</span> src=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;jquery-1.12.4.js</span><span style="color: #800000;"&gt;"</span>></script>
<script><span style="color: #000000;"&gt;
    function XmlSendRequest(){
        var xhr </span>=<span style="color: #000000;"&gt; new XMLHttpRequest();
        xhr.onreadystatechange </span>=<span style="color: #000000;"&gt; function(){
            </span><span style="color: #0000ff;"&gt;if</span>(xhr.readyState == 4<span style="color: #000000;"&gt;) {
                var result </span>=<span style="color: #000000;"&gt; xhr.responseText;
                console.log(result);
                </span>//<span style="color: #000000;"&gt; 获取响应头
                console.log(xhr.getAllResponseHeaders());
            }
        };
        xhr.open(</span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;PUT</span><span style="color: #800000;"&gt;'</span>,xmlHttpRequest){
                console.log(data);
                </span>//<span style="color: #000000;"&gt; 获取响应头
                console.log(xmlHttpRequest.getAllResponseHeaders());
            }
        })
    }


</span></script>

</span><span style="color: #0000ff;"&gt;def</span><span style="color: #000000;"&gt; put(self): self.set_header(</span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;Access-Control-Allow-Origin</span><span style="color: #800000;"&gt;'</span>,<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;http://www.xxx.com</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;) self.set_header(</span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;xxoo</span><span style="color: #800000;"&gt;'</span>,<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;seven</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;) self.set_header(</span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;bili</span><span style="color: #800000;"&gt;'</span>,<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;daobidao</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;) self.set_header(</span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;Access-Control-Expose-Headers</span><span style="color: #800000;"&gt;'</span>,<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;xxoo,bili</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;) self.write(</span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;{"status": true,10)</pre>

> > 
<p>
    <input type=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;submit</span><span style="color: #800000;"&gt;"</span> onclick=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;XmlSendRequest();</span><span style="color: #800000;"&gt;"</span> />
</p>

<p>
    <input type=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;submit</span><span style="color: #800000;"&gt;"</span> onclick=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;JqSendRequest();</span><span style="color: #800000;"&gt;"</span> />
</p>

<script type=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;text/javascript</span><span style="color: #800000;"&gt;"</span> src=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;jquery-1.12.4.js</span><span style="color: #800000;"&gt;"</span>></script>
<script><span style="color: #000000;"&gt;
    function XmlSendRequest(){
        var xhr </span>=<span style="color: #000000;"&gt; new XMLHttpRequest();
        xhr.onreadystatechange </span>=<span style="color: #000000;"&gt; function(){
            </span><span style="color: #0000ff;"&gt;if</span>(xhr.readyState == 4<span style="color: #000000;"&gt;) {
                var result </span>=<span style="color: #000000;"&gt; xhr.responseText;
                console.log(result);
            }
        };

        xhr.withCredentials </span>=<span style="color: #000000;"&gt; true;

        xhr.open(</span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;PUT</span><span style="color: #800000;"&gt;'</span>,xhrFields:{withCredentials: true},xmlHttpRequest){
                console.log(data);
            }
        })
    }


</span></script>

</span><span style="color: #0000ff;"&gt;def</span><span style="color: #000000;"&gt; put(self): self.set_header(</span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;Access-Control-Allow-Origin</span><span style="color: #800000;"&gt;'</span>,<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;http://www.xxx.com</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;) self.set_header(</span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;Access-Control-Allow-Credentials</span><span style="color: #800000;"&gt;'</span>,<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;true</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;) self.set_header(</span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;xxoo</span><span style="color: #800000;"&gt;'</span>,<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;daobidao</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;) self.set_header(</span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;Access-Control-Expose-Headers</span><span style="color: #800000;"&gt;'</span>,bili</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;) self.set_cookie(</span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;kkkkk</span><span style="color: #800000;"&gt;'</span>,<span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;vvvvv</span><span style="color: #800000;"&gt;'</span><span style="color: #000000;"&gt;); self.write(</span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;{"status": true,10)</pre>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同