XHR stands for XMLHttpRequests. When XHT was created, XML was the popular file format. It is still used a lot, but has expanded to include other file formats such as JSON and even plain text.
XHR is used to communicate with servers. This is sometimes referred to as AJAX (Asynchronous JavaScript And XML) communication. This technology allows us to retrieve data from a server without having to retrieve an entire page. Here is an example…
This is creating a new XHR object so we can communicate with a server. To do this, we have to setup the environment for the call within the XHR object.
The first thing we have to do is set the object up to monitor communication and act accordingly. This is done with the onreadystatechange property. We assign a function to that property to run whenever the state of the object changes…
In this example, we are watching the state of the XHR object change as it communicates with the server. We usually want to run our code when it successfully retrieves the data from the server. There are two items for which we are watching…the status (200) and the readyState (4).
The status is the code retrieved from the server. A code of 200 is a normal retrieval code. I am sure you have seen errors when trying to get something from a web server…404 errors, 300 errors, etc. There are several http protocol codes that can be returned with each server communication. We want the "everything is normal" code, which is 200.
The readyState is the state of the call to the server. This property can be a 1, 2, 3 or 4. One (1) is "We are getting things ready to call the server". Two (2) is "We are calling the server…connecting". Three (3) is "We are connected to the server and the server is getting us the information we requested". Four (4) is "Here is the information!". While we can watch and respond to all four codes, we typically are only concerned with the successful retrieval of the information…4.
The aforementioned code sets up the call to the server, but doesn’t actually perform the call. It is like inputting the number on your mobile device, but not clicking the send button yet. Before we click the send button, we have to tell it where the server is located. We do that with the XHR object open method…
In this method, we are telling the call where to go and what type of call to make. The "where" is the web address. This would be whatever web api you wish to hit. The type is the word "GET". There are several types of http verbs for calls…GET, POST, PUT, DELETE are the most common. The GET verb does what you think. It gets information from the server. The POST verb sends information to the server, such as a log in or form submission. The PUT verb updates information on the server. You might use this to update your profile information for example. The DELETE verb is used to…well…delete information. We are now ready to hit the "send button".
Note: In practice, the XHR object is typically incorporated into modern JavaScript libraries. So there is a chance that you might not work with it directly, but rather with a wrapper around it.