XHR Workshop
How do you use XHR to query APIs?
XHR stands for XML Http Request. This is actually an object (built-in for all modern browsers) that can be accessed by its name: XMLHttpRequest. It has a whole array of methods available to it in order to interact in different ways with a server. Note the odd capitalisation (XML is all caps, but only the 'H' of Http is).
Here is a simple example of how you can make an XML request:
var myRequest = new XMLHttpRequest();
myRequest.onreadystatechange = function() {
if (myRequest.readyState == 4 && myRequest.status == 200) {
document.getElementById("demo").innerHTML =
myRequest.responseText;
}
};
myRequest.open("GET", "xmlhttp_info.txt", true);
myRequest.send();
You can see it in action here.
Read through the code to get an impression of the structure and what's going on. Then read this step-by-step walk-through of the different parts:
var myRequest = new XMLHttpRequest();
--- this creates a new instance of the XHR object, which you can then use to query a server or file of your choice.myRequest.onreadystatechange = function() {...}
--- this method of the XHR object enables you to store a function (after the '=') which will be called automatically each time thereadyState
property of themyRequest
object changes. More here.if(myRequest.readyState == 4 && myRequest.status == 200){...}
--- every time thereadyState
property changes, the function will check if these two functions are met:myRequest.readyState == 4
--- thereadyState
property changes from 0 to 4 as the request is processed. 0 means the request is not initialised, while 4 means the request is finished and the response is ready. However, the response might be that the request hasn't found what it was meant to, which is why we also need:myRequest.status = 200
--- this property is only valid after the send method returns successfully. It will return a 3-digit status code starting with 1, 2, 3, 4, or 5, indicating what the result of your request was. The code200
means 'OK', while404
is notoriously the code for 'Not found'. Full list here, under 'Return Values'.
document.getElementById("demo").innerHTML = myRequest.responseText;
--- this is the code that will run if the request is successful. It generally does something with the response text (which is accessed withmyRequest.responseText
)myRequest.open("GET", "xmlhttp_info.txt", true);
--- the open method is important. Here it takes 3 parameters:- method: The HTTP method to use (GET, POST, PUT, DELETE, PATCH, etc)
- url: The requested URL (in this case a local file path: "xmlhttp_info.txt") - in many cases this will be the URL of the server you are querying.
- async (optional): whether the call should be asynchronous or not.
false
means it waits for a response from the server before continuing execution of the code. The default value istrue
, which allows you to execute other scripts while waiting for the response. This is generally preferable.
myRequest.send();
--- this method sends the request to the server. Use this after setting up the XHR with the .open() method. If you are GETting, it takes no parameter, but if you are POSTing, it may take a parameter of the string you wish to post.
Resources
- W3Schools Guide to AJAX --- the whole thing is useful, but in particular:
- You don't need jQuery to make Ajax requests!