数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法律研究解释 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 – GET、POST、PUT、DELETE 用于 HTTP URL。
url – 需要发送请求的统一资源定位符
async – 指示请求是否异步发送。默认值为“true”。
user、password – 如果涉及身份验证，则需要提及用户名或用户名和密码。默认值为“null”。
async = “true” 异步处理请求，即它不会冻结用户，直到服务器收到响应。
async = “false” 表示同步处理请求。
步骤 3：使用 send() 方法
这也是 XMLHttpRequest 的一种方法，用于发送请求。如果请求是异步的（open() 的 async 属性为 true），则在成功发送请求后返回此请求。
如果是同步的，则该方法在从服务器收到响应之前不会返回；用户应保持空闲状态。
步骤 4：使用 onreadystatechange 属性
为了管理响应，我们使用名为 onreadystatechange 的 XMLHttpRequest 属性。
步骤 5：调用回调函数
现在通过将 onreadystatechange 附加为匿名函数来调用回调函数。现在通过在此函数内部编写所有代码来对接收到的数据执行所需的操作。
注意
Onreadystatechange 属性定义了在就绪状态（XMLHttpRequest 的状态）更改时要执行的函数。
就绪状态值-
0 - 请求未初始化
1 - 服务器连接已建立
2 - 请求已接收
3 - 正在处理请求
4 - 请求已完成，响应已准备就绪
HTTP 状态值-
200 - 确定
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"}
]
2K+ 次查看
