Intro to Ajax
By: Henok Samuel
Introduction
Many of you when first hearing the word Ajax might be thinking about the dish soap. However, in this blog I am not going to be talking about the inner workings of dish soap, we are going to talk about a different kind of Ajax. Ajax, also known as “Asynchronous JavaScript and XML”, is a technique that uses many web technologies on the client-side to create an asynchronous web application. Ajax allows a web application to send and retrieve data from a server asynchronously, in the background, without interfering with the current page. With Ajax, you can change content dynamically without the need to reload the entire page. JSON, JavaScript Object Notation, is more commonly used than XML, Extensible Markup Language, these days. In this blog, I’ll be discussing what Ajax is made of and what the downsides of Ajax are.
Async
Synchronous code must be discussed before we mention asynchronous code. Synchronous code basically means executing code line by line, after each line is done. Asynchronous code hit each code line by line, but can schedule a line code to run before the above one. Below is example of asynchronous code.
console.log("YO!)
setTimeout(function(){console.log("OH NO!"}, 2000)
console.log("Yeah!")//Output
One!
Yeah!
OH NO!
What is Ajax made of?
Ajax, is a group of technology meaning that is uses many technologies in combination, Ajax uses HTML, XMLHttpRequest, JavaScript, CSS. HTML and CSS can be used for styling and marking the webpage. JavaScript allows the webpage to have a dynamic display, and allow the client to interact with the new data. Fun Fact! In JavaScript, the fetch() function is commonly used to perform Ajax on webpages allowing data onto the screen without refreshing.
XMLHttpRequest
Ajax’s important feature is the XMLHttpRequest object. XMLHttpRequest object allows Ajax to exchange data from a web server. This means part of the page can be changed without refreshing the whole page. Modern browsers like Google Chrome, Firefox, etc., all have a built-in XMLHttpRequest. Some XMLHttpRequest object methods are new XMLHttpRequest method, abort method, getAllResponseHeaders method, getResponseHeadersmethod, open method, send method, and setRequestHeader method.
The new XMLHttpRequest method creates a new XMLHttpRequest object. The abort method cancels the current request. The getAllResponseHeaders method returns header information; while, the getResponseHeaders method returns specific header information. The open method specifies the request. The send method can send request to get information. However, a send method with a string passed in send request to post the data online. The setRequestHeader method adds a label/value pair to the header to be sent.
The XMLHttpRequest Object Properties are onreadystatechange, readyState, response text, response Text, responeXML, status, and statusText. The onreadystatechange property defines a function to be called when the readyState property changes. The readyState property holds the status of XMLHttpRequest. One of the following statuses is 0, request not initialized, 1, server connection established, 2, request received, 3, processing request, 4, request finished and response is ready. The responseText property returns the response data as a string. The responseXML property returns the response data as XML data. The status property returns the status-number of a request. The request is one of the following 200, stands for “Ok”, 403, stands for “forbidden”, 404, stands for “not found”. The statusText property returns the status-text.
Callbacks
Callback are necessary in Ajax because you don’t want duplicate the code when you call it. Creating a generic Ajax function that takes Ajax information as the input with the callback. Later, the function will call the callback so that the function can resume with the Ajax call. There are six different ways to to do Ajax calls in JavaScript: XMLHttpRequest, Fetch API, jQuery, Axios, request, and super agent. I’ve already discussed about XMLHttpRequest, but I’ll go over the other very briefly. The fetch function is the preferred choice over XMLHttpRequest, and it’s more useful. jQuery is a client-side programming language to create dynamic and functional web pages. Axios is a promised based HTTP client that works both in the browser and in a Node.js environment. The request are the simplest way to make http calls. SuperAgent is a lightweight and progressive Ajax library that focused more on readability and flexibility.
Let’s go over an example of using the fetch method, but first let me list the pro of using fetch. Fetch is flexible and easy to use. Callback hell is avoided, callback hell is callback in callback. It’s supported on all modern browsers. Lastly, it follows the request-response approach. Now for the example
For a GET request:
fetch('https://www.yourdomain.com', {
method: 'get'
})
.then(jsonData => console.log(jsonData))
.catch(err => {
//error block
}The syntax is simply the word fetch passing in the url of the request, and the XMLHttpRequest object. The then callback, the success callback, is executed if request is successful. The catch is executed when the request is unsuccessful.
Drawbacks
If your web browsers does not support JavaScript or XMLHttpRequest, or has Ajax disabled, then the web page will not be compatible with Ajax. Most search engines, except Google, do not support javaScript, so that means it must have an alternative solution to get the Ajax request. Same origin policy prevents some Ajax techniques from being used across domains. A few web application that use Ajax are built, so they can’t be read by screen reading technologies.
Conclusion
To send and retrieve data from a server asynchronously, in the background, without interfering with the current page or refreshing the page, you would use Ajax, and not the soap! Ajax is a fast and a dynamic technique to update webpages with new data from the server!
