溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
