AJAX响应在Windows Phone 8.1上的Cordova应用程序中搞砸了

时间:2014-05-21 21:27:48

标签: ajax cordova windows-phone-8.1

我们正在使用Cordova 3.4.0开发应用程序。一切都在Android和iOS上运行良好,如果我们在桌面浏览器中启动我们的应用程序。但我们在Windows Phone 8.1上遇到了一个非常奇怪的问题。

这是一个简化的测试代码示例。

应用程序根目录中的index.html:

<!DOCTYPE html>
<html>
    <head>
        <title>Mobile sandbox</title>
        <meta charset="UTF-8">
        <script type="text/javascript" src="libs/jquery/jquery.min.js"></script>
    </head>
    <body>

        <div id="redbox" style="width:100px;height:100px;background-color:red;">
        </div>

        <div id="greenbox" style="width:100px;height:100px;background-color:green;">
        </div>

        <script>
            $(function () {

                alert("Requesting data for redbox...");

                $.ajax("test/redText.html")
                  .done(function (text) {
                      alert("Filling redbox with contents " + text);
                      $("#redbox").html(text);
                  })
                  .fail(function () {
                      alert("Error in redbox");
                  })
                  .always(function () {
                      alert("Complete redbox");
                  });

                alert("Requesting data for greenbox...");

                $.ajax("test/greenText.html")
                  .done(function (text) {
                      alert("Filling greenbox with contents " + text);
                      $("#greenbox").html(text);
                  })
                  .fail(function () {
                      alert("Error in greenbox");
                  })
                  .always(function () {
                      alert("Complete greenbox");
                  });

            });
        </script>
    </body>
</html>

测试/ greenText.html:

<span>GREEN</span>

测试/ redText.html:

<span>RED</span>

运行此测试的唯一依赖是我们放在libs / jquery /文件夹中的jQuery。

现在,如果我们在每个桌面浏览器以及iOS和Android中运行此代码,无论是从本地文件夹(使用本地AJAX的浏览器标志)还是从服务器运行,我们都会获得正确的警报序列并且AJAX会加载正确的数据在适当的方框中:

Requesting data for redbox...
Requesting data for greenbox...
Filling redbox with contents <span>RED</span>
Complete redbox
Filling greenbox with contents <span>GREEN</span>
Complete greenbox

如果我们通过Internet Explorer在Windows Phone上运行index.html,我们会得到相同的结果。

但是当我们将相同的代码部署到Windows Phone作为Cordova应用程序时,会发生奇怪的事情。 redbox请求永远不会收到任何数据,也不会收到任何错误。 greenbox请求会收到redbox的数据,因此我们有空的红色框和绿色框,其中包含文本“RED”。 以下是警报序列:

Requesting data for redbox...
Requesting data for greenbox...
Filling greenbox with contents <span>RED</span>
Complete greenbox

那里发生了什么,为什么一个AJAX请求没有返回而另一个收到错误的响应?我们如何解决?

编辑1:

我们的嵌套步骤将是查明它是否是Cordova特定问题(我看到Corodva WP8模板中有一些XHRHelper对象)或它是微软的手机:WebBrowser错误。

编辑2:

看来,WebBrowser本身不支持对本地文件的AJAX请求(我得到了“拒绝访问”),这就是Cordova发明XHRHelper类的原因。但我找到了一个相关的bug报告,他们关闭了“无法重现”: https://issues.apache.org/jira/browse/CB-4873

是否有任何Cordova开发人员可以为XHRHelper建议修复,因此它支持多个顺序AJAX请求?

1 个答案:

答案 0 :(得分:1)

同样,我无法重现您的结果。我快速整理了一个版本,我将发布到JIRA问题:https://issues.apache.org/jira/browse/CB-4873

Requesting data for redbox...
Requesting data for greenbox...
Filling redbox with contents 
<span>REd</span>
Complete redbox
Filling greenbox with contents 
<span>GREEN</span>
Complete greenbox

我修改了你的来源,只是为了确保警报干扰没有问题...

var eventLog = [];
var oneDone = false;

$(function () {
    eventLog.push("Requesting data for redbox...");
    $.ajax("redText.html")
        .done(function (text) {
            eventLog.push("Filling redbox with contents " + text);
            $("#redbox").html(text);
        })
        .fail(function (e) {
            eventLog.push("Error in redbox" + JSON.stringify(e));
        })
        .always(function () {
            eventLog.push("Complete redbox");
            if (oneDone) {
                console.log(eventLog.join("\n"));
                alert(eventLog.join("\n"));
            }
            else {
                oneDone = true;
            }
        });

    eventLog.push("Requesting data for greenbox...");
    $.ajax("greenText.html")
        .done(function (text) {
            eventLog.push("Filling greenbox with contents " + text);
            $("#greenbox").html(text);
        })
        .fail(function () {
            eventLog.push("Error in greenbox");
        })
        .always(function () {
            eventLog.push("Complete greenbox");
            if (oneDone) {
                console.log(eventLog.join("\n"));
                alert(eventLog.join("\n"));
            }
            else {
                oneDone = true;
            }
        });
});