xmlhttprequest similar to ajax

Question

I'm attempting to send and receive data from an input to PHP through an XHR request. I have successfully managed to create a connection to PHP without passing data as a parameter within the send method.

However, if I attempt it, I receive the error.

Here is the JavaScript (updated!):

function serialize(obj, prefix) {
    var str = [],
    p;
    for (p in obj) {
        if (obj.hasOwnProperty(p)) {
            var k = prefix ? prefix + "[" + p + "]" : p,
                v = obj[p];
            str.push((v !== null && typeof v === "object") ?
                serialize(v, k) :
                encodeURIComponent(k) + "=" + encodeURIComponent(v));
        }
    }

    return str.join("&");
}

function xhrRequest(data, method, url, callback){
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                callback(xhr.responseText);
            } else {
                callback(null);
                console.log("XHR Request Failed");
            }
        }
    }
    xhr.open(method, url, true);
    xhr.send(JSON.stringify(data));
}

// Calling xhrRequest
xhrRequest({ valueA: input.value }, "POST", "post.php", function(data){
    alert(data);
});

PHP is just an echo of the value to make sure it was passed (updated!):

if(isset($_POST["value"])){
    echo $_POST["value"];
} else {
    echo "no value set";
}

I am aware that you can pass parameters like this "valueA=" + input.value within the send method, but it seems really unnecessary (especially if there are multiple values).

So, how would I get this to work? What are some improvements / changes I might be able? to make.

Apologies if it seems very obvious, but I learnt jQuery before vanilla JavaScript, unfortunately. So I am trying to learn the vanilla way, and am used to how jQuery works.

Thanks! :)

EDIT:

Using @adeneo's technique does in fact semi-work! However, using the updated PHP, I alwasy receive "No value set". Why is the value not passing, even when I use "valueA=" + input.value?

Answer 1

The problem is that onreadystatechange fires multiple times during a request, you can't just use an if/else clause as it will fire four times before the status is 4 (states 0-3).

It should look like

function xhrRequest(data, method, url, callback) {
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                callback(xhr.responseText);
            } else {
                callback("XHR Request Failed"); // the error
            }
        }
    }

    xhr.open(method, url, true);
    xhr.send(JSON.stringify(data));
}

// Calling xhrRequest
xhrRequest({ valueA: input.value }, "POST", "post.php", function(data){
    alert(data);
});

To properly serialize the object to www-urlencoded data, you could use this one, borrowed from here

function serialize(obj, prefix) {
    var str = [],
        p;
    for (p in obj) {
        if (obj.hasOwnProperty(p)) {
            var k = prefix ? prefix + "[" + p + "]" : p,
                v = obj[p];
            str.push((v !== null && typeof v === "object") ?
                serialize(v, k) :
                encodeURIComponent(k) + "=" + encodeURIComponent(v));
        }
    }
    return str.join("&");
}

var data = serialize({ valueA: input.value });

xhrRequest(data, "POST", "post.php" ...

etc, or even add it to the xhrRequest function for convenience.

Answer 2

Here is a script I wrote a long time ago:

var objXMLHttp;

try{
    objXMLHttp = new XMLHttpRequest();
} catch(e){
    var xmlHttpVersions = new Array('MSXML2.XMLHTTP.6.0'
            ,'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0'
            ,'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'
            ,'Microsoft.XMLHTTP');

    for(var i = 0; i < xmlHttpVersions.length && objXMLHttp == null; i++) {
        try{
            objXMLHttp = new ActiveXObject( xmlHttpVersions[i] );
        } catch(e){ 
            void(0);
        }
    }
} 

if(objXMLHttp != undefined){    
    objXMLHttp.onreadystatechange = function() {
        /*Your response handler here*/
    }        
}

To send a request to the server using either the 'POST' method or the 'GET' method:

if(strMethod == "POST"){      
    objXMLHttp.open(strMethod, strAddr, true);    
    objXMLHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
    bjXMLHttp.send(strData);
} else {
    objXMLHttp.open(strMethod, strAddr + strData, true);
    objXMLHttp.send(null);
}

Answer 3

I would just write a function to convert your data object to a string formatted in the way send expects, namely "name1=value1&name2=value2".

function serialize (data) {
    var result = "";
    for (var key in data) {
        result += (encodeURIComponent(key) + "=" + encodeURIComponent(data[key].toString()) + "&");
    }
    return result.substring(0, result.length - 1);
}

Then the final code becomes

function xhrRequest (data, method, url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open(method, url, true);

    xhr.onreadystatechange = function () {
        if (xhr.status == 200 && xhr.readyState == 4) {
            callback(xhr.responseText);
        } else {
            callback("XHR Response Failed");
        }
    }

    xhr.send(serialize(data));
}

It might also be good to consider XMLHttpRequest onload and onerror events as described here: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

The readyState increments as the request is made so because you throw the error whenever readyState != 4 you'll always see your callback receiving the error, even if there is no error. Check out this reference: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState