从零开始学习 AJAX：超详细！15 分钟搞定 AJAX 原理和使用方法
文章目录
一、AJAX是什么？
AJAX（Asynchronous JavaScript and XML）是一种用于向服务器异步发送 HTTP 请求并接收响应的技术。在传统的 Web 应用程序中，用户与服务器进行交互时必须刷新整个页面才能显示新的内容。而 AJAX 技术通过在后台发送异步 HTTP 请求并接收响应，使得用户能够在不刷新整个页面的情况下获取更新后的数据。因此，AJAX 技术可以减少网络带宽的占用，并提高用户交互的效率和流畅度，使得 Web 应用程序更加灵活和可靠。
二、工作原理
1.发送请求
客户端通过 JavaScript 发送 AJAX 请求，可以是 GET 或 POST 方式，也可以发送 JSON 或其它格式的数据。
例如：
$.ajax({
url: "/api/getUserInfo",
type: "GET",
data: { userId: 123 },
dataType: "json",
success: function(result) {
console.log(result);
},
error: function(xhr, status, error) {
console.log(error);
}
});
2.处理请求
HTTP 请求被发送到服务器，并被后端代码处理。后端代码可以使用 Java、PHP、Python 等多种编程语言来实现，返回数据通常是 JSON 或其它格式的字符串。
例如：
$userId = $_GET["userId"];
$userInfo = getUserInfo($userId);
echo json_encode($userInfo);
3.处理响应
前端 JavaScript 代码接收到后端返回的数据，根据数据类型进行解析和处理。对于 JSON 格式数据，通常使用 JSON.parse() 方法将字符串转换为对象。
例如：
success: function(result) {
var userInfo = JSON.parse(result);
// ...
}
4.更新页面
最终，前端 JavaScript 代码使用 DOM 操作更新页面内容，以此实现无需刷新页面即可更新数据的效果。
例如：
success: function(result) {
var userInfo = JSON.parse(result);
$("#name").text(userInfo.name);
$("#age").text(userInfo.age);
$("#sex").text(userInfo.sex);
// ...
}
三、应用
AJAX 技术被广泛应用于各种动态Web 应用程序中，包括创建动态网页、自动填充表单、无刷新上传文件、实时搜索、交互式快速响应等功能。同时，AJAX 技术也可以处理和显示各种格式的数据，如 JSON 和 XML 等。许多流行的 JavaScript 框架，如 jQuery、AngularJS 和 React 等，都提供了丰富的 AJAX 功能，方便开发者使用。例如;
1.数据加载
AJAX 可以通过异步请求后端服务器获取数据并将其显示在网页上，让页面变得更加动态和用户友好。比如下面的代码演示了如何使用 AJAX 请求一个 JSON 格式的数据，并将其渲染到网页上：
<!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>AJAX Demo</title>
</head>
<body>
<h1>User Info</h1>
<ul id="user-info-list"></ul>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$.ajax({
url: "/api/getUserInfo",
type: "GET",
data: { userId: 123 },
dataType: "json",
success: function(result) {
var userInfoList = $("#user-info-list");
$.each(result, function(i, user) {
var item = $("<li>").text(user.name + ": " + user.age);
userInfoList.append(item);
});
},
error: function(xhr, status, error) {
console.log(error);
}
});
</script>
</body>
</html>
代码解释：上面的代码中，我们使用了 jQuery 提供的 $.ajax 方法发送了一个 GET 请求，请求地址是 /api/getUserInfo。服务器返回的数据是一个 JSON 数组，每个元素代表一个用户对象。我们使用 $.each 方法遍历这个数组，将每个用户的名称和年龄显示在网页上。
2.表单提交
AJAX 可以用于表单提交，提高用户交互效率，同时避免页面的刷新导致不必要的页面闪烁。比如下面的代码演示了如何通过 AJAX 提交一个表单，并根据服务器返回的数据提示用户注册成功或失败：
<!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>AJAX Demo</title>
</head>
<body>
<h1>Register</h1>
<form id="register-form">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br>
<input type="submit" value="Register">
</form>
<div id="message"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$("#register-form").submit(function(event) {
event.preventDefault();
var form = $(this);
var username = form.find("input[name='username']").val();
var password = form.find("input[name='password']").val();
$.ajax({
url: "/api/register",
type: "POST",
data: { username: username, password: password },
dataType: "json",
success: function(result) {
$("#message").text("Registration succeeded.");
},
error: function(xhr, status, error) {
$("#message").text("Registration failed: " + xhr.responseText);
}
});
});
</script>
</body>
</html>
代码解释：上面的代码中，我们使用了 jQuery 提供的 submit 方法监听表单的提交事件，通过 preventDefault 方法取消默认的表单提交行为。然后，我们使用 $.ajax 方法发送一个 POST 请求，请求地址是 /api/register，并将表单的用户名和密码数据作为请求参数。服务器会根据这些数据判断是否注册成功，并将结果以 JSON 格式返回。根据返回结果，我们可以在网页上提示用户注册是否成功。
3.数据可视化
AJAX 可以用于将大量数据可视化展示，从而给用户带来更好的阅读体验。比如下面的代码演示了如何通过 AJAX 获取 GitHub 上某个用户的仓库列表，并将列表绘制成柱状图：
<!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>AJAX Demo</title>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</head>
<body>
<h1>My Repositories</h1>
<div id="chart"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$.ajax({
url: "https://api.github.com/users/binjie09/repos",
type: "GET",
dataType: "json",
success: function(result) {
var labels = [];
var data = [];
$.each(result, function(i, repo) {
labels.push(repo.name);
data.push(repo.stargazers_count);
});
renderChart(labels, data);
},
error: function(xhr, status, error) {
console.log(error);
}
});
function renderChart(labels, data) {
var options = {
chart: {
type: 'bar'
},
series: [{
name: "Stars",
data: data
}],
xaxis: {
categories: labels
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
}
</script>
</body>
</html>
代码解释：上面的代码中，我们使用了 ApexCharts JavaScript 库将数据绘制成柱状图。首先，我们使用 $.ajax 方法获取 GitHub 上某个用户的仓库列表，并将仓库名称和星标数分别保存在 labels 和 data 数组中。然后，我们调用 renderChart 函数将这些数据绘制成柱状图，并显示在网页上。
四、安全性
在使用 AJAX 技术时，需要注意一些安全性问题。因为 AJAX 请求是异步的，所以它们不会像普通的 Web 请求那样受到浏览器的“同源策略”限制。这意味着，如果 AJAX 请求的 URL 中包含有用户敏感信息，或者 AJAX 响应中包含有恶意脚本，就可能会导致安全问题。为了防止这种情况发生，应该对 AJAX 请求进行验证，并且只向可信任的服务器发送请求。同时，还需要对 AJAX 响应进行过滤和处理，以确保它们不包含任何恶意代码。
在使用 AJAX 时，需要注意以下安全性问题：
1.跨域请求
为了增强站点的安全性，浏览器会阻止对不同域名的资源进行访问。因此，如果你的网页和后端 API 不在同一个域名下，就会遇到跨域请求的限制。可以通过设置 CORS（跨域资源共享）来允许跨域请求。
例如，假设你的前端页面在 http://example.com 下，而后端 API 在 http://api.example.com 下，可以在后端 API 的响应头中设置 Access-Control-Allow-Origin 字段来允许跨域请求：
// 后端 API 的响应头中设置跨域访问
response.setHeader('Access-Control-Allow-Origin', 'http://example.com');
2.XSS 攻击
AJAX 请求可以将用户输入的数据发送到服务器端，但同时也可能受到恶意攻击。特别是当使用 AJAX 获取到内容后，在将其插入到 DOM 中时，如果没有对内容进行过滤或转义，可能会导致 XSS（跨站脚本攻击）漏洞。
例如，在以下代码中，用户输入的内容被直接插入到网页中：
<input type="text" id="name">
<button id="submit">Submit</button>
<div id="result"></div>
<script>
$("#submit").click(function() {
var name = $("#name").val();
$.ajax({
url: "/api/hello",
type: "POST",
data: { name: name },
dataType: "json",
success: function(result) {
$("#result").html("Hello, " + result.message);
},
error: function(xhr, status, error) {
console.log(error);
}
});
});
</script>
如果用户输入的名称中包含恶意脚本，比如 <script>alert('XSS attack!');</script>，那么它会直接显示在网页中，导致 XSS 攻击。为了防止 XSS 攻击，需要对插入到 DOM 中的内容进行过滤或转义。可以使用 jQuery 提供的 text 方法对内容进行转义：
$("#result").text("Hello, " + result.message);
这样就能够将内容中的标签和特殊字符进行转义，从而预防 XSS 攻击。
3.CSRF 攻击
AJAX 请求也容易受到 CSRF（跨站请求伪造）攻击。CSRF 攻击是指攻击者通过在其他站点上技术合法用户的身份信息来伪造请求，达到冒充该用户向目标站点发送请求的目的。攻击者可以通过 JS 注入等方式，让用户在不知情的情况下发起请求。
为了防止 CSRF 攻击，可以使用 Token 或 Referer 等方式进行认证。Token 方式是在提交表单或发送 AJAX 请求时，将一个随机生成的 Token 值写入到响应体中，并将其存储在 Session 或 Cookie 中。每次请求时，校验提交的数据中是否包含此 Token 值，以此判断是否是合法请求。
以下代码演示了如何使用 Token 防止 CSRF 攻击：
<form id="user-form">
<input type="text" name="name" placeholder="Your name">
<button type="submit">Submit</button>
</form>
<script>
// 获取 cookie 中的 CSRF Token
function getCSRFToken() {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
// 判断是否为 CSRF Token 的 Cookie
if (cookie.substring(0, 'csrftoken'.length + 1) === ('csrftoken' + '=')) {
cookieValue = decodeURIComponent(cookie.substring('csrftoken'.length + 1));
break;
}
}
}
return cookieValue;
}
$("#user-form").submit(function(event) {
event.preventDefault();
var form = $(this);
var csrfToken = getCSRFToken();
var name = form.find("input[name='name']").val();
$.ajax({
url: "/api/addUser",
type: "POST",
data: { name: name },
headers: {"X-CSRFToken": csrfToken}, // 将 CSRF Token 放到请求的头信息中
dataType: "json",
success: function(result) {
console.log(result);
},
error: function(xhr, status, error) {
console.log(error);
}
});
});
</script>
在以上代码中，我们使用了一个名为 getCSRFToken 的函数来获取 Cookie 中的 CSRF Token 值，然后将其放到请求头信息中。在 Django 框架中，可以通过 csrftoken 这个 Cookie 来获取 CSRF Token 值，每次表单提交时都会将此 Token 值传到服务器端进行校验。如果 Token 值不匹配，说明该请求可能是伪造的，需要返回错误提示。
五、项目代码示例
前端利用ajax获取服务器后端代码中的数据：
代码示例：
const datas = {
a: axx,
b: bxx,
c: cxx,
};
const options = {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(datas),
};
fetch("url", options)
.then((response) => response.json())
.then((data) => {
Datas = data;
});
//Datas={a1: a1xx,b1: b1xx,c1: c1xx,}
setTimeout(function () {
var a1 = Datas.a1;
var b1 = Datas.b1;
var c1 = Datas.c1;
//调用script中的函数，此时this是window
this.outFunction(a1,b1,c1);
}, "3000");
代码解释：这里以POST请求为例
（1）第一，需要设置向服务器传递的参数datas对象，即后端接收并处理的对象。
（2）第二，需要设置options对象，其中包括method(请求方法)、headers(请求头)、body(请求体)等。
（3）使用fetch()函数，其中url就是服务器中的请求地址，从服务器收到的数据为response，赋给data，最后赋给了Datas，方便对接收到的数据进行处理。
（4）由于ajax请求是异步的，因此需要把对接收到的数据进行处理相关操作放到setTimeout(function () {相关操作....}, time)；中，以便于在接收完数据后，再进行操作的执行，也可以使用回调函数处理响应结果。以下是一个使用 jQuery 实现的 AJAX 示例代码：$.ajax({ url: "/api/getData", type: "GET", dataType: "json", success: function(result) { // 在请求成功后更新页面内容 console.log(result); }, error: function(xhr, status, error) { // 在请求失败时显示提示信息 console.log(error); } });其中设置了 success 和 error 回调函数来处理响应结果。
（5）如果要把接收到的数据a1，b1，c1传入自定义的<script></script>中的outFunction()函数，则需调用this.outFunction(a1,b1,c1)，其中this指的是window对象，如下图：
总结
以上就是今天要分享的有关ajax的内容，作者也在学习中，如有讲解不清楚或有误的地方，还请指正，谢谢。
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
43
0- 0
已为社区贡献5条内容
所有评论(0)