Объясните роль функции обратного вызова в AJAX.
AJAX (асинхронный Javascript и XML) используется для создания асинхронных веб-приложений. Он использует XMLHttpRequest для передачи данных на сервер и с сервера. AJAX всегда работает с запросом, а ответ означает, что AJAX будет запрашивать что-либо с сервера, и сервер вернет ответ AJAX. У нас есть встроенный объект Javascript, известный как «XMLHttpRequest», для отправки ответов и получения запросов с сервера.
Затем роль функции обратного вызова в AJAX наступает после получения любого ответа от сервера. Функция обратного вызова вызывается по завершении запроса AJAX. Мы определим, что делать с ответом от сервера в функции обратного вызова. Поэтому функция AJAX используется для обработки тех ответов, которые мы получим после отправки запроса.
Функция обратного вызова используется в двух типах в AJAX.
1. Анонимный: шаги по использованию обратного вызова в качестве анонимной функции.
- Создайте новый XMLHttpRequest.
- Используйте метод open() объекта XMLHttpRequest, чтобы указать запрос.
- Используйте метод send() XMLHttpRequest для отправки запроса на сервер.
- Используйте свойство onreadystatechange XMLHttpRequest(), чтобы использовать ответ.
- Вызовите функцию обратного вызова, присоединив ее к «onreadystatechange» в качестве анонимной функции со всем кодом, который будет использовать ответ, полученный от сервера.
Пример:
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;"> GeeksforGeeks </h1> <h3>Anonymous Callback function in AJAX</h3> <button onClick="loadInformation()"> Click to Load </button> <br /><br /> <div id="container"></div> </div></body> </html> |
данные.json
{
"name":"Mahesh",
"age":"29",
"city":"Mumbai"
}Выход:
2. Именованная функция: шаги по использованию обратного вызова в качестве именованной функции:
- Определите функцию обратного вызова с именем, которое содержит весь код, который будет использовать ответ, полученный от сервера.
- Создайте новый XMLHttpRequest.
- Используйте метод open() объекта XMLHttpRequest, чтобы указать запрос.
- Используйте метод send() XMLHttpRequest для отправки запроса на сервер.
- Используйте свойство onreadystatechange XMLHttpRequest(), чтобы использовать ответ.
- Вызовите эту именованную функцию обратного вызова, присоединив ее к «onreadystatechange».
Пример:
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;"> GeeksforGeeks </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"
}Выход: