什么是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 的优势。

秒客网

什么是ajax，为什么使用ajax？ajax都有哪些优点和缺点？

为什么使用 AJAX？

AJAX 的优点

AJAX 的缺点

总结

相关文章