一原生AJAX
Ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作，该对象在主流浏览器中均存在(除早起的IE)，Ajax首次出现IE5.5中存在（ActiveX控件）
XMLHttpRequest对象的主要方法：
1.void open(String method,String url,Boolen async)用于创建请求
参数： method： 请求方式（字符串类型），如：POST、GET、DELETE...
url： 要请求的地址（字符串类型）
async： 是否异步（布尔类型）
2.void send(String body) 用于发送请求
参数:body： 要发送的数据（字符串类型）
3.void setRequsetHeader(String header,String value)用于设置请求头
参数：header： 请求头的key（字符串类型）
vlaue： 请求头的value（字符串类型）
4. getAllResponseHeaders()获取所有响应头
返回值：响应头数据（字符串类型）
5. getResponseHeader(String header) 获取响应头中指定header的值
参数： header： 响应头的key（字符串类型）
返回值：响应头中指定的header对应的值
6.void abort() 终止请求
XmlHttpRequest对象的主要属性：
1.readyState 状态值 (整数)
详细：
0-未初始化，尚未调用open()方法；
1-启动，调用了open()方法，未调用send()方法；
2-发送，已经调用了send()方法，未接收到响应；
3-接收，已经接收到部分响应数据；
4-完成，已经接收到全部响应数据；
2.inreadystatechange 当 前readyState的值改变时自动触发执行其对应的函数（回调函数）
3.responseText 服务器返回的数据（字符串类型）
4.responseXML 服务器返回的数据（Xml对象）
5.states 状态码（整数），如：200、404...
6.statesText 状态文本（字符串），如：OK、NotFound...
实例一
Ajax发送GET请求
<h3>1.Ajax发送GET请求</h3>
<div>
<a class="btn" onclick="AjaxSubmit1();">点我</a>
<a class="btn" onclick="AjaxSubmit2();">点我</a>
</div>
<script>
function AjaxSubmit1(){
$.ajax({
url:'ajax1',
type:'GET',
data:{"ew":"123"},
success:function(arg){
console.log(arg)
}
})
}
function AjaxSubmit2(){
var xhr =new XMLHttpRequest();
xhr.onreadystatechange = function(){
//接收完毕服务器返回的数据
if(xhr.readyState ==4){
//通过responseText拿到响应的文本
console.log(xhr.responseText);
}
};
xhr.open("GET",'ajax1?p=123');
xhr.send(null);
}
</script>
服务端
def index(request):
return render(request,'index.html')
def ajax1(request):
import time
print(request.GET)
print(request.POST)
print(request.FILES)
ret = {'static':True,'message':'iiii'}
import json
return HttpResponse(json.dumps(ret))
Ajax 发送POST请求
<h3>2.Ajax发送POST请求</h3>
<div>
<a class="btn" onclick="AjaxSubmit3();">点我</a>
<a class="btn" onclick="AjaxSubmit4();">点我</a>
</div>
function AjaxSubmit3(){
$.ajax({
url:'ajax1',
type: 'POST',
data:{'o':132},
succession:function (arg) {
console.log(arg)
}
})
}
function AjaxSubmit4(){
var xhr =new XMLHttpRequest();
xhr.onreadystatechange = function(){
//接收完毕服务器返回的数据
if(xhr.readyState ==4){
//通过responseText拿到响应的文本
console.log(xhr.responseText);
}
};
xhr.open("POST",'ajax1');
//设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8')
//发送请求
xhr.send("p=23");
}
二 伪“Ajax”
iframe
<h4>iframe</h4> <input type="text" id="url" /> <input type="button" value="发送Iframe请求" onclick="iframeRquest()"> <div> <iframe id="ifm" src="http://www.baidu.com" style="height:500px; 600px;"></iframe> </div>
<!--
1.该iframe相当于是嵌套的html 页面显示百度该网站
2.上面的代码是我们在input输入框输入一个网址如www.qq.com
3.点击按钮(发送iframe请求)，触发函数iframeRequest()
4.函数内部假如我们进行获取输入的网址www.qq.com然后赋值到iframe的src
5最终ifname -->
<script>
function iframeRquest(){
var url = $('#url').val();
$('#ifm').attr('src',url);
}
</script>
通过form结合iframe伪造ajax
原理：
1.form的target该内部属性指定到iframe ：相当于form进行submit交由iframe去提交数据
2.后台如果有响应数据，那么会响应的数据返回给iframe，iframe进行应用到标签的text（内容)
3.ifname接收到响应数据以后，会触发一个onload事件，
4.事件函数内部我们可以进行获取iframe得到的响应数据进行应用
<h5>form+iframe</h5>
<form action="ajax1" method="post" target="ifm1">
<iframe id="ifm1" name="ifm1"></iframe>
<input type="text" name="username">
<input type="text" name="email">
<input type="submit" onclick="sumitForm(this)" value="提交">
</form>
<script>function sumitForm(){
$('#ifm1').load(function(){
#console.log(this)
#console.log(ths.contentWindow)
#console.log(this.contentWindow.document.body.innerHTML);
#console.log($(this).contens().find('body').html());
// 获取ifml嵌套HTML里面的body下的内容
var text = $('#ifm1').contents().find('body').text();
var obj = JSON.parse(text); //进行反序列化
alert(text);
console.log(obj)
})
}
</script>
服务端
def index(request):
return render(request,'index.html')
def ajax1(request):
import time
print(request.GET)
print(request.POST)
print(request.FILES)
ret = {'static':True,'message':'iiii'}
import json
return HttpResponse(json.dumps(ret))
iframe 结合form 文件上传
<form action="upload_img" method="post" enctype="multipart/form-data" target="iframe">
<iframe style="display: none" id="ifrm" name="iframe"></iframe>
<input type="file" name="files">
<input type="submit" value="提交" onchange="upload_img()">
</form>
<h3>预览</h3>
<div id="preview"></div>
<script>
function upload_img(){
$("#ifrm").onload(function(){
//var conent = $('#ifrm').contents().find('body').text()
var conent =this.contentWindow.document.body.innerHTML;
var obj = JSON.parse(conent);
//清空匹配标签下的所有标签
$('#preview').empty()
var imgTag = document.createElement("img");
imgTag.src = obj.data;
$('#preview').append(imgTag);
})
}
</script>
def upload_img(request):
import os
import uuid
if request.method == 'POST':
file_obj = request.FILES.get('files')
nid = str(uuid.uuid4())
img_path = os.path.join('static/image/',nid+file_obj)
print(img_path)
with open(img_path,'wb') as f:
for item in file_obj.chunks():
f.write(item)
ret = {'code':True,'data':img_path}
import json
return HttpResponse(json.dumps(ret))
else:
request.method =='GET'
return render(request,'upload.html')