AJAX responses messed up in Cordova application on Windows Phone 8.1

问题

We are using Cordova 3.4.0 to develop an app. Everything works fine on Android and iOS and also if we launch our app in a desktop browser. But we are stuck with really strange issue on Windows Phone 8.1.

Here is a simplified code example to test.

index.html in the application root:

<!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>

test/greenText.html:

<span>GREEN</span>

test/redText.html:

<span>RED</span>

The only dependency to run this test is jQuery which we have put in libs/jquery/ folder.

Now, if we run this code in every desktop browser and in iOS and Android, no matter if from local folder (with browser flags for local AJAX) or from server, we get the right sequence of alerts and AJAX loads correct data in appropriate boxes:

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

We get the same result if we run the index.html on Windows Phone through its Internet Explorer.

But when we deploy the same code to Windows Phone as Cordova app, strange thing happens. The redbox request never receives any data, nor any errors. The greenbox request receives data of redbox, and thus we have empty red box and green box with text "RED" in it. Here is the sequence of alerts:

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

What's going on there, why one AJAX request does not return and the other receives wrong response? How do we fix it?

EDIT 1:

Our nest step will be to find out if it's Cordova specific issue (I see there is some XHRHelper object in the Corodva WP8 template) or it's Microsoft's phone:WebBrowser fault.

EDIT 2:

It seems, WebBrowser itself does not support AJAX requests to local files (I got "Access denied") and that's why Cordova invented XHRHelper class. But I found a related bugreport which they closed as "Cannot reproduce": https://issues.apache.org/jira/browse/CB-4873

Is there any Cordova developer here who could suggest a fix for XHRHelper, so it supports multiple sequential AJAX requests?

回答1:

Again, I cannot reproduce your results. I quickly put together a version which I will post to the JIRA issue: 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

I modified your source a little just to make sure there were no issues with alert interfering ...

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;
            }
        });
});

来源：https://stackoverflow.com/questions/23794121/ajax-responses-messed-up-in-cordova-application-on-windows-phone-8-1

标签

ajax

cordova

windows-phone-8.1