Asynchronous Programming in Javascript

Asynchronous Programming is basically a form of parallel programming that allows a unit of work to execute/run separately from the primary application code blocks without blocking other operations. This simply implies that it is a method of writing codes to ensure simultaneous code execution.

Asynchronous programming in javascript is possible and more efficient when working with technologies like AJAX and Fetch API which is used to make HTTP requests to files, services, and browser/server APIs internally or externally, and there are a few key concepts when working with Async code in javascript we have callbacks, promises, and Async/Await.

AJAX and XHR

Asynchronous Javascript & XML (AJAX) is not a programming language, framework, or library but a set of web technologies that send and receive data from a client end server asynchronously, it executes seamlessly behind the scenes without having to interfere or reload the current status of the webpage.

The image above represents the difference between a common request procedure and an AJAX workflow procedure where we have below the client that represents the browser and above the server which can be either local or remote, usually when we visit a URL/link on the browser what happens is we send a common HTTP request to the server which returns a common response including the entire webpage, whereas with AJAX we can make requests asynchronously behind the scenes without having to reload the entire page, and the way this is done is by first making an asynchronous javascript call which goes through the AJAX engine which then uses the XML HTTP Request (XHR) object to send a common request to the server, then the server returns a data usually in JSON format but can also be in XML which then passes through the AJAX engine and returned as an Html response which in this case the webpage without a page reload.

Though XML is included in the AJAX acronym but JSON has replaced it for the most part because it is faster and easier that is why in this article I would make use of JSON for demonstrations.

The XML HTTP Request (XHR) object is the core technology of AJAX it is provided by the browser’s javascript environment it methods transfer data between client and server or browser and server it can also be used with other protocols other than HTTP, and can also work with other data other than XML like JSON and plain texts which would be used for demonstrations in this article.

The Plain Text Demonstration

Fetching text data locally from the internal server making use of an XHR object with this Html Collection and this .txt file.

see code demonstration below:

this uses the .open property which takes in the type of request GET, the text file textData.txt, and the true statement which depicts it being asynchronous as parameters, then after the XHR object is set to the .onload method which is assigned to a function that takes in a condition statement that ensures its HTTP status is 200 and the ready state is 4 before outputting the results. The .send method ensures to send the XHR object to the server for processing, you can see the code result image below and test here as well:

The JSON Demonstration

Here we would get JSON data locally from the internal server using the XHR object with this Html collection and these JSON files: file1 and file2.

To get the single jsondata data printed we can use this procedure, see code representation below:

and to get the second jsondata data with multiple JSON props we can follow this procedure:

See the code result image below and test here as well:

Usually, you would deal with external APIs which means you would have to fetch data externally and the procedure to do so is similar to the way we fetched them internally in this article but due to the fact that every API is different I advise you to go through their documentation, but the system would always be the same.

Conclusion

The AJAX and XML HTTP requests are older technologies but very reliable while Fetch is a newer standard.

Most Asynchronous codes are part of an API or library such as:
. XHR & Fetch
. JQuery AJAX & Axios
. Node.js Filesystem Module

Async/Await allows us to write asynchronous codes/operations like simple synchronous codes/operations, it is the best way to write asynchronous codes.

HTML and XML are related to each other, where HTML displays data and describes the structure of a webpage, XML stores and transfers data like JSON.

APIs need to grant permission before we can make use of them which is known as CORS enabled which allows cross-domain communication, while some APIs require a form of authentication which is known as OAUTH.

All browsers possess the javascript environment.

There are other internal and external libraries/technologies and methods that can be used to make HTTP requests such as Fetch API, Axios, Superagent, Node HTTP, and JQuery to mention a few.

Learn more about HTTP status codes and ready state values here and here respectively.

Do ask questions for clarifications and make corrections & suggestions, I expect them.