XMLHttpRequest

This is an introduction to Javascript's XMLHttpRequest object which is used to write Ajax applications.

The XMLHttpRequest object can exchange data with a remote server. It was designed to work with XML data, but can be used with other data formats. It is often used to exchange data in JSON format as it is easier for for Javascript programmers to work with.

Below is a very simple example.

var xhttp = new XMLHttpRequest(); 
xhttp.open('GET', 'txt1.txt');
xhttp.send();

The first line in the above code creates an XMLHttpRequest object and assigns it to the variable xhttp. The open method sets up the request that the object will send. In this case, xhttp will send a GET request for the url txt1.txt which is a plain text file that contains the line This is a test. You can use either an absolute or a relative url as is the case here. The third line executes the command.

The response is saved to xhttp.responseText, but you can't access it right away. If you try to execute the following,

var xhttp = new XMLHttpRequest();
xhttp.open('GET', 'txt1.txt');
xhttp.send();
console.log('xhttp.responseText = ' +xhttp.responseText);

then you'll get the following output-

xhttp.responseText = undefined

This is because Javascript is asynchronous. The script will send an HTTP request and then continue running the rest of the code before it gets a response. What you need to do is define a handler which will execute when your XMLHttpRequest object gets a response.

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {
 console.log('xhttp.responseText = '  +xhttp.responseText);
}

xhttp.open('GET', 'txt1.txt');
xhttp.send();

When you run this code, you'll see the following-

xhttp.responseText =
xhttp.responseText =
xhttp.responseText = This is a test.
xhttp.responseText = This is a test.

The onreadystatechange is invoked multiple times. Sometimes with the data that you want.

What you want to do is have onreadystatechange respond when the conditions are right. You can use the readyState and status properties to keep track of what is happening.

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {
  console.log('xhttp.readyState = '    +this.readyState);
  console.log('xhttp.status = '        +this.status);
  console.log('xhttp.responseText = '  +this.responseText);
  console.log('\n');
}

xhttp.open('GET', 'txt1.txt');
xhttp.send();

And now the output will look like this-

main.js:14 xhttp.readyState = 1
main.js:15 xhttp.status = 0
main.js:17 xhttp.responseText =

main.js:14 xhttp.readyState = 2
main.js:15 xhttp.status = 200
main.js:17 xhttp.responseText =

main.js:14 xhttp.readyState = 3
main.js:15 xhttp.status = 200
main.js:17 xhttp.responseText = This is a test.

main.js:14 xhttp.readyState = 4
main.js:15 xhttp.status = 200
main.js:17 xhttp.responseText = This is a test.

The readyState property lets you know what stage in the process that the XMLHttpRequest is at. readyState #4 indicates that the operation is complete and the status property value is the HTTP error code. 200 indicates that the operation was successful.

So you'll probably want something like the following-

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {
  if ((this.readyState===4) && (this.status===200))
    console.log('xhttp.responseText = '  +xhttp.responseText);
}

xhttp.open('GET', 'txt1.txt');
xhttp.send();

xhttp.responseText = This is a test.

This way, your code can work with the retrieved data once the request has been satisfied.