A Quick Guide to Writing AJAX Requests
Prerequisites:
Basic understanding of JavaScript Arrays and Objects
No matter your level in JavaScript be it Class C or Grandmaster, you must have at one point or the other heard of AJAX and maybe like me so many times it almost got annoying. Let me answer your first question:
AJAX (Short for Asynchronous JavaScript) is a technique for loading data into part of a page without having to refresh the entire page. The data is often sent in a format called JavaScript Object Notation (or JSON). The ability to load new content into part of a page improves the user experience because the user does not have to wait for an entire page to load if only part of it is being updated.
AJAX allows you to request data from a server and load it without having to refresh the entire page. Servers typically send back HTML, XML, or JSON, so you will learn about these formats. While I prefer using JavaScript, jQuery makes it easier to create Ajax requests and process the data the server returns. Some places where AJAX has been used is for Live Search and adding items to cart on E-Commerce sites.
Let’s Get Into It
As I said earlier you can make a request from either an HTML, XML or JSON file, but I will only look at only JSON, sorry XML and HTML nothing personal.
JSON: JAVASCRIPT OBJECT NOTATION
It looks very similar to Javascript object syntax, but it is not an object.
Initialised by the curly braces on the left we have keys which should always be in double quotes and the values on the right-hand side, only strings need to be in double-quotes. I have also included all the data types it can take. The first being a string, the second being a number, third being a boolean and the last being an array.
So g0 ahead and create a JSON file with this or similar data in it. The reason I have added this many data is that most times you will have to loop through the data.
You can also rewrite this as:
{
"event": [
{
"name": "Passenger", "location": "San Francisco, CA" , "capacity": 270, "booking": true
},
{
"name": "Stu Larsen", "location": "Minneapolis, Minnesota" , "capacity": 270 , "booking": true
}
]
}Retrieving JSON data
These three lines are very important are thus and should be added in your JavaScript or script tags in your HTML.
var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {we can work with the data we received here
var data = JSON.parse(this.responseText);
}
};xhr . open ( 'GET’, 'filename.json’, true);
xhr . send ( null);
Number one creates an XMLHttpRequest object and in number 2 we use a GET request to pull data from our JSON file.
We need to check if the data was successfully collected and when this happens the status of our xhr variable will be 200 and if it doesn’t work it will be a 404.
Usually, i write an onload function for my DOM and then proceed to the if statement. Here’s the statement:
if(xhr.status === 200) { // If server status was okDifferent types of properties come with an XMLHttpRequest, one we have already looked at is the status property. Another is the response and responseText. This is the raw form of JSON when it is received, but it is not recognisable by the browser or by JavaScript so we need to format it. To format it we will use JSON. parse’ function. Here’s an example of how to do this:
const xmlrequest= JSON.parse(xhr.responseText)After this, most of the work is done you can initialise a new variable:
let newContent = '';
And to this variable, we can pick a specific detail and add it.
Remember that our JSON object was named events so to get a particular data we would do something like
newContent = xmlrequest.events[0].name;
this will output the name, “Passenger” and that is all. An in-depth understanding of for loops and array structure will help you get all your data at once. I hope this helps and answers any questions that might be unanswered please leave a message. Thank you!
