How to make an AJAX request to post JSON data and process the response

Question

I need to post JSON data to an URL and process the response which is also JSON data. How can I do this using vanilla javascript, i.e with no third-party libraries? I also need to set request headers. Please could someone give me an example on how to do this?

Answer 1

OK Here is how to make both GET and POST requests in vanilla javascript, i.e no third-party libraries like jQuery, including how to set request headers:

// Just to namespace our functions and avoid collisions
var _SU3 = _SU3 ? _SU3 : new Object();

// Does a get request
// url: the url to GET
// callback: the function to call on server response. The callback function takes a
// single arg, the response text.
_SU3.ajax = function(url, callback){
    var ajaxRequest = _SU3.getAjaxRequest(callback);
    ajaxRequest.open("GET", url, true);
    ajaxRequest.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    ajaxRequest.send(null); 
};

// Does a post request
// callback: the function to call on server response. The callback function takes a
// single arg, the response text.
// url: the url to post to
// data: the json obj to post
_SU3.postAjax = function(url, callback, data) {
   var ajaxRequest = _SU3.getAjaxRequest(callback);
   ajaxRequest.open("POST", url, true);
   ajaxRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   ajaxRequest.setRequestHeader("Connection", "close");
   ajaxRequest.send("data=" + encodeURIComponent(data));    
};

// Returns an AJAX request obj
_SU3.getAjaxRequest = function(callback) {

    var ajaxRequest;

    try {
        ajaxRequest = new XMLHttpRequest();
    } catch (e) {
        try { 
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                return null;
            }
        }
    }

    ajaxRequest.onreadystatechange = function() {
        if (ajaxRequest.readyState == 4) {      
           // Prob want to do some error or response checking, but for 
           // this example just pass the responseText to our callback function
           callback(ajaxRequest.responseText);
        }
    };


    return ajaxRequest;

}; 

Use it like this:

function processResponse(responseText) {
    // Response text is a json:
    var obj = JSON.parse(responseText)       // won't work all browsers, there are alternatives
    // Do something with obj
    ....
}

var jsonToPost = ....     // whatever your json is
var url = ...   // the URL to post to

_SU3.postAjax(url, processResponse, jsonToPost);