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?
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?
Share Improve this question edited Mar 18, 2011 at 12:18 Richard H 39.1k38 gold badges114 silver badges141 bronze badges asked Mar 18, 2011 at 9:59 gouthamgoutham 611 gold badge1 silver badge2 bronze badges 2- i don't think that you would be able to get json data unless the data is sent by server as json_encoded – S L Commented Mar 18, 2011 at 10:02
- see my answer, should do what you want – Richard H Commented Mar 20, 2011 at 10:53
1 Answer
Reset to default 13OK 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);