Data Analyst and Technical Consultant

AJAX and JSON starter kit

AJAX allows web pages to be updated without refreshing the whole page using XMLHttpRequest and JSON, a lightweight data-interchange format, which is easy to read and write.


JSON stands for ‘JavaScript Object Notation’, it is a transport language for Javascript.  All keys and strings are in double quotes (“”)

Javascript to JSON

var person = {name: 'fred'};
var personJSON = JSON.stringify(person);

JSON to JavaScript

var personJSON = '{"name": "fred"}';
var person = JSON.parse(personJSON);



AJAX stands for ‘Asynchronous JavaScript and XML’ and is a way to call a server to get data

Javascript syntax

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
console.log('state changed', xmlhttp.readyState);
if (xmlhttp.readyState === XMLHttpRequest.DONE ) {
if (xmlhttp.status === 200) {
console.log('response: ', xmlhttp.responseText);
console.log('parsed: ', JSON.parse(xmlhttp.responseText));
 else if (xmlhttp.status === 404) {
alert('The resource was not found');
else {
alert('Error: Call to server failed with code: ' + xmlhttp.status);
};"GET", "", true);

JQuery syntax

method: 'GET',
context: document.body,
url: '//'
}).always(function(){"ajax call made");