Django 原生Ajax详解
|
Ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作，该对象在主流浏览器中均存在(除早起的IE)，Ajax首次出现IE5.5中存在（ActiveX控件）。 1. ?XmlHttpRequest对象介绍 XmlHttpRequest对象的主要方法： a. void open(String method,String url,Boolen async) ? ?用于创建请求 ? ?参数： ? ? ? ?method： 请求方式（字符串类型），如：POST、GET、DELETE... ? ? ? ?url： ? ?要请求的地址（字符串类型） ? ? ? ?async： ?是否异步（布尔类型） b. void send(String body) ? ? 用于发送请求 ? ? 参数： ? ? ? ? body： 要发送的数据（字符串类型） c. void setRequestHeader(String header,String value) ? ? 用于设置请求头 ? ? 参数： ? ? ? ? header： 请求头的key（字符串类型） ? ? ? ? vlaue： ?请求头的value（字符串类型） d. String getAllResponseHeaders() ? ? 获取所有响应头 ? ? 返回值： ? ? ? ? 响应头数据（字符串类型） e. String getResponseHeader(String header) ? ? 获取响应头中指定header的值 ? ? 参数： ? ? ? ? header： 响应头的key（字符串类型） ? ? 返回值： ? ? ? ? 响应头中指定的header对应的值 f. void abort() ? ? 终止请求 XmlHttpRequest对象的主要属性： a. Number readyState ? ?状态值（整数） ? ?详细： ? ? ? 0-未初始化，尚未调用open()方法； ? ? ? 1-启动，调用了open()方法，未调用send()方法； ? ? ? 2-发送，已经调用了send()方法，未接收到响应； ? ? ? 3-接收，已经接收到部分响应数据； ? ? ? 4-完成，已经接收到全部响应数据； b. Function onreadystatechange ? ?当readyState的值改变时自动触发执行其对应的函数（回调函数） c. String responseText ? ?服务器返回的数据（字符串类型） d. XmlDocument responseXML ? ?服务器返回的数据（Xml对象） e. Number states ? ?状态码（整数），如：200、404... f. String statesText ? ?状态文本（字符串），如：OK、NotFound... 2、跨浏览器支持 XmlHttpRequest IE7+,Firefox,Chrome,Opera,etc. ActiveXObject("Microsoft.XMLHTTP") IE6,IE5 代码示例： <!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title></title>
</head>
<body>
????<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">
????????function?GetXHR(){
????????????var?xhr?=?null;
????????????if(XMLHttpRequest){
????????????????xhr?=?new?XMLHttpRequest();
????????????}else{
????????????????xhr?=?new?ActiveXObject("Microsoft.XMLHTTP");
????????????}
????????????return?xhr;
????????}
????????function?XhrPostRequest(){
????????????var?xhr?=?GetXHR();
????????????//?定义回调函数
????????????xhr.onreadystatechange?=?function(){
????????????????if(xhr.readyState?==?4){
????????????????????//?已经接收到全部响应数据，执行以下操作
????????????????????var?data?=?xhr.responseText;
????????????????????console.log(data);
????????????????}
????????????};
????????????//?指定连接方式和地址----文件方式
????????????xhr.open('POST',?"/test/",?true);
????????????//?设置请求头
????????????xhr.setRequestHeader('Content-Type',?'application/x-www-form-urlencoded;?charset-UTF-8');
????????????//?发送请求
????????????xhr.send('n1=1;n2=2;');
????????}
????????function?XhrGetRequest(){
????????????var?xhr?=?GetXHR();
????????????//?定义回调函数
????????????xhr.onreadystatechange?=?function(){
????????????????if(xhr.readyState?==?4){
????????????????????//?已经接收到全部响应数据，执行以下操作
????????????????????var?data?=?xhr.responseText;
????????????????????console.log(data);
????????????????}
????????????};
????????????//?指定连接方式和地址----文件方式
????????????xhr.open('get',?true);
????????????//?发送请求
????????????xhr.send();
????????}
????</script>
</body>
</html>
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |