I'm porting a web app to Android (AppInventor AI2 created) to run in a WebViewer component.
I've got most things working but my AJAX calls to the API scripts on my webserver return null.
My guess is that the server is returning null because the origin of the request is an AJAX call from a standalone web page on my local machine (during dev) or a mobile device rather than coming from a page hosted on the same domain.
A bit of Googling around has turned up a lot of mentions of CORS...
Is this what is causing my problems?
If I call the api URL (it's a PHP script on my server that returns XML) direct from my browser I get the correct data returned.
I also have the same code running as part of the web app and that works fine.
The problem only seems to be when I am calling the HTML and JavaScript files from a local directory on my machine. (All other JavaScript function are working correctly, it's just those with AJAX calls that are getting null responses from the webserver that are causing me problems.
I have tried uploading the JS file to my webserver and calling that from the html but that didn't work either (It was a long shot as I guess the AJAX call is still actually being made from the local html file essentially).
Here is a full setup that can be used to test...
HTML file with JavaScript included:
<html>
<head>
<title>Test BBP App AJAX Error</title>
<script>
function getDataViaAJAX(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function () {
if (request.readyState == 4) {
alert("ready state of ajax changed to 4");
alert("request/data responseText=" + request.responseText);
alert("request=" + request);
// request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doTheLocalTest() {
getDataViaAJAX("./sample.xml", function (data) {
var xml = data.responseXML;
alert("Response is: '"+xml+"'")
});
}
function doTheWebTest() {
getDataViaAJAX("http://www.bluebadgeparking.com/sample.xml", function (data) {
var xml = data.responseXML;
alert("Response is: '"+xml+"'")
});
}
</script>
</head>
<body>
<input type="button" value="Click To Get XML from a local file" onClick="doTheLocalTest();">
<br />
<input type="button" value="Click To Get XML from the web" onClick="doTheWebTest();">
</body>
</html>
And a sample XML content (sample.xml):
<markers>
<marker id="1" descr="Whitefriars Street: One way street. Space on left." lat="51.5140241200000" lng="-0.1074814800000"/>
<marker id="1898" descr="Southern General Hospital, Surgical / Orthopaedic 1 Bay" lat="55.8635700800000" lng="-4.3390578030000"/>
</markers>
Save those to a local directory and try it.
When reading the XML from a local file it works, when loading the file from my webserver it fails with an empty response being returned.
(As an aside, I'm assuming I would have the same issues if I was developing a FireFox add-on that pulled data in via AJAX from my web server - something else I've been considering recently...)