JavaScript Ajax request not working in Firefox and Google Chrome, but it is okay in Safari

Question

I'm using some JavaScript to send an Ajax request to an Arduino webserver and change the HTML on a webpage.

In Safari this has been working great, but when I try to load it in Firefox and Google Chrome the document elements never update. In the debugger consoles I can see the requests and responses coming back so I'm guessing that there is an issue with parsing the response to an array?

Here is the code:

function GetSwitchState()
{
    nocache = "&nocache=" + Math.random() * 1000000;
    var request = new XMLHttpRequest();
    request.onreadystatechange = function()
    {
        if (this.readyState == 4)  {
            if (this.status == 200) {
                if (this.responseText != null) {
                    var response = this.responseText;
                    var comma = ",";
                    var inputArray = response.split(comma);
                    var green = inputArray[0];
                    var red = inputArray[1];
                    var fault = inputArray[2];
                    var counter = inputArray[3];
                    document.getElementById('green').innerHTML = green;
                    document.getElementById("red").innerHTML = red;
                    document.getElementById("status").innerHTML = fault;
                    document.getElementById("cars").innerHTML = counter;
                }
            }
        }
    }
    request.open("GET", "url" + nocache, true);
    request.send(null);
    setTimeout('GetSwitchState()', 1000);
}

The response from the Arduino webserver is four comma-separated values.

Answer 1

What I did today was pretty much the same!

When I ran an Ajax request to a PHP file and wanted to return an array I needed to specify the return-datatype as "json". In my PHP file I then returned my values like this:

return json_encode(array(
    'success' => false,
    'error' => $_POST['password_hashed']
));

I was acctually using jQuery to run the request. That looks like this:

$.ajax({
    type: 'POST',
    url: 'script.php',
    data: 'password_hashed=' + hex_sha512(str_password) + '&email=' + str_email, //Clientside password hashing
    cache: false,
    dataType: 'json',
    success: function(value){
    //Ajax successfully ran
        alert(value.success + '_' + value.error); //=false_[hash]
    },
    error: function(){
    //Ajax error occured -> Display error message in specified element
        alert('error with request');
    }
});

I just started with Ajax two days ago, and this may not help a lot, but it is worth trying.

Answer 2

Okay it looks like the issue was actually getting past the

{
            if (this.readyState == 4)  {
                if (this.status == 200) {

arguments. When I changed it to:

{  
     if(response.readState == 4) {

I was able to move past that statement in firefox. To get the status to 200 instead of 0 I needed to modify the response header on the arduino side to include:

Access-Control-Allow-Origin: *

To allow Cross Origin Domain Requests in FireFox. Once I made these changes the code works great, I guess I was barking up the wrong tree with my array assumption. Thanks for the help!