AJAX 利用 XHR2 Progress Event 實作下載進度列

最新推荐文章于 2022-08-30 11:23:35 发布

OkidoGreen

最新推荐文章于 2022-08-30 11:23:35 发布

阅读量2.2k

点赞数

分类专栏：跨域-Jsonp

跨域-Jsonp 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

AJAX 也有 Progress Bar

在 Web 開發環境下，我們常會利用 AJAX 技術提昇網頁反應速度與使用者體驗。這樣的作法在桌面環境的網路情況，通常不會有太大的問題，但是到了網路品質不佳的行動裝置環境，就容易造成反效果。以前的作法都是跳出「載入中...」等等之類的提示訊息，無法告訴使用者要等多久，但其實在 XHR2 (XMLHttpRequest Level 2) 的規範下就已經有定義了 Progress Event 事件，好讓我們在發送非同步請求時，也能即時得知資料傳送狀態。

原生 JavaScript 實作

JavaScript 實作方式如下，下面的範例利用了 Progress Tag 來顯示進度列。

 
         1 
       
         2 
       
         3 
       
         4 
       
         5 
       
         6 
       
         7 
       
         8 
       
         9 
       
         10 
       
         11 
       
         12 
       
         13 
       
         14 
       
         15 
       
         16 
       
         17 
       
         18 
       
         19 
       
         20 
       
         21 
       
         22 
       
         23 
       
        <!DOCTYPE html> 
       
        <html> 
       
        <head> 
       
        <title> 
        XMLHttpRequest Download Progress 
        </title> 
       
        </head> 
       
        <body> 
       
        <progress  
        id 
        = 
        "p" 
        > 
        </progress> 
       
            <script> 
       
        var 
          
        progressBar 
          
        = 
          
        document 
        . 
        getElementById 
        ( 
        'p' 
        ) 
        , 
          
        client 
          
        = 
          
        new 
          
        XMLHttpRequest 
        ( 
        ) 
        ; 
       
        client 
        . 
        open 
        ( 
        'GET' 
        , 
          
        'your-download-file.dat' 
        ) 
        ; 
       
        client 
        . 
        onprogress 
          
        = 
          
        function 
        ( 
        event 
        ) 
          
        { 
       
        if 
        ( 
        event 
        . 
        lengthComputable 
        ) 
          
        { 
       
        progressBar 
        . 
        max 
          
        = 
          
        event 
        . 
        total 
        ; 
       
        progressBar 
        . 
        value 
          
        = 
          
        event 
        . 
        loaded 
        ; 
       
        } 
       
        } 
        ; 
       
        client 
        . 
        onloadend 
          
        = 
          
        function 
        ( 
        event 
        ) 
          
        { 
       
        progressBar 
        . 
        value 
          
        = 
          
        event 
        . 
        loaded 
        ; 
       
        } 
        ; 
       
        client 
        . 
        send 
        ( 
        ) 
        ; 
       
        </script> 
       
        </body> 
       
        <html>

jQuery 實作 Download Progress Bar

我們最常用的 jQuery 也同樣可以實作，範例程式碼如下：

 
         1 
       
         2 
       
         3 
       
         4 
       
         5 
       
         6 
       
         7 
       
         8 
       
         9 
       
         10 
       
         11 
       
         12 
       
         13 
       
         14 
       
         15 
       
         16 
       
         17 
       
         18 
       
         19 
       
         20 
       
         21 
       
         22 
       
         23 
       
         24 
       
         25 
       
         26 
       
         27 
       
        <!DOCTYPE html> 
       
        <html> 
       
        <head> 
       
        <title> 
        XMLHttpRequest Download Progress (jQuery) 
        </title> 
       
            <script src="jquery-1.11.0.min.js"></script> 
       
        </head> 
       
        <body> 
       
        <progress  
        id 
        = 
        "p" 
        > 
        </progress> 
       
            <script> 
       
        $ 
        ( 
        document 
        ) 
        . 
        ready 
        ( 
        function 
          
        ( 
        ) 
          
        { 
       
        $ 
        . 
        ajax 
        ( 
        { 
       
        type 
        : 
          
        'GET' 
        , 
       
        url 
        : 
          
        'your-download-file.dat' 
        , 
       
        xhrFields 
        : 
          
        { 
       
        onprogress 
        : 
          
        function 
          
        ( 
        event 
        ) 
          
        { 
       
        //Download progress 
       
        if 
          
        ( 
        event 
        . 
        lengthComputable 
        ) 
          
        { 
           
        $ 
        ( 
        '#p' 
        ) 
        . 
        attr 
        ( 
        'max' 
        , 
          
        event 
        . 
        total 
        ) 
        ; 
       
        $ 
        ( 
        '#p' 
        ) 
        . 
        attr 
        ( 
        'value' 
        , 
          
        event 
        . 
        loaded 
        ) 
        ; 
       
        } 
       
        } 
       
        } 
       
        } 
        ) 
        ; 
       
        } 
        ) 
        ; 
       
        </script> 
       
        </body> 
       
        <html>

jQuery 用到了很冷門的 xhrFields 設定來替 XHR 註冊 Progress Event，我也是第一次發現有這招！瀏覽器執行結果如下：

討論

在 Server 都沒有進行任何修改，XHR2 的 Progress Event 就可以正常工作。那麼 XHR2 是如何做到的呢？看了程式碼其實就可以發現，主要是透過 event.total 來計算，那麼資料還沒傳送完成前 event.total 怎麼來的？其實是透過 HTTP Response 中的 Content-length Header 來取得。一開始我在進行測試的時候，就是因為 WebService 沒有送出 Content-length 所以一直沒有成功，卡關的朋友們記得注意一下這個問題，沒有送出 Content-length 的話 Progress Event 是不會被觸發的喔。