摘要:一般地,使用事件探測請求的完成。但一個完成的請求不一定是成功的請求,例如,事件的處理程序應該檢查對象的狀態碼來確定收到的是而不是的響應獲取信息創建對象進度事件發送請求事件會在瀏覽器接收新數據期間周期性地觸發。
一般地,使用readystatechange事件探測HTTP請求的完成。XHR2規范草案定義了進度事件Progress Events規范,XMLHttpRequest對象在請求的不同階段觸發不同類型的事件,所以它不再需要檢査readyState屬性。這個草案定義了與客戶端服務器通信有關的事件。這些事件最早其實只針對XHR操作,但目前也被其他API(如File API)借鑒。本文將詳細介紹進度事件
基礎
有以下6個進度事件
loadstart:在接收到響應數據的第一個字節時觸發
progress:在接收響應期間持續不斷地觸
error:在請求發生錯誤時觸發
abort:在因為調用abort()方法而終止連接時觸發
load:在接收到完整的響應數據時觸發
loadend:在通信完成或者觸發error、abort或load事件后觸發
timeout:超時發生時觸發
[注意]IE9-瀏覽器不支持以上事件(IE9瀏覽器僅支持load事件)
每個請求都從觸發loadstart事件開始,接下來,通常每隔50毫秒左右觸發一次progress事件,然后觸發load、error、abort或timeout事件中的一個,最后以觸發loadend事件結束
對于任何具體請求,瀏覽器將只會觸發load、abort、timeout和error事件中的一個。XHR2規范草案指出一旦這些事件中的一個發生后,瀏覽器應該觸發loadend事件
load
響應接收完畢后將觸發load事件,因此也就沒有必要去檢查readyState屬性了。但一個完成的請求不一定是成功的請求,例如,load事件的處理程序應該檢查XMLHttpRequest對象的status狀態碼來確定收到的是“200 OK”而不是“404 Not Found”的HTTP響應
能僅僅像使用常見的progress事件處理程序一樣使用upload事件處理程序。對于XMLHttpRequest對象,設置XHR.onprogress以監控響應的下載進度,并且設置XHR.upload.onprogress以監控請求的上傳進度
$file = "photo/test.jpg"; binary_to_file($file); echo "文件上傳成功!";
}else{
echo "文件格式不正確,請選擇圖片文件";
}
function binary_to_file($file){
$content = $GLOBALS["HTTP_RAW_POST_DATA"]; // 需要php.ini設置 if(empty($content)){ $content = file_get_contents("php://input"); //不需要php.ini設置,內存壓力小 } $ret = file_put_contents($file, $content, true); return $ret;
};
?>
其他事件
HTTP請求無法完成有3種情況,對應3種事件。如果請求超時,會觸發timeout事件。如果請求中止,會觸發abort事件。最后,像太多重定向這樣的網絡錯誤會阻止請求完成,但這些情況發生時會觸發error事件
可以通過調用XMLHttpRequest對象的abort()方法來取消正在進行的HTTP請求。調用abort()方法在這個對象上觸發abort事件
調用abort()的主要原因是完成取消或超時請求消耗的時間太長或當響應變得無關時。假如使用XMLHttpRequest為文本輸入域請求自動完成推薦。如果用戶在服務器的建議達到之前輸入了新字符,這時等待請求不再有用,應該中止
XHR對象的timeout屬性等于一個整數,表示多少毫秒后,如果請求仍然沒有得到結果,就會自動終止。該屬性默認等于0,表示沒有時間限制
如果請求超時,將觸發ontimeout事件
var xhr = new XMLHttpRequest();
btn.onclick = function(){
xhr.abort();
};
xhr.ontimeout = function(){
console.log("The request timed out.");
}
xhr.timeout = 100;
xhr.onabort = function(){
console.log("The transfer has been canceled by the user.");
}
xhr.onerror = function(){
console.log("An error occurred while transferring the file.");
}
xhr.onloadend = function(){
console.log("請求結束");
}
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/103033.html
摘要:同源策略指的是當前頁面和目標協議域名和端口均相同。發出請求的頁面所在域。響應的頭部信息在后端處理,不在此處講解。該事件會在數據接收期間不斷觸發,但間隔不確定。服務器確認允許之后,才發起實際的請求。 ajax作為前端開發必需的基礎能力之一,你可能會使用它,但并不一定懂得其原理,以及更深入的服務器通信相關的知識。在最近兩天的整理過程中,看了大量的文章,發現自己的后端能力已經限制自己在網絡通...
摘要:隨著對象被廣泛的接收,也開始著手制定相應的標準來規范其行為。四設置請求頭每個請求和響應都會帶有相應的頭部信息,包含一些與數據,收發者網絡環境與狀態等相關信息。該方法會令對象實例停止觸發事件,并且不再允許訪問任何和響應有關的對象屬性。 在上一篇文章中我們知道,AJAX是一系列技術的統稱。在本篇中我們將更進一步,詳細解釋如何使用Ajax技術在項目中獲取數據。而為了解釋清楚,我們首先要搞清楚...
摘要:一款精簡而豐富的微型框架,非常適合以為核心的項目使用。并集成指令模板進度條效果等功能。雖然支持載入頁面的運行,但是由于安全限制以及可能出現的重復運行的問題,建議將所有寫在主頁面,事件以委托方式綁定。使用模式請求頁面,這樣可以保證是完全重載。 jQloader v0.2.3 一款精簡而豐富的微型框架,非常適合以 jQuery 為核心的項目使用。 它的核心功能為 ajax + pushS...
閱讀 3422·2023-04-25 22:44
閱讀 926·2021-11-15 11:37
閱讀 1632·2019-08-30 15:55
閱讀 2639·2019-08-30 15:54
閱讀 1080·2019-08-30 13:45
閱讀 1430·2019-08-29 17:14
閱讀 1853·2019-08-29 13:50
閱讀 3402·2019-08-26 11:39