醒着星星
醒着星星
  • 发布:2016-08-24 14:55
  • 更新:2019-08-19 10:26
  • 阅读:2309

xhr.onprogress回调数据为undefined

分类:HTML5+
xhr

使用XMLHttpRequest进行POST请求,无法获取进度信息
代码示例:

var xhr = new plus.net.XMLHttpRequest();  
xhr.responseType = "json";  
xhr.onprogress = function(e) {  
    var str = "lengthComputable=" + e.lengthComputable + "loaded=" + e.loaded + ";total=" + e.total;  
    console.log("onprogress: " + str);  
}  
xhr.open(“POST”, endUrlParam);  
xhr.send();

打印结果:
onprogress: lengthComputable=undefined loaded=0;total=undefined

2016-08-24 14:55 负责人:无 分享
已邀请:
醒着星星

醒着星星 (作者)

<!DOCTYPE HTML>  
<html>  

    <head>  
        <meta charset="utf-8" />  
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  
        <meta name="HandheldFriendly" content="true" />  
        <meta name="MobileOptimized" content="320" />  
        <title>Hello H5+</title>  
        <script type="text/javascript" src="../js/common.js"></script>  
        <script type="text/javascript">  
            var url = "http://www.dcloud.io/";  
            var xhr = null;  

            function xhrCreate() {  
                if(xhr) {  
                    outLine("xhr请求已创建");  
                    return;  
                }  
                outSet("创建请求:");  
                xhr = new plus.net.XMLHttpRequest();  
                xhr.onprogress=function(e)  
                {  
                    var str = "lengthComputable=" + e.lengthComputable + "loaded=" + e.loaded + ";total=" + e.total;  
                    console.log("onprogress: " + str);  
                };  
                xhr.onreadystatechange = function() {  
                    switch(xhr.readyState) {  
                        case 0:  
                            console.log("xhr请求已初始化");  
                            break;  
                        case 1:  
                            console.log("xhr请求已打开");  
                            break;  
                        case 2:  
                            console.log("xhr请求已发送");  
                            break;  
                        case 3:  
                            console.log("xhr请求已响应");  
                            break;  
                        case 4:  
                            console.log("xhr请求已完成");  
                            if(xhr.status == 200) {  
                                console.log("xhr请求成功:" + xhr.responseText);  
                            } else {  
                                console.log("xhr请求失败:" + xhr.status);  
                            }  
                            break;  
                        default:  
                            break;  
                    }  
                }  
                xhr.open("GET", url);  
                xhr.send();  
            }  

            function xhrResponseHeader() {  
                if(xhr) {  
                    if(xhr.readyState != 4) {  
                        outLine("xhr请求未完成");  
                    } else if(xhr.status != 200) {  
                        outSet("xhr请求失败:" + xhr.readyState);  
                    } else {  
                        outSet("xhr请求响应头数据:");  
                        outLine(xhr.getAllResponseHeaders());  
                    }  
                } else {  
                    outSet("未发送请求");  
                }  
            }  

            function xhrAbort() {  
                if(xhr) {  
                    outSet("取消请求");  
                    if(xhr.readyState != 4) {  
                        xhr.abort();  
                    }  
                    xhr = null;  
                } else {  
                    outSet("未发送请求");  
                }  
            }  
        </script>  
        <link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8" />  
    </head>  

    <body>  
        <header id="header">  
            <div class="nvbt iback" onclick="back(true);"></div>  
            <div class="nvtt">XmlHttpRequest</div>  
            <div class="nvbt idoc" onclick="openDoc('XmlHttpRequest Document','/doc/xhr.html')"></div>  
        </header>  
        <div id="dcontent" class="dcontent">  
            <br/>  
            <ul class="dlist">  
                <li class="ditem" onclick="xhrCreate();">发送请求</li>  
                <li class="ditem" onclick="xhrResponseHeader();">获取所有响应头</li>  
                <li class="ditem" onclick="xhrAbort();">取消请求</li>  
            </ul>  
        </div>  
        <div id="output">  
            XMLHttpRequest管理网络请求操作,可进行跨域网络数据请求。  
        </div>  
    </body>  
    <script type="text/javascript" src="../js/immersed.js"></script>  

</html>
  • Trust

    是最新的HBuilder里面新建的5+示例么?另外,你尝试换个手机测试下。

    2016-08-25 16:24

  • 醒着星星 (作者)

    嗯。是最新版本的HBuilder了。直接在你说的xhr.html里添加的onprogress。

    以下为输出:


    xhr请求已打开

    xhr请求已发送

    xhr请求已响应

    onprogress: lengthComputable=undefined loaded=0;total=undefined

    xhr请求已响应

    onprogress: lengthComputable=undefined loaded=undefined; total=undefined

    xhr请求已完成

    xhr请求成功:<!DOCTYPE html>.....略去html内容....</>

    2016-08-25 16:28

  • 醒着星星 (作者)

    回复 Trust:更换了手机也是显示undefined

    2016-08-25 18:10

  • 醒着星星 (作者)

    回复 Trust:你们有什么解决方法吗?POST提交一个图片的base64数据,需要读取进度,怎么弄?

    2016-08-30 09:54

Trust

Trust - 少说废话

  • 醒着星星 (作者)

    我是直接运行的官方提供的例子,

    onprogress: lengthComputable=undefinedloaded=0;total=undefined

    2016-08-25 14:13

  • Trust

    回复 醒着星星:抱歉,我没有看仔细。

    2016-08-25 14:54

Trust

Trust - 少说废话

1、检查下HBuilder的版本信息;
2、尝试运行5+示例项目中的额XHR例子,监听 onprogress;
3、监听onreadystatechange,检测xhr是否成功发送。

  • 醒着星星 (作者)

    还是不行。

    HB版本:7.4.0.201608102229

    代码,我下面给你贴上。

    2016-08-25 16:14

yangzhuo

yangzhuo

楼主怎么解决的,我也是这个问题,方便交流交流吗 QQ 754522173

1***@qq.com

1***@qq.com - 前端开发

楼主解决了吗

1***@qq.com

1***@qq.com - 前端开发

经验证,接口响应头中是 Transfer-Encoding: chunked 的,使用 plus.net.XMLHttpRequest 无法处理,有bug。 请求文件请使用 plus.downloader.createDownload ,请求数据要包含 content-length 才行

该问题目前已经被锁定, 无法添加新回复