DEV Community

Vikas Singh
Vikas Singh

Posted on

How AJAX works?

AJAX requests Javascript

Hola amigos!

Hope you liked my Jekyll series Tutorials. Today we will move further with AJAX. It is a necessary frontend technique to make a request while dealing with APIs.

We will learn:
What is AJAX?
How it works?
Some examples

Without any further due, lets get started:

AJAX- It stands for Asynchronous Javascript and XML. So in order to understand AJAX in a better way, you must be familiar with HTML, CSS, Javascript and XML slightly.

Why AJAX is used?
It is a technique using which a client/web browser communicates with a web server and asks for data. So in short, it requests for data from the server, then processes the obtained data, and make changes to the website without reloading the page fully.

NOTE: AJAX is most commonly used while playing with the APIs. APIs are Application Programming Interface. They are a set of methods which specifies the rules of communication between the parties who want to communicate. Like, web browser and web server.

How it works?
Lets understand it by looking at an example. Suppose you are on a blog website and you clicked on "More posts" button as you want to read more posts from the website. The sequence of action follows as:

This button will trigger an AJAX request/call.

This request is sent the web server. This request will point to any data/static file.

Then the server requests for this data from the database.

The database sends back the requested data to the -webserver.

Finally the server sends this data to the web browser as HTTP response.

Now its Javascript which then parses this HTTP data into human readable formats.

Then it updates the DOM elements(page structure) without reloading the page fully.

NOTE: With the help of AJAX, we can control the amount of data to be downloaded from the server.

Real Life examples

AJAX examples can be seen in many day to day applications you use. Like on Instagram, Facebook, Twitter, you can see the content coming automatically when you scroll up. Similarly it gets refreshed by a single gesture you apply on screen which shows that AJAX call has been made there.

Like on Quora, clicking on the read more button, upvote, dowvote button, AJAX request is triggered. Same happens when you search on a Web browser. So it is like everywhere.

Connect with me on
Instagram
https://www.instagram.com/p/CFqrvobFlsL/?igshid=j3lhn2qi3og0

Twitter
https://mobile.twitter.com/_SinghVikas_

Top comments (0)