JavaScript Ajax與Comet——“進度事件”的注意要點

ad6623 發(fā)布于2019-08-19 17:40 / 2669人閱讀

摘要：有以下個進度事件在接收到響應數據的第一個字節(jié)時觸發(fā)。在接收響應數據期間持續(xù)的觸發(fā)在請求發(fā)生錯誤時觸發(fā)在因調用方法而終止連接時觸發(fā)在接收到完整的響應數據時觸發(fā)在通信完成或者觸發(fā)，，事件后觸發(fā)。

有以下6個進度事件：

loadstart: 在接收到響應數據的第一個字節(jié)時觸發(fā)。

progress: 在接收響應數據期間持續(xù)的觸發(fā)

error: 在請求發(fā)生錯誤時觸發(fā)

abort: 在因調用abort() 方法而終止連接時觸發(fā)

load: 在接收到完整的響應數據時觸發(fā)

loadend: 在通信完成或者觸發(fā)error， abort， load事件后觸發(fā)。

現在所有的主流瀏覽器都支持load事件，前五個除了IE其他的都支持

load事件

下面是使用示例：

xhr.onload = function() {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
        alert(xhr.responseText);
    } else {
        alert("Request was unsuccessful:" + xhr.status);
    }
}

放到open方法之前。

如：

var xhr = new XMLHttpRequest();
// xhr.onreadystatechange = function () {
//     if (xhr.readyState == 4) {
//         if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
//             console.log(xhr.responseText);
//         } else {
//             console.log("error");
//         }    
//     }
// };
xhr.onload = function () {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
        console.log(xhr.responseText);
    } else {
        console.log("error");
    }
};
xhr.open("get", "getexample.php", true);
xhr.send(null);

響應接收完畢后將觸發(fā)load事件，因此也就沒有必要去檢查readyState屬性了。

progress事件

onprogress事件處理程序會接收一個event對象，其target屬性是XHR對象，但包含著三個額外屬性：

lengthComputable

position

totalSize

其中l(wèi)engthComputable表示進度信息是否可用的布爾值，position表示已經接收的字節(jié)數，totalSize表示根據Content-Length響應頭部確定的預期字節(jié)數。

根據這些信息，就可以創(chuàng)建一個進度指示器：

xhr.onprogress = function () {
    if (event.lengthComputable) {
        document.getElementById("status").innerHTML = "Received " + event.position + " of " + event.totalSize + " bytes.";
    }
};

要注意的是position已改為loaded;totalSize已改為total。

GPU云服務器云服務器 ajax的同步與異步 javascript與js的區(qū)別 java與javascript的區(qū)別云主機的要點

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/yun/78762.html

JavaScript Ajax與Comet——“XMLHttpRequest2級”的注意要點

摘要：并非所有的瀏覽器都完整的實現了級的規(guī)范，但是所有的瀏覽器都實現了它部分的規(guī)范。超時設定唯一支持的超時設定事件，對象的事件。方法用于重寫響應的類型。它能強迫服務器返回的數據類型給些為本方法提供的類型。并非所有的瀏覽器都完整的實現了XMLHttpRequest 2 級的規(guī)范，但是所有的瀏覽器都實現了它部分的規(guī)范。 FormData FormData類型 append()向其添加數據，...

melody_lql 2019-08-21 13:29 評論0 收藏0
JavaScript Ajax與Comet——“其他跨域技術”的注意要點

摘要：由兩部分組成回調函數和數據?；卣{函數是當響應到來時應該在頁面中調用的函數，回調函數的名字一般是在請求中指定的。下面是以個的例子回調函數的名字就是是通過動態(tài)的元素來使用的，使用時可以為屬性指定一個跨域。是為與其他傳遞消息的很相似。圖像Ping技術根據一個網頁可以從任何網頁中加載圖像而不用擔心使用跨域的原理，我們可以動態(tài)的創(chuàng)建圖像，使用他們的onload和onerror事件處理程序...

Hwg 2019-08-19 17:40 評論0 收藏0
JavaScript Ajax與Comet——“XMLHttpRequest對象”的注意要點

摘要：在中，對象是通過庫中的對象實現的?？梢詸z測對象的屬性，該屬性表示請求響應過程的當前活動階段。已經調用但尚未接收到響應接收。由于內存原因，不建議重用對象。頭部信息對象提供了操作請求頭部和響應頭部信息的方法。建議使用自定義的頭部名稱。在IE5中，XHR對象是通過MSXML庫中的ActiveX對象實現的。在IE中可能會遇到三種不同版本的XHR對象，即MSXML2.XMLHttp、MSXML...

Martin91 2019-08-19 17:39 評論0 收藏0
JavaScript Ajax與Comet——“跨源資源共享”的注意要點

摘要：注意請求和響應都不包含信息。對象的安全機制部分實現了的規(guī)范。請求返回后會觸發(fā)事件，響應數據保存在屬性中。無論是同源請求還是跨域請求，對于本地資源最好使用相對，在訪問遠程資源時再使用絕對。發(fā)送請求之后，服務器決定是否允許這種類型的請求。通過XHR實現Ajax通信的一個主要限制，來源于跨域安全策略。在默認情況下，Ajax只能訪問與包含它的頁面位于同一個域中的資源。但是有時也需要一些跨域的...

haobowd 2019-08-19 17:40 評論0 收藏0
高程3總結#第21章Ajax與Comet

摘要：頁面發(fā)起一個到服務器的請求，然后服務器一直保持連接打開，直到有數據可發(fā)送。 Ajax與Comet XMLHttpRequest對象 IE5是第一款引入XHR對象的瀏覽器，在IE5中，XHR對象是通過MSXML庫中的一個ActiveX對象實現的 //適用于 IE7 之前的版本 function createXHR(){ if (typeof arguments.callee.acti...

MudOnTire 2019-08-23 12:12 評論0 收藏0