原生Ajax--XmlHttpRequest对象
Posted sun96
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生Ajax--XmlHttpRequest对象相关的知识,希望对你有一定的参考价值。
Ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE)
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...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="ajax" onclick="ajax1();"/> <script> function ajax1() { var xhr= new XMLHttpRequest(); //创建对象 xhr.open(‘GET‘,‘/xiaoqing/ajax_json‘,true); xhr.send(‘name=root;pwd=123‘); xhr.onreadystatechange= function() { if (xhr.readyState==4){ var obj=JSON.parse(xhr.responseText); //返回值 console.log(obj); } } } </script> </body> </html>
import json def ajax_json(request): ret = {‘status‘:True,‘data‘:None} return HttpResponse(json.dumps(ret),status=404,reason="Not Found")
如果是post请求发过去:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="ajax" onclick="ajax1();"/> <script src="/static/jquery-3.2.1.min.js"></script> <script src="/static/jquery.cookie.js"></script> <script> var csrftoken = $.cookie(‘csrftoken‘); function ajax1() { var xhr= new XMLHttpRequest(); //创建对象 xhr.open(‘POST‘,‘/xiaoqing/ajax_json/‘,true); xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded; charset-UTF-8‘);//POST请求必须设置 xhr.setRequestHeader(‘X-CSRFtoken‘,csrftoken); #csrf_token 请求头 xhr.send(‘name=root;pwd=123‘); xhr.onreadystatechange = function() { if (xhr.readyState == 4){ var obj = JSON.parse(xhr.responseText); //返回值 console.log(obj); console.log(csrftoken); } } } </script> </body> </html>
兼容IE
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‘, "/test/", true); // 发送请求 xhr.send(); } </script>
以上是关于原生Ajax--XmlHttpRequest对象的主要内容,如果未能解决你的问题,请参考以下文章