day23-原生Ajax
一、前言
Ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作，该对象在主流浏览器中均存在(除早起的IE)，Ajax首次出现IE5.5中存在（ActiveX控件）。
二、XMLHttpRequest对象介绍
2.1、创建XMLHttpRequest对象
>>>b = new XMLHttpRequest() #创建一个对象
XMLHttpRequest {onreadystatechange: null, readyState: 0, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
>>>b.open() #调用open方法，表示创建一个连接
2.2、XmlHttpRequest对象的主要方法
说明：这些是XmlHttpRequest对象的主要方法，使用这些方法就能模拟ajax的效果
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()
终止请求(终止耗时很久的ajax的请求)
2.3、XmlHttpRequest对象的主要属性
说明：这边只是XmlHttpRequest对象的属性，不用加括号，直接调用
a. Number readyState
状态值（整数）
详细：
0-未初始化，尚未调用open()方法；
1-启动，调用了open()方法，未调用send()方法；
2-发送，已经调用了send()方法，未接收到响应；
3-接收，已经接收到部分响应数据；
4-完成，已经接收到全部响应数据；
b. Function onreadystatechange
当readyState的值改变时自动触发执行其对应的函数（回调函数），当上面的值发生变化的时候，每一次都会执行此onreadystatechange函数
c. String responseText
服务器返回的数据（字符串类型）
d. XmlDocument responseXML
服务器返回的数据（Xml对象）,帮你转化为xml对象，取值的时候，根据 obj.属性 去取值
e. Number states
状态码（整数），如：200、404...
f. String statesText
状态文本（字符串），如：OK、NotFound...
三、 跨浏览器支持
- XmlHttpRequest，支持的浏览器：IE7+, Firefox, Chrome, Opera, etc.
- ActiveXObject("Microsoft.XMLHTTP") 支持的浏览器：IE6, IE5
3.1、ajax函数和ajax_json函数
ajax函数：
def ajax(request):
return render(request,'ajax.html')
ajax_json函数：
def ajax_json(request):
print(request.POST)
ret = {'status':True,'data':None} #我们一般不会在返回的状态码上做文章，一般都是在code上做文章
import json
return HttpResponse(json.dumps(ret))
3.1、GET请求的方式
template的ajax.html
<body>
<input type="button" value="Ajax1" onclick="Ajax1();">
<script>
//设置浏览器
function GetXHR(){
var xhr = null;
if(XMLHttpRequest){
xhr = new XMLHttpRequest(); //支持谷歌、火狐浏览器
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP"); //支持IE浏览器
}
return xhr;
}
function Ajax1(){
var xhr = new GetXHR();
xhr.open('GET','/ajax_json/',true); //默认是true
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
//接收完毕
//console.log(xhr.responseText);//这个就是我们要拿到的返回值
var obj = JSON.parse(xhr.responseText);
console.log(obj);
}
};
//xhr.setRequestHeader('k1','v1'); //发送请求头
xhr.send('name=root;pwd=123'); //必须以字符串的形式发，中间是分号
}
</script>
</body>
3.3、post的请求方式
<body>
<input type="button" value="Ajax1" onclick="Ajax1();">
<script>
//跟上面一样
function GetXHR(){
var xhr = null;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
function Ajax1(){
var xhr = new GetXHR();
//xhr.open('GET','/ajax_json/',true); //默认是true
xhr.open('POST','/ajax_json/',true); //默认是true
//定义回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
//接收完毕
//console.log(xhr.responseText);//这个就是我们要拿到的返回值
var obj = JSON.parse(xhr.responseText);
console.log(obj);
}
};
//xhr.setRequestHeader('k1','v1'); //发送请求头
//post方法需要设置一下请求头，后台才能接收到
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
xhr.send('name=root;pwd=123'); //必须以字符串的形式发，中间是分号
}
</script>
</body>
四、jquery支持ajax获取的xhr对象
在我们的印象中 ajax只接收1个参数args，其实不然，它是接收三个参数的，args，statusText，xmlHttpRequest，第三个就xmlHttpRequest就是xmlHttpRequest对象，具有的属性和方法跟上面的是一模一样的
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script>
function JqSendRequest(){
$.ajax({
url: "/ajax_json/",
type: 'GET',
dataType: 'text',
success: function(data, statusText, xmlHttpRequest){ //最后一个是xmlHttpRequest对象，具有xmlHttpRequest对象的一切属性和方法
console.log(data);
}
})
}
</script>
博客编写参照此博客中的，原生ajax和jQuery Ajax：https://www.cnblogs.com/wupeiqi/articles/5703697.html
浙公网安备 33010602011771号