引言
当你第一次听到 AJAX,也许会感到陌生,但其实它早已融入我们使用的网页中。本文将带你慢慢认识这个新朋友🧑🤝🧑。
🤔什么是 AJAX?
AJAX (Asynchronous JavaScript and XML) 是一种技术,它允许网页在不刷新整个页面的情况下与服务器进行数据交互。简单来说,AJAX 能够让网页在后台拉取数据,从而提供更流畅和高效的用户体验。
⚙️AJAX 的核心优势
- 局部刷新:更新页面的一部分内容,而无需刷新整个页面。
- 提升性能:减少不必要的资源加载,加快响应速度。
- 增强交互:支持实时更新,改善用户体验。
使用 fetch
:现代浏览器的标准方法
现代 JavaScript 提供了
fetch
API 来发送 HTTP 请求并处理响应。它基于 Promise,能以简洁的方式处理异步操作。
基本用法
以下示例通过 fetch API 获取github某组织的成员数据:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fecch</title>
</head>
<body>
<ul id="memberList">
</ul>
<script>
const oUL = document.getElementById('memberList');
fetch('https://api.github.com/orgs/lemoncode/members')
.then(response => response.json())
.then(data => {
oUL.innerHTML = data.map(member => `
<li>
<img src= "${member.avatar_url}" alt="">
<span>${member.login}</span>
</li>
`
)
}).join('')
</script>
</body>
</html>
运行结果:
(图片太大,只截了一张)
📌代码解析
fetch()
:接收一个 URL,返回一个 Promise 对象。response.json()
:将响应数据解析为 JSON 格式。- 数据处理:利用解析后的数据动态生成页面内容。
- 错误捕获:通过
.catch()
捕获请求过程中发生的错误。
fetch
的优点
- 简洁:相比传统的
XMLHttpRequest
,代码更短,逻辑更清晰。 - 基于 Promise:避免回调地狱(callback hell)。
- 自动处理 JSON:无需手动解析 JSON 数据。
🚨注意:fetch
不会自动抛出 HTTP 错误(如 404 或 500),这些需要手动处理。
✍🏻手写 AJAX 请求:从 XMLHttpRequest
开始
尽管
fetch
是主流,但理解和掌握XMLHttpRequest
仍然非常重要,尤其是在需要兼容旧浏览器或精细控制请求的场景下。
示例代码
以下是一个基于 XMLHttpRequest
的 AJAX 请求:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手写 AJAX</title>
</head>
<body>
<ul id="members"></ul>
<script>
const getJSON = function (url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState !== 4) return;
if (xhr.status === 200 || xhr.status === 304) {
resolve(xhr.responseText);
} else {
reject(new Error(xhr.statusText));
}
};
xhr.send();
});
};
getJSON('https://api.github.com/orgs/lemoncode/members')
.then(res => JSON.parse(res))
.then(data => {
document.getElementById('members').innerHTML = data.map(member => `
<li>
<img src="${member.avatar_url}" alt="${member.login}">
<span>${member.login}</span>
</li>
`).join('');
})
.catch(err => console.error('请求失败:', err));
</script>
</body>
</html>
📌代码解析
- 创建请求:通过
XMLHttpRequest
创建一个请求对象。 - 设置请求方法和 URL:使用
xhr.open()
方法定义请求的类型和目标 URL。 - 监听请求状态变化:通过
onreadystatechange
监听请求状态变化。 - 发送请求:调用
xhr.send()
发送请求。 - Promise 化:将异步操作封装成 Promise,简化代码逻辑。
XMLHttpRequest
的优势
- 兼容性强:适配旧版浏览器,是 AJAX 技术的早期实现。
- 精细控制:可以手动设置请求头、处理超时等,灵活性较高。
⚔️比较与总结
fetch
与 XMLHttpRequest
的对比
特性 | fetch | XMLHttpRequest |
---|---|---|
API 简洁性 | 简洁直观,基于 Promise | 较为繁琐,需手动处理状态 |
错误处理 | 不自动处理 HTTP 错误 | 可手动判断状态码 |
JSON 支持 | 内置支持 JSON 转换 | 需手动解析 |
兼容性 | 不支持 IE | 支持老旧浏览器 |
适用场景
- 使用
fetch
:现代浏览器和大部分应用场景。 - 使用
XMLHttpRequest
:需要精细控制或兼容性要求高的场景。
📖结语
🥱写到这里,后续会继续学习补充内容。升级太慢了,还差300分才到四级🤯
点点赞吧~😘