当前位置：首页 > news >正文

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

news 2024/10/31 14:46:44

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 请求，指定请求的 URLxhr.open("POST", "https://zx.nh2r.top/api/admin/login", true);// 设置请求头的 Content-Type 属性，以表明请求体数据格式为 JSONxhr.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>