极客笔记解释AJAX中回调函数的作用
AJAX （异步 JavaScript 和 XML）不是一种编程语言，而是一种用于创建更加交互式网页应用的技术。与传统的网页应用不同，当与服务器交互时， 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”。
async = “true”以异步方式处理请求，即在服务器接收响应前不会冻结用户界面。
async = “false”表示同步处理请求。
- user, password – 如果涉及身份验证，则必须提供用户名或用户名和密码。默认值为“null”。
步骤3 ：使用send()方法
这也是XMLHttpRequest的一个方法，用于发送请求。如果请求是异步的（open()的async属性为true），则在请求成功发送后返回。
如果是同步请求，则该方法只有在从服务器接收到响应后才会返回；用户应保持空闲。
步骤4 ：使用onreadystatechange属性
要处理响应，我们使用XMLHttpRequest的onreadystatechange属性。
步骤5 ：调用回调函数
现在通过将匿名函数附加到onreadystatechange上来调用回调函数。现在通过在此函数中编写所有代码来对接收到的数据执行所需的操作。
注意
onreadystatechange属性定义了当XMLHttpRequest的readyState（状态）发生变化时要执行的函数。
readyState的值 −
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"}
]