Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Explain the role of callback function in AJAX
AJAX (Asynchronous JavaScript and XML) is not a programming language but a technique for creating more interactive web applications. Unlike conventional web applications, which direct us to a new page when interacting with the server, AJAX loads data onto the screen without letting the user know that the request was even made.
Advantages
Displays content dynamically without reloading the HTML page.
Faster interaction with the users.
Updates the data within the page without redirecting the user.
Users were allowed to use the website while communication with the server went in the background.
What is meant by Callback Function?
The callback function is a function that is passed as an argument to another function and invoked internally to perform required tasks.
In AJAX, the callback function is called once the request to the server is completed. Response and the status of AJAX calls are passed into this function internally. The callback function performs the required action using the response obtained. Thus, it is very important in AJAX because it is all about dealing with the requested data.
There are two ways of Using the Callback Function
Anonymous callback function
Named callback function
Anonymous Callback Function
Step 1: Creating an XMLHttpRequest
XMLHttpRequest is a built-in object of javascript through which data is transported to and from the server. Thus the requests are made to the server, and responses are received.
Step 2: Use the open() method
A method of XMLHttpRequest is used to create a request to the server.
Syntax
open(method, url, async, user, password)
Here, async, user, and password attributes are optional.
method – GET, POST, PUT, DELETE for HTTP URLs.
url – The Uniform Resource Locator to which the request needs to be sent
async – Indicates whether the request is to be sent asynchronously or not. The default value is “true”.
user, password – If authentication is involved, mentioning username or both username and password is necessary. The default value is “null”.
async = “true” handles the request asynchronously, i.e., it does not freeze the user until the server receives a response.
async = “false” indicated handling the request synchronously.
Step 3: Use send() method
This is also a method of XMLHttpRequest used to send the request. If the request is asynchronous (async attribute of open() is true), this is returned once the request is successfully sent.
If synchronous, the method will not return until the response is received from the server; the user should remain idle.
Step 4: Use onreadystatechange property
To manage the response, we use the property of XMLHttpRequest called – onreadystatechange.
Step 5: Call the callback function
Now call a callback function by attaching with onreadystatechange as the anonymous function. Now perform the required action on the received data by writing all the code inside this function.
Note
Onreadystatechange property defines the function to be executed when the readystate (status of XMLHttpRequest) changes.
Ready State values −
0 − request not initialized
1 − server connection established
2 − request received
3 − processing request
4 − request is finished, and the response is ready
HTTP status values −
200 − OK
403 − Forbidden
404 − not found, etc.
Example 1
Let’s look into a simple example where we display some content on the HTML page based on button clicks. The request is sent to the server using AJAX. When the readyState becomes 4, we display the click count of the button.
callbackdemo.html
<html>
<body>
<h2> Anonymous callback function </h2>
<button id = "btn" onclick = "callback_fn()"> Click Here </button>
<div id = "info" style = "width: 200px; border: 1px solid black; padding: 1%"> </div>
<script>
var count = 0;
var string;
let info = document.getElementById('info')
function callback_fn() {
info.innerHTML = 'AJAX Call <br /><br />'
//AJAX Call
let http = new XMLHttpRequest();
http.onreadystatechange = function () {
if(this.readyState == 4){
count++;
string = count.toString();
info.innerHTML += 'Button clicked '+string+' time <br/>';
}
}
info.innerHTML += 'Started here! <br /><br />'
http.open('GET', 'https://jsonplaceholder.typicode.com/posts/', true)
http.onload = function () {
info.innerHTML += '<br />AJAX Call Completed!'
}
http.send()
}
</script>
</body>
</html>
Note − We can also add event listeners so the requests would be sent by clicking a button or other elements of HTML.
Named Callback Function
Step 1 − Define a callback function with a name
Step 2 − Create an XMLHttpRequest
Step 3 − Use the open() method
Step 4 − Use the send() method
Step 5 − Use the onreadystatechange property of XMLHttpRequest
Step 6 − Call the callback function
Call the named callback function by attaching it with the onreadystatechange property.
Initially, define a callback function with a proper name, and include the code to deal with the response received from the server.
Example 2
This is a simple example of displaying data from a JSON file on the HTML page using the named callback function. The request is sent using AJAX to get data from the file.
When the button is clicked on an html page, click_fn( ) is called, which calls the callback function after sending the request. Here, the name of the callback function is “named_callback”.
callbackdemo.html
<html> <head> <script type = "text/javascript" src = "script.js”> </script> </head> <body> <h2> Named Callback Function in AJAX </h2> <button id = "btn" onclick = "click_fn()"> Click Here </button> <br> <br> <br> <h3 id = "info"></h3> </body> </html>
script.js
var btn = document.getElementById("btn");
function named_callback() {
if (this.readyState == 4 && this.status == 200) {
var txt = "";
var data = JSON.parse(this.responseText);
for(i=0;i<data.length;i++){
var x=i+1;
txt += "<u>"+"Details of person "+x.toString()+"</u>"+"<br>";
var age=(data[i].Age);
txt += "<p>" +data[i].Name + " age is " + age + ", loves to play "+data[i].Sport+".</p>" ;
}
document.getElementById("info").innerHTML = txt;
}
}
function click_fn() {
var http = new XMLHttpRequest();
http.open("GET", "details.json");
http.send();
http.onreadystatechange = named_callback;
}
details.json
[
{"Name":"Sreya", "Age":"21", "Sport":"Badminton"},
{"Name":"Suresh", "Age":"23", "Sport":"Cricket"}
]
848 Views
