极客教程解释AJAX中回调函数的作用
AJAX（Asynchronous Javascript and XML）是用来创建网络应用程序的异步的。它使用XMLHttpRequest向服务器传输数据。AJAX总是在Request和Response上工作，这意味着AJAX将从服务器上请求任何东西，而服务器将把Response反馈给AJAX。我们有一个内置的Javascript对象，称为 “XMLHttpRequest”，用于发送响应和从服务器获取请求。
那么AJAX中的回调函数的作用是在从服务器获得任何响应之后。回调函数在完成AJAX请求时被调用。我们将在回调函数中定义如何处理来自服务器的响应。因此，AJAX函数被用来处理我们在发送请求后得到的那些响应。
回调函数在AJAX中的使用有两种类型。
1.Anonymous:使用回调作为匿名函数的步骤。
- 创建一个新的XMLHttpRequest。
- 使用XMLHttpRequest的open()方法来指定请求。
- 使用XMLHttpRequest的send()方法，将请求发送到服务器。
- 使用XMLHttpRequest()的onreadystatechange属性来使用该响应。
- 调用一个回调函数，将其与 “onreadystatechange “连接起来，作为一个匿名函数，包含所有将利用我们从服务器得到的响应的代码。
示例:
<!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>
data.json
{
"name":"Mahesh",
"age":"29",
"city":"Mumbai"
}
输出:
2.Named function:使用回调作为Named Function的步骤。
- 定义一个回调函数，其名称包含将利用我们从服务器得到的响应的所有代码。
- 创建一个新的XMLHttpRequest。
- 使用XMLHttpRequest的open()方法来指定请求。
- 使用XMLHttpRequest的send()方法，将请求发送到服务器。
- 使用XMLHttpRequest()的onreadystatechange属性来使用该响应。
- 通过附加 “onreadystatechange “来调用这个命名的回调函数。
示例:
<!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"
}
输出:
