What are AJAX applications in web development ?
Last Updated :
05 Aug, 2025
Web development refers to building, creating, testing, and maintaining websites. It includes aspects such as web design, web publishing, web programming, and database management. It is the creation of an application that works over the internet i.e. websites. A website has two basic systems that are frontend and backend.
Frontend: In simple words, the front end of a website are those parts through which users can interact with the website.
Backend: In simple words, the back end of a website are those parts where communication between server and client occurs, since this stuff happens in the background, users don't have to worry about it.
In this article, we will talk about how we update our frontend using the data given by our backend. Well, there are many ways to achieve this. but we will talk about how to achieve this functionality using AJAX.
What is AJAX and what are its applications?
Whenever you are going to work on web-based projects there is a high chance that you need to interact with the server however you don't want to disturb the UI by refreshing it, again and again, to get the UI changes from the server. In these types of scenarios, AJAX plays an important role. AJAX is not a programming language instead, it is a method of accessing data from the server asynchronously and updating the web pages without refreshing/reloading them. In simple words, AJAX is a technique to perform operations that requires server interactions without reloading the web pages again and again.
AJAX stands for Asynchronous Javascript and XML, as the name suggests the process is out of sync and occurs in the background without disturbing the main process thread. The pre-requisites are basic knowledge of JavaScript, XML, and HTML.
Some of the most important applications of AJAX are as follows.
- Updating a webpage without reloading the page.
- Requesting data from the server after the page has been loaded.
- Receiving data from the server after the page has been loaded.
- Sending data to the server in the background without disturbing UI or other processes.
XMLHttpRequest Object: The XMLHttpRequest object can be used to exchange data with a server behind the scenes.
Syntax:
var xmlObject = new XMLHttpObject();
There are mainly two methods i.e. open() and send() which can be accessed by the reference object of XMLHttpObject. The open() method is used to prepare the request and send() method sends the request to the server.
xmlObj.open('GET', 'mypage.php', true);
xmlObj.send();
Types Of HTTP Status Code: These are the parameters used to define the request to send to the server. The first parameter shows the type of request, there are mainly five types of requests i.e. GET, POST, PUT, PATCH, DELETE.
The 'GET' request asks the server for information about the 'mypage.php'. If such a page exists the server will send the response with ready state 4 and code 200 else it will return code 404 which means the page does not exist.
The last argument 'true' is the value for asynchronous. By default it is set to "true" which means this process will happen in the background, you can apply the value as "false" to make this process synchronous.
Approach: We are not going to use a dedicated server instead we will send requests to our local machine for retrieving the data.
Example 1: Whenever we will click on the button, it will trigger loadPage() function. We are using xmlObj.onload() callback function that ensures the request and response cycle is complete. We are populating the HTML div using a simple DOM manipulation technique.
xmlObj.responseText contains the response sent by the server in text form and this will populate the HTML div with the result.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function loadPage() {
var xmlObj = new XMLHttpRequest();
xmlObj.onload = () => {
document.getElementById("ajaxPage")
.innerHTML = xmlObj.responseText;
};
xmlObj.open("GET", "example.txt", true);
xmlObj.send();
}
</script>
</head>
<body>
<h2 style="color:green;">
GeeksforGeeks
</h2>
<h3>
Please click here to see changes
without refershing the page.
</h3>
<button type="button" onclick="loadPage()">
Click Here
</button>
<div id="ajaxPage"></div>
</body>
</html>
example.txt:
<html>
<head>
<title>AJAX EXAMPLE PAGE </title>
</head>
<body>
<h2> AJAX EXAMPLE PAGE </h2>
<h4>Hey there! this is an example page
to show jquery ajax working.</h4>
</body>
</html>
Output:
jQuery AJAX: jQuery library has the ajax() method through which we can perform asynchronous operations similar to our previous example. The ajax() method takes an object with a bunch of properties like type, URL, async, etc. similar to our XMLHTTPRequest().
Example: In this example, we will use jQuery ajax() method to achieve similar functionality as XMLHTTPRequest().
Step 1: Let us create a file and name it ajax_example2.html, first we will write our basic boilerplate HTML code.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Jquery Ajax Tutorial</title>
</head>
<body></body>
</html>
Step 2: Since we are going to use the ajax() method from the jQuery library, we first need to import jQuery CDN (content delivery network),
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
Step 3: After the above two steps, we are free to use the jQuery library in our "ajax_example2.html" file. Let us create a simple text file "example.txt" to display the content of this file using ajax().
example.txt:
<html>
<head>
<title>AJAX EXAMPLE PAGE </title>
<head>
<body>
<h2> AJAX EXAMPLE PAGE </h2>
<h4>
Hey there! this is an example page to
show jquery ajax working.
</h4>
</body>
</html>
Step 4: We will write a jQuery function that will update our web page. The function will execute whenever we will click a button and the results will be shown in an HTML div with id 'result'.
JavaScript
$(document).ready(function() {
$("button").click(function() {
$.ajax({url: "example2.txt",
success: function(result) {
$("#result").html(result);
}});
});
});
Final code:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Jquery Ajax Tutorial</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$.ajax({
url: "example.txt",
success: function (result) {
$("#result").html(result);
}
});
});
});
</script>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<div>
Please click the button below to see
changes without refreshing the page.
</div> <br>
<button>Click Here!</button>
<div id="result"></div>
</body>
</html>
Output:
If you are comfortable with jQuery, then you can use the ajax() method, or else you can use XMLHTTPRequest(), both of these work much similarly other than the syntax.
Advantages:
- Since there is no reload/refresh required, the web pages look more appealing.
- AJAX works asynchronously and does not block synchronous processes.
- Form validation can also be done using AJAX.
- Less memory consumption
Disadvantages:
- AJAX can cause problems for search engines because it is highly dependent on JavaScript.
- Debugging could be difficult for complex projects/systems.
- The back button can also cause problems with AJAX rendered pages.
Similar Reads
jQuery Tutorial jQuery is a lightweight JavaScript library that simplifies the HTML DOM manipulating, event handling, and creating dynamic web experiences. The main purpose of jQuery is to simplify the usage of JavaScript on websites. jQuery achieves this by providing concise, single-line methods for complex JavaSc
8 min read
Getting Started with jQuery jQuery is a fast lightweight, and feature-rich JavaScript library that simplifies many common tasks in web development. It was created by John Resign and first released in 2006. It makes it easier to manipulate HTML documents, handle events, create animations, and interact with DOM(Document Object M
4 min read
jQuery Introduction jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM). jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser Java
7 min read
jQuery Syntax The jQuery syntax is essential for leveraging its full potential in your web projects. It is used to select elements in HTML and perform actions on those elements.jQuery Syntax$(selector).action()Where - $ - It the the shorthand for jQuery function.(selector) - It defines the HTML element that you w
2 min read
jQuery CDN A Content Delivery Network (CDN) is a system of distributed servers that deliver web content to users based on their geographic location. Including the jQuery CDN in your project can improve the performance, enhance reliability, and simplify maintenance.What is a jQuery CDN?A jQuery CDN is a service
4 min read
jQuery Selectors
JQuery SelectorsWhat is a jQuery Selector?jQuery selectors are functions that allow you to target and select HTML elements in the DOM based on element names, IDs, classes, attributes, and more, facilitating manipulation and interaction. Syntax: $(" ")Note: jQuery selector starts with the dollar sign $, and you encl
5 min read
jQuery * SelectorThe jQuery * selector selects all the elements in the document, including HTML, body, and head. If the * selector is used together with another element then it selects all child elements within the element used. Syntax: $("*")Parameters: *: This parameter is used to select all elements.Example 1: Se
1 min read
jQuery #id SelectorjQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating on the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Aja
1 min read
jQuery .class SelectorThe jQuery .class selector specifies the class for an element to be selected. It should not begin with a number. It gives styling to several HTML elements. Syntax: $(".class") Parameter: class: This parameter is required to specify the class of the elements to be selected.Example 1: In this example,
1 min read
jQuery Events
jQuery Effects
jQuery HTML/CSS
jQuery Traversing