Examples of using XMLHttpRequest objects (Ajax)

Asynchronous GET with a global request object

This is code that makes an asynchronous GET request using a separate callback function. Since there is no way to pass parameters (directly) to the callback function, the request object must be stored in a global variable.

var request;

function loadAsyncGet1() {
    request = new XMLHttpRequest();
    request.open("GET", "data.txt");
    request.onreadystatechange = receiveData;
    request.send(null);
}

// CALLBACK FUNCTION THAT USES GLOBAL VARIABLE request
function receiveData() {
    if (request.readyState == 4 && request.status == 200) {
	var dataDiv = document.getElementById("data1Div");
	dataDiv.innerHTML = request.responseText;
    }
}

Data will go here

Asynchronous GET with a local request object

This is code that makes an asynchronous GET request using an anonymous local function. Because the function is defined inside another function (loadAsyncGet2 in this case) it has access to the parameters and local variables of the outer function and so does not have to store the request object in a global variable.

// NOTE THAT THIS FUNCTION DOES NOT USE A GLOBAL VARIABLE TO STORE THE
// REQUEST OBJECT.
function loadAsyncGet2() {
    var localRequest = new XMLHttpRequest();
    localRequest.open("GET", "data.txt");
    localRequest.onreadystatechange = function() {
	if (localRequest.readyState == 4 && localRequest.status == 200) {
	    var dataDiv = document.getElementById("data2Div");
	    dataDiv.innerHTML = localRequest.responseText;
	}
    };	
    localRequest.send(null);
}

Data will go here

Asynchronous POST

This example shows an asynchronous POST request. The function gets the value of the name1Txt text field and sends it to the server as a string like name=Harpo The server returns a JSON string, but this function doesn't parse the JSON string, it just puts it into the data div.

The names and passwords that the server knows about are:
Harpo: swordfish
Groucho: horsefeathers
Bilbo: baggins
Sam: gamgee
Luke: usetheforce

// USES THE POST METHOD INSTEAD OF GET.  NOTE THE PARAMETER TO send
function loadAsyncPost() {
    var name = document.getElementById("name1Txt").value;
    var data = "name=" + name;
    var localRequest = new XMLHttpRequest();
    localRequest.open("POST", "data.php");
    localRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    localRequest.onreadystatechange = function() {
	if (localRequest.readyState == 4 && localRequest.status == 200) {
	    var dataDiv = document.getElementById("data3Div");
	    dataDiv.innerHTML = localRequest.responseText;
	}
    };	
    localRequest.send(data);
}
Name:

Data will go here

Synchronous POST

This example shows a synchronous POST and also shows how to parse the JSON string sent back from the server. (Current browsers natively support the JSON parse and stringify methods, but old browsers required a separate JSON JavaScript file to be loaded before using the JSON methods.)

// NO CALLBACK FUNCTION FOR SYNCHRONOUS REQUESTS
function loadSyncPost() {
    var name = document.getElementById("name2Txt").value;
    var data = "name=" + name;
    var localRequest = new XMLHttpRequest();

    // PASSING false AS THE THIRD PARAMETER TO open SPECIFIES SYNCHRONOUS
    localRequest.open("POST", "data.php", false);
    localRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    localRequest.send(data);

    // NOTE THAT THE status WILL NOT BE 200 IF THE REQUEST IS FOR A
    // LOCAL FILE.
    if (localRequest.status == 200) {
	var dataDiv = document.getElementById("data4Div");

	// FOR MORE INFORMATION ABOUT JSON SEE http://json.org
	var responseJson = JSON.parse(localRequest.responseText);
	dataDiv.innerHTML = "Your password is: " + responseJson["password"];
    }
}
Name:

Data will go here