Mention the purpose of AJAX?

AJAX maintains the interaction between client and server. AJAX also allows updating the web server asynchronously.

Mention a use of AJAX in web development?

AJAX helps in creating better, faster and smarter web applications with the use of XML, HTML, CSS etc.

Within how much time AJAX basics can be learnt?

Within half or one hour, AJAX basics can be learnt. The reason behind this is AJAX is not a language in itself. It is just a set of techniques. Spending a day or two, can help you to get a good grip over AJAX.

Table of contents

Introduction

AJAX

Working with AJAX

Modern browsers

FAQs

Key takeaways

Last Updated: Mar 27, 2024

AJAX introduction

Author Pradipta Choudhury

Introduction

In this article, we will be discussing how we can start our journey with AJAX. But, before we can start, we should be very clear about what exactly is this AJAX.

The full form of AJAX is asynchronous Javascript and XML. It is not a programming language, which many of you might be thinking. It helps to establish and maintain the interconnection between client and server. For more details, visit here. In this article, we are only considering AJAX and how we can start and work with AJAX. So, let’s find that out.

Source: Giphy

Using AJAX following work can be performed very easily:

After the page is loaded, read data from a web server.
A web page can be updated without even reloading it.
Sending the data to a web server, in the background.

Let’s take an example to understand better.

<!DOCTYPE html>
<html>
<body>

<div id="practise">
<h2>Demo AJAX example</h2>
<button type="button" onclick="loadDoc()">Click here to Change Content</button>
</div>

<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("practise").innerHTML =
this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
}
</script>

</body>
</html>

Output:

Try and compile by yourself with the help of online javascript compiler for better understanding.

After click:

If we look closely at the example, we will find out that the html page is containing a <div> section and a <button>. All the information that is displayed from the server is done in the <div> section. When the button is clicked, the function is called. Then data is requested from the webserver and results are displayed.

AJAX

AJAX is the combination of:

A browser built-in XMLHttpRequest object( to request data from a web server).
Javascript and HTML DOM(to display or use the data).

The name AJAX is itself a little misleading. XML might be used by AJAX to transport the data with a web server behind the scenes. This signifies that the web page can be updated without reloading it.

Another advantage of AJAX is that it helps the web pages to update asynchronously by exchanging the data with a web server behind the scenes.

Working with AJAX

The steps followed are:

Whenever a button is clicked on the web page, the page gets loaded and we can say that an event has occurred.
Javascript will create a XMLHttpRequest object.
Then the web server will be receiving a request from the HttpRequest object.
Processing of the request.
Then the web page receives a response back from the server.
Again a confirmation response is sent by the server to the webpage.
Javascript reads the response.
Actions are taken as requested by the Javascript.

Modern browsers

APIs can be easily fetched and used by modern browsers, instead of XMLHttpRequest objects.

FAQs

Mention the purpose of AJAX?
AJAX maintains the interaction between client and server. AJAX also allows updating the web server asynchronously.
Mention a use of AJAX in web development?
AJAX helps in creating better, faster and smarter web applications with the use of XML, HTML, CSS etc.
Within how much time AJAX basics can be learnt?
Within half or one hour, AJAX basics can be learnt. The reason behind this is AJAX is not a language in itself. It is just a set of techniques. Spending a day or two, can help you to get a good grip over AJAX.
Mention the full form of AJAX?
The full form of AJAX is Asynchronous Javascript And XML.

Key takeaways

In this article we have started our discussion with the introduction to AJAX. We have also seen the advantages of using AJAX and finally how we can start working with AJAX.

Keeping the theoretical knowledge at our fingertips helps us get about half the work done. To gain complete understanding, practice is a must. To achieve thorough knowledge, visit our page.