原生ajax源码
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);
}
};
// 指定连接方式和地址----文件方式
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)这几个参数里面有一个就是XMLHtt伪ajax操作源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--<input type="text" id="url"/>
<input type="button" value="提交" onclick="iframerequest();"/>
<iframe id="iframe" src="https://www.baidu.com"> </iframe>-->
{#伪ajax提交#}
<input type="text">
<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>
<script src="/static/jquery.js"></script> <script>
/* function iframerequest(){
var url=$('#url').val();
$('#iframe').attr('src',url)*/
/* function iframeload(){
console.log('233333')
}*/
function sunmit(){
$('#ifml').load(function () {
var text=$('#ifml').contents().find('body').text();
var obj = JSON.parse(text);
console.log(obj)
})
}
</script>
</body>
</html>
def ajax(request):
print request.POST
ret = {'code':True,'data':None}
import json
return render(request,'ajax.html') def ajax_json(request):
print request.POST
ret = {'code':True,'data':request.POST.get('username')}
import json
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