您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
jquery是对Ajax的一个封装,真正的操作是封装里面的内容(基于内部调用原生的Ajax的XMLHTTPRequest)
Ajax还有一种是伪造ajax,所为伪造就是不用XMLHTTPRequest,利用的浏览器的一种技术实现的
XmlHttpRequest对象的主要方法:
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()
终止请求
发送
监听状态
<body>
<input type="text" id="i1"> + <input type="text" id="i2"> = <input type="text" id="i3">
<input type="button" value="原生提交ajax" onclick="addajax();">
<script>
function addajax() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function () {
if(xhr.readyState==4){
alert(xhr.responseText)
}
}
xhr.open('GET','/add/?i1=11&i2=13');
xhr.send();
}
</script>
</body>
上面的内容是在body里面,后台request.post里面是没有数据的,要有需要添加请求头如下图:
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...
iframe是可以伪造的,不会刷新。结合form来提交数据
填写回调函数
返回来的是放在了iframe里面。如果iframe里面有内容了,说明有返回了。通过onload函数来加载
取值是不一样的,因为有两个document,需要进入这个对象里面
最终的伪造ajax
views代码
def upload(request):
if request.method == "GET":
return render(request,'upload.html')
else:
import os
file_obj = request.FILES.get('wenjian')
print(file_obj.name)
file_path = os.path.join('static',file_obj.name)
with open(file_path,'wb') as f:
for chun in file_obj.chunks():
f.write(chun)
return HttpResponse(file_path)
html代码
<body>
<input type="file" id="i1">
<a onclick="uploadajax();">上传</a>
<div id="con"></div>
<script>
function uploadajax() {
var formData = new FormData();//依赖formData这个对象
formData.append('k1','v1');//通过append来给formData添加数据
formData.append('wenjian',document.getElementById('i1').files[0]);//这里通过id得到的结果是一个列表,所以可以通过0位置来取第一个值
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function () {
if(xhr.readyState == 4){
var file_path = xhr.responseText;
console.log(file_path)
var tag = document.createElement('img');
tag.src = "/" + file_path;
document.getElementById('con').appendChild(tag);
}
};
xhr.open('POST','/upload/');
xhr.send(formData)
}
</script>
</body>
结果:
function upload2(){
var formData = new FormData();
formData.append('k1','v1');
// formData.append('fafafa',document.getElementById('i1').files[0]);
formData.append('fafafa',$('#i2')[0].files[0]);
// $('#i2') -> $('#i2')[0]
// document.getElementById('i1') -> $(document.getElementById('i1'))
$.ajax({
url: '/upload/',
type: 'POST',
data: formData,
contentType:false,
processData:false,
success:function(arg){
var tag = document.createElement('img');
tag.src = "/"+ arg;
$('#container2').append(tag);
}
})
}
#伪造的方法是下面
<h2>伪 Ajax上传文件</h2>
<form id="f1" method="POST" action="/upload/" target="ifr" enctype="multipart/form-data">
<iframe id="ifr" name="ifr" ></iframe>
<input type="file" name="fafafa" />
<a onclick="upload3();">上传</a>
</form>
<div id="container3"></div>
function upload3(){
document.getElementById('ifr').onload = loadIframe;
document.getElementById('f1').submit();
}
function loadIframe(){
var content = document.getElementById('ifr').contentWindow.document.body.innerText;
var tag = document.createElement('img');
tag.src = "/"+ content;
$('#container3').append(tag);
}
上传的按钮好看是吧input type=file这个通过opcity来设置为透明度为0
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。