<table style="height: 30px; background-color: #afeeee; width: 1266px; ; width: 1266px;" border="0"><tr>
<td><span style="font-size: 16px;">一、简介</td>
</tr></table>
ajax是什么？
AJAX（Asynchronous JavaScript and XML） 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
AJAX， (异步的JavaScript和XML)，一种创建交互式网页应用的网页开发技术方案。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
ajax依赖XMLHttpRequest 对象
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新，而ajax刚好依赖他，老版本得浏览器不支持的话需使用ActiveXObject。
XmlHttpRequest对象的方法和参数：
method： 请求方式（字符串类型），如：POST、GET、DELETE...
url： 要请求的地址（字符串类型）
async： 是否异步（布尔类型）
b. <span style="color: #0000ff;">void<span style="color: #000000;"> send(String body)
用于发送请求
参数：body： 要发送的数据（字符串类型）
c. <span style="color: #0000ff;">void<span style="color: #000000;"> setRequestHeader(String header,String value)
用于设置请求头
参数：header： 请求头的key（字符串类型）vlaue： 请求头的value（字符串类型）
d. String getAllResponseHeaders()
获取所有响应头
返回值：响应头数据（字符串类型）
e. String getResponseHeader(String header)
获取响应头中指定header的值
参数：header： 响应头的key（字符串类型）返回值：响应头中指定的header对应的值
f. <span style="color: #0000ff;">void<span style="color: #000000;"> abort()
终止请求</span></pre>
XmlHttpRequest对象主要属性：
0-<span style="color: #000000;">未初始化，尚未调用open()方法；
1-<span style="color: #000000;">启动，调用了open()方法，未调用send()方法；
2-<span style="color: #000000;">发送，已经调用了send()方法，未接收到响应；
3-<span style="color: #000000;">接收，已经接收到部分响应数据；
4-<span style="color: #000000;">完成，已经接收到全部响应数据；
b. Function onreadystatechange
当readyState的值改变时自动触发执行其对应的函数（回调函数）
c. String responseText
服务器返回的数据（字符串类型）
d. XmlDocument responseXML
服务器返回的数据（Xml对象）
e. Number states
服务端返回的状态码（整数），如：200、404<span style="color: #000000;">...
f. String statesText
服务端返回的状态文本（字符串），如：OK、NotFound...
使用样例
<h1>XMLHttpRequest - Ajax请求</h1><input type="button" onclick="XmlGetRequest();" value="Get发送请求" /><input type="button" onclick="XmlPostRequest();" value="Post发送请求" /><script src="/statics/jquery-1.12.4.js"></script><script type="text/javascript"><span style="color: #0000ff;">function</span><span style="color: #000000;"> GetXHR(){</span><span style="color: #0000ff;">var</span> xhr = <span style="color: #0000ff;">null</span><span style="color: #000000;">;</span><span style="color: #0000ff;">if</span><span style="color: #000000;">(XMLHttpRequest){xhr </span>= <span style="color: #0000ff;">new</span><span style="color: #000000;"> XMLHttpRequest();}</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{xhr </span>= <span style="color: #0000ff;">new</span> ActiveXObject("Microsoft.XMLHTTP"<span style="color: #000000;">);}</span><span style="color: #0000ff;">return</span><span style="color: #000000;"> xhr;}</span><span style="color: #008000;">//</span><span style="color: #008000;">兼容浏览器设置</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> XhrPostRequest(){</span><span style="color: #0000ff;">var</span> xhr =<span style="color: #000000;"> GetXHR();</span><span style="color: #008000;">//</span><span style="color: #008000;"> 定义回调<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a></span>xhr.onreadystatechange = <span style="color: #0000ff;">function</span><span style="color: #000000;">(){</span><span style="color: #0000ff;">if</span>(xhr.readyState == 4<span style="color: #000000;">){</span><span style="color: #008000;">//</span><span style="color: #008000;"> 已经接收到全部响应数据，执行以下操作</span><span style="color: #0000ff;">var</span> data =<span style="color: #000000;"> xhr.responseText;console.log(data);}};</span><span style="color: #008000;">//</span><span style="color: #008000;"> 指定连接方式和地址----<a href="/tag/wenjian/" target="_blank" class="keywords">文件</a>方式</span>xhr.open('POST',"/test/",<span style="color: #0000ff;">true</span><span style="color: #000000;">);</span><span style="color: #008000;">//</span><span style="color: #008000;"> 设置请求头，原因是django中会按照这种请求头解析，不然收不到数据</span>xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset-UTF-8'<span style="color: #000000;">);</span><span style="color: #008000;">//</span><span style="color: #008000;"> 发送请求</span>xhr.send('n1=1;n2=2;'<span style="color: #000000;">);}</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> XhrGetRequest(){</span><span style="color: #0000ff;">var</span> xhr =<span style="color: #000000;"> GetXHR();</span><span style="color: #008000;">//</span><span style="color: #008000;"> 定义回调<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a></span>xhr.onreadystatechange = <span style="color: #0000ff;">function</span><span style="color: #000000;">(){</span><span style="color: #0000ff;">if</span>(xhr.readyState == 4<span style="color: #000000;">){</span><span style="color: #008000;">//</span><span style="color: #008000;"> 已经接收到全部响应数据，执行以下操作</span><span style="color: #0000ff;">var</span> data = xhr.responseText;<span style="color: #008000;">//</span><span style="color: #008000;"><a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>字符串类型返回的数据</span>
<span style="color: #000000;"> console.log(data);
}
};
<span style="color: #008000;">//<span style="color: #008000;"> 指定连接方式和地址----文件方式
xhr.open('get',<span style="color: #0000ff;">true<span style="color: #000000;">);
<span style="color: #008000;">//<span style="color: #008000;"> 发送请求
<span style="color: #000000;"> xhr.send();
}
</span></script>
jquery中ajax的方法：
jQuery.post(...)所有参数：url: 待载入<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>的<a href="/tag/URLdizhi/" target="_blank" class="keywords">URL地址</a>data: 待发送 Key</span>/value 参数
<span style="color: #000000;"> success: 载入成功时回调函数
dataType: 返回内容格式，xml,html
jQuery.getJSON(...)所有参数：url: 待载入<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>的<a href="/tag/URLdizhi/" target="_blank" class="keywords">URL地址</a>data: 待发送 Key</span>/value 参数。
<span style="color: #000000;"> success: 载入成功时回调函数。
jQuery.getScript(...)所有参数：url: 待载入<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>的<a href="/tag/URLdizhi/" target="_blank" class="keywords">URL地址</a>data: 待发送 Key</span>/value 参数。
<span style="color: #000000;"> success: 载入成功时回调函数。
jQuery.ajax(...)部分参数：url：请求地址type：请求方式，GET、POST（</span>1.9<span style="color: #000000;">.0之后用method）headers：请求头data：要发送的数据contentType：即将发送信息至服务器的<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>编码类型(默认: </span>"application/x-www-form-urlencoded; charset=UTF-8"<span style="color: #000000;">)async：是否异步timeout：设置请求超时时间（毫秒）beforeSend：发送请求前执行的<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>(全局)complete：完成之<a href="/tag/houzhixing/" target="_blank" class="keywords">后执行</a>的回调<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>(全局)success：成功之<a href="/tag/houzhixing/" target="_blank" class="keywords">后执行</a>的回调<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>(全局)error：失败之<a href="/tag/houzhixing/" target="_blank" class="keywords">后执行</a>的回调<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>(全局)accepts：通过请求头发送给服务器，告诉服务器当前客户端课接受的数据类型dataType：将服务器端返回的数据转换成指定类型</span>"xml"<span style="color: #000000;">: 将服务器端返回的<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>转换成xml格式</span>"text"<span style="color: #000000;">: 将服务器端返回的<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>转换成普通文本格式</span>"html"<span style="color: #000000;">: 将服务器端返回的<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>转换成普通文本格式，在插入DOM中时，如果包含JavaScript<a href="/tag/biaoqian/" target="_blank" class="keywords">标签</a>，则会尝试去执行。</span>"script"<span style="color: #000000;">: 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>转换成普通文本格式</span>"json"<span style="color: #000000;">: 将服务器端返回的<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>转换成相应的JavaScript对象</span>"jsonp"<span style="color: #000000;">: JSONP 格式使用 JSONP 形式<a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a><a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>时，如 </span>"myurl?callback=?" jQuery 将<a href="/tag/zidongtihuan/" target="_blank" class="keywords">自动替换</a> ?<span style="color: #000000;"> 为正确的<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>名，以执行回调<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>如果不指定，jQuery 将<a href="/tag/zidong/" target="_blank" class="keywords">自动</a>根据HTTP包MIME信息返回相应类型(an XML MIME type will yield XML,</span><span style="color: #0000ff;">in</span> 1.4 JSON will yield a JavaScript object,<span style="color: #0000ff;">in</span> 1.4 script will execute the script,and anything <span style="color: #0000ff;">else</span><span style="color: #000000;"> will be returned as a stringconverters： 转换器，将服务器端的<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>根据指定的dataType转换类型，并传值给success回调<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>$.ajax({accepts: {mycustomtype: </span>'application/x-some-custom-type'<span style="color: #000000;">},</span><span style="color: #008000;">//</span><span style="color: #008000;"> Expect a `mycustomtype` back from server</span>dataType: 'mycustomtype'<span style="color: #008000;">//</span><span style="color: #008000;"> Instructions for how to deserialize a `mycustomtype`</span>
<span style="color: #000000;"> converters: {
'text mycustomtype': <span style="color: #0000ff;">function<span style="color: #000000;">(result) {
<span style="color: #008000;">//<span style="color: #008000;"> Do Stuff
<span style="color: #0000ff;">return<span style="color: #000000;"> newresult;
}
},});
Django发送ajax请求示例：
更多请参考：http://jquery.cuishifeng.cn/jQuery.Ajax.html
简介：
JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的
