Django
发布时间：2022-04-10 发布网站：大佬教程 code.js-code.com
大佬教程收集整理的这篇文章主要介绍了AJAX全套，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<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"><p class="pic_center"><img title="AJAX全套" alt="AJAX全套" id="code_img_closed_cb330f9b-7ab8-490c-b597-90a7d4ace25f" class="code_img_closed" src="https://cn.js-code.com/res/2019/01-08/12/1c53668bcee393edac0d7b3b3daff1ae.gif" /></p></p><p class="pic_center"><p class="pic_center"><img title="AJAX全套" alt="AJAX全套" id="code_img_opened_cb330f9b-7ab8-490c-b597-90a7d4ace25f" class="code_img_opened" style="display: none;" onclick="cnblogs_code_hide('cb330f9b-7ab8-490c-b597-90a7d4ace25f',event)" src="https://cn.js-code.com/res/2019/01-08/12/405b18b4b6584ae338e0f6ecaf736533.gif" /></p></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;">"</span><span style="color: #800000;">button</span><span style="color: #800000;">"</span> onclick=<span style="color: #800000;">"</span><span style="color: #800000;">XmlGetRequest();</span><span style="color: #800000;">"</span> value=<span style="color: #800000;">"</span><span style="color: #800000;">Get发送请求</span><span style="color: #800000;">"</span> />
<input type=<span style="color: #800000;">"</span><span style="color: #800000;">button</span><span style="color: #800000;">"</span> onclick=<span style="color: #800000;">"</span><span style="color: #800000;">XmlPostRequest();</span><span style="color: #800000;">"</span> value=<span style="color: #800000;">"</span><span style="color: #800000;">Post发送请求</span><span style="color: #800000;">"</span> />
<script src=<span style="color: #800000;">"</span><span style="color: #800000;">/statics/jquery-1.12.4.js</span><span style="color: #800000;">"</span>></script>
<script type=<span style="color: #800000;">"</span><span style="color: #800000;">text/javascript</span><span style="color: #800000;">"</span>><span style="color: #000000;">
function GetXHR(){
var xhr </span>=<span style="color: #000000;"> null;
</span><span style="color: #0000ff;">if</span><span style="color: #000000;">(XMLHttpRequest){
xhr </span>=<span style="color: #000000;"> new XMLHttpRequest();
}</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{
xhr </span>= new ActiveXObject(<span style="color: #800000;">"</span><span style="color: #800000;">Microsoft.XMLHTTP</span><span style="color: #800000;">"</span><span style="color: #000000;">);
}
</span><span style="color: #0000ff;">return</span><span style="color: #000000;"> xhr;
}
function XhrPostRequest(){
var xhr </span>=<span style="color: #000000;"> GetXHR();
</span>//<span style="color: #000000;"> 定义回调函数
xhr.onreadystatechange </span>=<span style="color: #000000;"> function(){
</span><span style="color: #0000ff;">if</span>(xhr.readyState == 4<span style="color: #000000;">){
</span>//<span style="color: #000000;"> 已经接收到全部响应数据，执行以下操作
var data </span>=<span style="color: #000000;"> xhr.responseText;
console.log(data);
}
};
</span>// 指定连接方式和地址----<span style="color: #000000;">文件方式
xhr.open(</span><span style="color: #800000;">'</span><span style="color: #800000;">POST</span><span style="color: #800000;">'</span>,<span style="color: #800000;">"</span><span style="color: #800000;">/test/</span><span style="color: #800000;">"</span><span style="color: #000000;">,true);
</span>//<span style="color: #000000;"> 设置请求头
xhr.setRequestHeader(</span><span style="color: #800000;">'</span><span style="color: #800000;">Content-Type</span><span style="color: #800000;">'</span>,<span style="color: #800000;">'</span><span style="color: #800000;">application/x-www-form-urlencoded; charset-UTF-8</span><span style="color: #800000;">'</span><span style="color: #000000;">);
</span>//<span style="color: #000000;"> 发送请求
xhr.send(</span><span style="color: #800000;">'</span><span style="color: #800000;">n1=1;n2=2;</span><span style="color: #800000;">'</span><span style="color: #000000;">);
}
function XhrGetRequest(){
var xhr </span>=<span style="color: #000000;"> GetXHR();
</span>//<span style="color: #000000;"> 定义回调函数
xhr.onreadystatechange </span>=<span style="color: #000000;"> function(){
</span><span style="color: #0000ff;">if</span>(xhr.readyState == 4<span style="color: #000000;">){
</span>//<span style="color: #000000;"> 已经接收到全部响应数据，执行以下操作
var data </span>=<span style="color: #000000;"> xhr.responseText;
console.log(data);
}
};
</span>// 指定连接方式和地址----<span style="color: #000000;">文件方式
xhr.open(</span><span style="color: #800000;">'</span><span style="color: #800000;">get</span><span style="color: #800000;">'</span>,true);
</span>//<span style="color: #000000;"> 发送请求
xhr.send();
}
</span></script>
