原生ajax源码
1 function GetXHR(){ 2 var xhr = null; 3 if(XMLHttpRequest){ 4 xhr = new XMLHttpRequest(); #如果没有XMLHttpRequest对象就使用ie的ActiveXObject("Microsoft.XMLHTTP")对象 5 }else{ 6 xhr = new ActiveXObject("Microsoft.XMLHTTP"); 7 } 8 return xhr; 9 10 } 11 12 function XhrPostRequest(){ 13 var xhr = GetXHR(); 14 // 定义回调函数 15 xhr.onreadystatechange = function(){ 16 if(xhr.readyState == 4){ 17 // 已经接收到全部响应数据，执行以下操作 18 var data = xhr.responseText; 19 console.log(data); 20 } 21 }; 22 // 指定连接方式和地址----文件方式 23 xhr.open('POST', "/test/", true); 24 // 设置请求头 25 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8'); #使用POST的方法是需要加一个请求头 26 // 发送请求 27 xhr.send('n1=1;n2=2;'); 28 } 29 30 function XhrGetRequest(){ 31 var xhr = GetXHR(); 32 // 定义回调函数 33 xhr.onreadystatechange = function(){ 34 if(xhr.readyState == 4){ 35 // 已经接收到全部响应数据，执行以下操作 36 var data = xhr.responseText; 37 console.log(data); 38 } 39 }; 40 // 指定连接方式和地址----文件方式 41 xhr.open('get', "/test/", true); 42 // 发送请求 43 xhr.send(); 44 } 45 46 jQuery的ajax提交在返回函数这里 47 success：function(arg,a1,a2)这几个参数里面有一个就是XMLHtt
伪ajax操作源码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <!--<input type="text" id="url"/> 9 <input type="button" value="提交" onclick="iframerequest();"/> 10 <iframe id="iframe" src="https://www.baidu.com"> </iframe>--> 11 {#伪ajax提交#} 12 <input type="text"> 13 <form action="/ajax_json/" method="POST" target="iframe1"> 14 <iframe id="ifml" name="iframe1" onload="iframeload();"></iframe> 15 {% csrf_token %} 16 <input type="text" name="username"/> 17 <input type="text" name="email"/> 18 <input type="submit" value="form提交" onclick="sunmit()"/> 19 </form> 20 <script src="/static/jquery.js"></script> 21 22 <script> 23 /* function iframerequest(){ 24 var url=$('#url').val(); 25 $('#iframe').attr('src',url)*/ 26 /* function iframeload(){ 27 console.log('233333') 28 }*/ 29 function sunmit(){ 30 $('#ifml').load(function () { 31 var text=$('#ifml').contents().find('body').text(); 32 var obj = JSON.parse(text); 33 console.log(obj) 34 }) 35 } 36 </script> 37 </body> 38 </html>
1 def ajax(request): 2 print request.POST 3 ret = {'code':True,'data':None} 4 import json 5 return render(request,'ajax.html') 6 7 def ajax_json(request): 8 print request.POST 9 ret = {'code':True,'data':request.POST.get('username')} 10 import json 11 return HttpResponse(json.dumps(ret))
记录笔记
参考博客：
http://www.cnblogs.com/wupeiqi/articles/5703697.html
原生
function GetXHR(){
var xhr = null;
if(XMLHttpRequest){
xhr = new XMLHttpRequest(); #如果没有XMLHttpRequest对象就使用ie的ActiveXObject("Microsoft.XMLHTTP")对象
}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);
}
};
// 指定连接方式和地址----文件方式 是否异步 true
xhr.open('POST', "/test/", true);
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8'); #使用POST的方法是需要加一个请求头
// 发送请求
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();
}
jQuery的ajax提交在返回函数这里
success：function(arg,a1,a2)这几个参数里面有一个就是XMLHttpRequest，可以在这个对象里面取到所有想取的东西
伪Ajax操作
<iframe></iframe>标签
<form action="/ajax_json/" method="POST" target="iframe1">
<iframe id="ifml" name="iframe1" onload="iframeload();"></iframe>
{% csrf_token %}
<input type="text" name="username"/>
<input type="text" name="email"/>
<input type="submit" value="form提交" onclick="sunmit()"/>
</form>
function sunmit(){
$('#ifml').load(function () { #给iframe的onload绑定事件，当执行onload的时候获取后台返回的数据，然后进行相关的操作
var text=$('#ifml').contents().find('body').text();
var obj = JSON.parse(text);
console.log(obj)
})
时机：
如果发送的是【普通数据】 -> jQuery，XMLHttpRequest，iframe