什么是ajax，为什么使用ajax？ajax都有哪些优点和缺点？
ajax 的全称 Asynchronous JavaScript and XML (异步 JavaScript 和 XML)。
ajax 是一种创建交互式网页应用的网页开发技术。其中最核心的依赖是浏览器提供的XMLHttpRequest 对象，是这个对象使得浏览器可以发出 HTTP 请求与接收 HTTP 响应。实现了在页面不刷新的情况下和服务器进行交互。
| 方法 | 描述 |
| new XMLHttpRequest() | 生成一个 XMLHttpRequest 对象 |
| open(‘请求类型’ , ’URL’ , ’请求方式’) | 1.请求类型：get、post 2.请求地址：服务器（文件）位置 3.请求方式：true 为异步，false 为同步 |
| send() | 发送请求 |
| onreadystatechange | 该方法可以定义响应执行函数，当 readyState 属性发生变化时会自动调用该方法。 |
| readyState | 交互流程，有 5 个阶段 0.请求初始化 1.服务器链接已建立 2.请求已接收 3.正在处理请求 4.请求已完成且响应已就绪 |
| status | HTTP 响应状态码 200 ：OK（请求成功） 403 ：Forbidden（禁止） 404 ：Page not found（未找到 |
| responseText | 响应文本（返回的数据） |
| setRequestHeader(‘头部名称’ , ‘头部值’) | 请求头，向请求添加 HTTP 头部 |
ajax 使用方法：
1. 创建 XMLHttpRequest 对象
2. 使用 open 方法指定要请求的地址、类型和方式。
3. 使用 send 方法发送请求，如果需要传参：
get 方式要将参数拼接到 URL 后边，参数间&分割。例：’index.php?name=张三&age=18’ post 方式可以将参数放到 send()里。例：send(‘name=张三&age=18’)
4. 绑定 onreadystatechange 事件，判断 readyState 和 status 的状态。
5. 接收数据，通过 json 转换使用。
get请求方式
// 创建一个新的 XMLHttpRequest 对象
let xhr = new XMLHttpRequest();
// 初始化一个 GET 请求，指向 js/index.json 文件
xhr.open('get', 'js/index.json', true);
// 发送请求
xhr.send();
// 监听请求状态变化
xhr.onreadystatechange = function() {
// 检查请求是否完成（readyState 为 4）并且状态码为 200（成功）
if (xhr.readyState == 4 && xhr.status == 200) {
// 获取响应文本
let text = xhr.responseText;
console.log(text); // 在控制台输出响应文本
// 解析 JSON 格式的响应文本
let data = JSON.parse(text);
console.log(data); // 在控制台输出解析后的数据对象
}
};
POST请求方式
<script>
//创建一个包含电话号码和密码的对象
let obj = {
phone_number: "15836028325",
password: "111111"
};
// 创建 XMLHttpRequest 对象
let xhr = new XMLHttpRequest();
// 初始化一个 POST 请求，指定请求的 URL
xhr.open("POST", "https://zx.nh2r.top/api/admin/login", true);
// 设置请求头的 Content-Type 属性，以表明请求体数据格式为 JSON
xhr.setRequestHeader('Content-Type', 'application/json');
//发送请求，同时将对象转换为 JSON 字符串以发送给服务器
xhr.send(JSON.stringify(obj));
// 监听 onreadystatechange 事件，以处理服务器的响应
xhr.onreadystatechange = function() {
// 检查请求是否完成（readyState 为 4）并且状态码为 200（成功）
if (xhr.readyState === 4 && xhr.status === 200) {
//解析服务器返回的 JSON 响应并输出到控制台
console.log(JSON.parse(xhr.response));
}
};
</script>
为什么使用 AJAX？
-
提升用户体验：
- 用户不需要等待整个页面加载，操作更流畅。
- 可以实时更新页面内容，例如表单提交、内容加载等。
-
减少服务器负担：
- 只请求必要的数据，避免不必要的页面重载，降低服务器的处理负担。
-
增强交互性：
- 允许开发者创建更为动态和互动的用户界面，例如实时搜索建议、数据图表更新等。
-
提高性能：
- 减少数据传输量，仅发送和接收所需的信息，提高加载速度。
AJAX 的优点
-
异步处理：
- 用户在发起请求后，可以继续与页面互动，而不必等待响应。
-
局部更新：
- 只更新页面的某一部分，而不是整个页面，减少了页面重绘的成本。
-
灵活性：
- 可以与多种格式的数据（如 JSON、XML、HTML、文本等）进行交互，支持多种数据处理方式。
-
改善响应时间：
- 通过发送较小的数据包而非完整页面，响应时间通常更快。
-
更好的带宽利用：
- 减少数据传输量，提高带宽利用率。
AJAX 的缺点
-
复杂性：
- 增加了代码复杂度，调试和维护可能更加困难。
-
浏览器兼容性：
- 早期的浏览器对 AJAX 的支持不一，可能需要额外的代码来确保兼容性。
-
SEO问题：
- AJAX 动态加载的内容可能不被搜索引擎索引，影响搜索引擎优化（SEO）。
-
依赖 JavaScript：
- 如果用户禁用 JavaScript，AJAX 功能将无法使用，影响网站可用性。
-
安全性问题：
- AJAX 请求可能面临跨站请求伪造（CSRF）和跨站脚本（XSS）攻击的风险，需采取适当的安全措施。
总结
AJAX 是一种强大且灵活的技术，适用于提高网页的交互性和用户体验。在使用 AJAX 时，开发者需权衡其优缺点，考虑项目的具体需求和目标。通过合理地设计和实现，可以最大程度地发挥 AJAX 的优势。
原文地址：https://blog.csdn.net/BANaanaa/article/details/143233202
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！