解释 AJAX 中回调函数的作用
AJAX(异步 JavaScript 和 XML)不是一种编程语言，而是一种创建更具交互性的 Web 应用程序的技术。与传统的 Web 应用程序不同，传统的 Web 应用程序在与服务器交互时会将我们引导到新页面，而 AJAX 则会将数据加载到屏幕上，而不会让用户知道发出了请求。
优点
动态显示内容，而无需重新加载 HTML 页面。
与用户交互更快。
更新页面内的数据，而无需重定向用户。
允许用户在后台与服务器通信时使用网站。
回调函数是什么意思?
回调函数是作为参数传递给另一个函数并在内部调用以执行所需任务的函数。
在 AJAX 中，一旦对服务器的请求完成，就会调用回调函数。响应和 AJAX 调用的状态在内部传递到此函数。回调函数使用获得的响应执行所需的操作。因此，它在 AJAX 中非常重要，因为它完全是关于处理请求的数据。
使用回调函数有两种方式
匿名回调函数
命名回调函数
匿名回调函数
步骤 1:创建 XMLHttpRequest
XMLHttpRequest 是 javascript 的内置对象，数据通过它传输到服务器和从服务器传输。这样，请求就发送到服务器，并收到响应。
步骤 2:使用 open() 方法
使用 XMLHttpRequest 的方法创建对服务器的请求。
语法
open(method, url, async, user, password)
这里，async、user 和 password 属性是可选。
method – HTTP URL 的 GET、POST、PUT、DELETE。
url – 需要发送请求的统一资源定位器
async – 指示是否异步发送请求。默认值为"true"。
user, password – 如果涉及身份验证，则需要提及用户名或用户名和密码。默认值为"null"。
async = "true" 异步处理请求，即，它不会冻结用户，直到服务器收到响应。
async = "false" 表示同步处理请求。
步骤 3:使用 send() 方法
这也是 XMLHttpRequest 用来发送请求的方法。如果请求是异步的(open() 的 async 属性为 true)，则在成功发送请求后返回该方法。
如果是同步的，则该方法在收到服务器的响应之前不会返回；用户应保持空闲状态。
步骤 4:使用 onreadystatechange 属性
为了管理响应，我们使用 XMLHttpRequest 的属性 - onreadystatechange。
步骤 5:调用回调函数
现在通过将 onreadystatechange 作为匿名函数附加来调用回调函数。现在，通过在此函数内编写所有代码，对接收到的数据执行所需的操作。
注意
Onreadystatechange 属性定义当 readystate(XMLHttpRequest 的状态)更改时要执行的函数。
就绪状态值 −
0 − 请求未初始化
1 − 服务器连接已建立
2 − 收到请求
3 − 处理请求
4 − 请求已完成，响应已准备就绪
HTTP 状态值 −
200 − OK
403 − 禁止
404 − 未找到等。
示例 1
让我们看一个简单的示例，其中我们根据按钮在 HTML 页面上显示一些内容点击次数。请求使用 AJAX 发送到服务器。当 readyState 变为 4 时，我们显示按钮的点击次数。
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>
注意 - 我们还可以添加事件监听器，这样通过单击按钮或其他 HTML 元素就可以发送请求。
命名回调函数
步骤 1 - 定义一个回调函数并为其命名
步骤 2 - 创建 XMLHttpRequest
步骤 3 - 使用 open() 方法
步骤 4 - 使用 send() 方法
步骤 5 - 使用 XMLHttpRequest 的 onreadystatechange 属性
步骤 6 - 调用回调函数
通过将命名回调函数与 onreadystatechange 属性关联来调用该函数。
首先，定义一个回调函数，并为其指定一个合适的名称，然后包含处理从服务器收到的响应的代码。
示例 2
这是一个使用命名回调函数在 HTML 页面上显示 JSON 文件中数据的简单示例。使用 AJAX 发送请求以从文件中获取数据。
在 html 页面上单击按钮时，将调用 click_fn( )，该函数在发送请求后调用回调函数。此处，回调函数的名称为"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"}
]
