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=
</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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...