AJAX 请求全面解析_Ajax_代码网手机版

一、什么是 ajax？

ajax（asynchronous javascript and xml）
中文：异步 javascript 和 xml

本质

在不刷新页面的情况下，与服务器进行数据交互

作用

局部更新页面（提升用户体验）
提高性能（减少整页刷新）
实现前后端分离

二、ajax 的核心特点

特点	说明
异步	请求不阻塞页面运行
局部刷新	只更新部分 dom
前后端通信	使用 http 请求
数据格式灵活	json（主流）、xml、text

三、ajax 工作原理

流程：

用户触发事件（点击按钮等）
javascript 创建请求
发送 http 请求到服务器
服务器返回数据
js 接收数据并更新页面

简化理解：

浏览器(js)  ←→  服务器(api)

四、ajax 实现方式（重点）

原生 xmlhttprequest（了解）

var xhr = new xmlhttprequest();
xhr.open("get", "/api/user", true);
xhr.onreadystatechange = function () {
    if (xhr.readystate === 4 && xhr.status === 200) {
        console.log(xhr.responsetext);
    }
};
xhr.send();

readystate 状态

值	含义
0	未初始化
1	已建立连接
2	已发送请求
3	接收中
4	完成

fetch（主流）

fetch("/api/user")
  .then(res => res.json())
  .then(data => {
      console.log(data);
  })
  .catch(err => {
      console.error(err);
  });

优点

语法简洁
基于 promise
更现代

async / await（推荐）

async function getuser() {
    try {
        const res = await fetch("/api/user");
        const data = await res.json();
        console.log(data);
    } catch (err) {
        console.error(err);
    }
}

最接近同步写法，面试加分项

五、常见请求方式（http）

方法	用途
get	获取数据
post	提交数据
put	更新数据
delete	删除数据

六、发送 post 请求示例

fetch("/api/login", {
    method: "post",
    headers: {
        "content-type": "application/json"
    },
    body: json.stringify({
        username: "admin",
        password: "123456"
    })
})
.then(res => res.json())
.then(data => console.log(data));

七、ajax 常见数据格式

json（最重要）

{
  "username": "admin",
  "age": 20
}

js 转换：

json.parse()   // 字符串 → 对象
json.stringify() // 对象 → 字符串

八、ajax 优缺点

优点

用户体验好（不卡顿）
减少服务器压力
支持动态页面

缺点

seo 不友好
依赖 js
存在跨域问题

九、跨域问题（重点）

什么是跨域

浏览器限制不同源之间的请求

不同源指：

协议不同（http / https）
域名不同
端口不同

解决方案

cors（最常用）

服务器返回：

access-control-allow-origin: *

jsonp（已过时）

只支持 get

代理服务器（开发常用）

十、ajax 在项目中的应用

结合你现在做的用户管理系统，ajax可以用在：

示例

1. 登录

fetch("/api/login", { method: "post" })

2. 获取用户列表

fetch("/api/users")

3. 删除用户

fetch("/api/user/1", {
    method: "delete"
})

4. 修改用户信息

fetch("/api/user/1", {
    method: "put"
})

十一、ajax 面试常问问题

ajax 和 fetch 区别

ajax 是概念
fetch 是实现方式

ajax 是同步还是异步？

默认异步（可以同步但不推荐）

为什么推荐 async/await？

可读性强
避免回调地狱

ajax 和 axios 区别？

axios 是库（封装更强）
fetch 是原生 api

十二、总结（核心记忆）

一句话理解：

ajax = 用 js 在后台偷偷请求数据，不刷新页面更新内容

到此这篇关于ajax 请求理解的文章就介绍到这了,更多相关ajax 请求内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！

AJAX 请求全面解析