AJAX (Asynchronous Javascript and XML) is used to create web applications asynchronous. It uses XMLHttpRequest to transport data to and from the server. AJAX always works on Request and Response means AJAX will Request anything from the server and the server will give the Response back to AJAX. We have a built-in object of Javascript known as “XMLHttpRequest” to send Responses and get Requests from the server.
Then the role of the callback function in AJAX comes after getting any response from the server. A callback function is called on completion of an AJAX request. We will define what to do with the response that is from the server in the callback function. Therefore, the AJAX function is used to handle those responses that we will get after sending the request.
The callback function is used in two types in AJAX.
1. Anonymous: Steps for Using Callback as Anonymous Function.
- Create a new XMLHttpRequest.
- Use the open() method of XMLHttpRequest to specify the request.
- Use send() method of XMLHttpRequest to send the request to the server.
- Use onreadystatechange property of XMLHttpRequest() to use the response.
- Call a callback function by attaching it with “onreadystatechange” as an anonymous function with all the code that will be utilizing the response that we got from server.
Example:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Anonymous Callback Function in AJAX</title> <script> function loadInformation() { // Request var request = new XMLHttpRequest(); request.open("GET", "./data.json"); request.send(); // Response request.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { document.getElementById("container") .innerHTML = this.responseText; } } } </script> </head> <body> <div style="text-align: center;"> <h1 style="color:green;"> neveropen </h1> <h3>Anonymous Callback function in AJAX</h3> <button onClick="loadInformation()"> Click to Load </button> <br /><br /> <div id="container"></div> </div> </body> </html> |
data.json
{
"name":"Mahesh",
"age":"29",
"city":"Mumbai"
}
Output:
2. Named function: Steps for Using Callback as Named Function:
- Define a Callback function with a name that contains all the code that will be utilizing the response that we got from the server.
- Create a new XMLHttpRequest.
- Use the open() method of XMLHttpRequest to specify the request.
- Use send() method of XMLHttpRequest to send the request to the server.
- Use onreadystatechange property of XMLHttpRequest() to use the response.
- Call that named Callback function by attaching it with “onreadystatechange”.
Example:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width,initial-scale=1.0"> <title>Named Callback Function in AJAX</title> <script> function callback_fxn() { if (this.readyState == 4 && this.status == 200) { document.getElementById("container") .innerHTML = this.responseText; } } function loadInformation() { // Request var request = new XMLHttpRequest(); request.open("GET", "./data2.json"); request.send(); // Response request.onreadystatechange = callback_fxn; function callback_fxn() { if (this.readyState == 4 && this.status == 200) { document.getElementById("container").innerHTML = this.responseText; } } } </script> </head> <body> <div style="text-align: center;"> <h1 style="color:green;"> neveropen </h1> <h3>Named Callback Function in AJAX</h3> <button onClick="loadInformation()"> Click to Load </button> <br /><br /> <div id="container"></div> </div> </body> </html> |
data2.json
{
"name":"Mansi",
"age":"21",
"city":"Kolkata"
}
Output:
