轻松了解ajax

最新推荐文章于 2025-12-05 11:24:16 发布

原创最新推荐文章于 2025-12-05 11:24:16 发布 · 177 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #javascript

一、了解 Ajax

什么是 ajax ？

ajax是前后端交互的重要手段

全称：Asynchronous JavaScript and XML
是一些技术的组合体
a：异步
j：js
a：and
x：数据

ajax 的特点

1、不需要插件的支持，原生 js 就可以使用

2、用户体验好（不需要刷新页面就可以更新数据）

3、减轻服务端和带宽的负担

4、缺点：搜索引擎的支持度不够，因为数据都不在页面上，搜索引擎搜索不到
破坏了浏览器自身的前进、后退的功能（因为 Ajax 永远在当前页，不会记录前后页面）

二、开启 Ajax 请求

发送 Ajax 请求

// 1. 创建 ajax 对象
let xhr = new XMLHttpRequest()
// 2. 配置请求信息
xhr.open(‘GET’, ‘./test.php’, true)
// 3. 发送请求
xhr.send()
// 4. 接受响应
xhr.onload = function () {
  console.log(xhr.responseText)
}

三、状态码和请求方式

1. Ajax的状态码

0 => 创建 ajax 对象成功
1 => 配置请求信息成功
2 => 响应已经回到浏览器
3 => 浏览器正在解析响应体
4 => 响应体解析完毕可以使用了

2. HTTP的响应状态码

在一个 HTTP 请求的响应报文中的状态行会有一个响应状态码（五种）
100 ~ 199
表示连接继续，正在连接
200 ~ 299
各种成功
300 ~ 399
重定向，服务器地址改了
400 ~ 499
客户端错误，请求失败
500 ~ 599
服务端错误，不用管了，后台的事，啊哈哈哈

最常见的有

200：标准请求成功（一般表示服务端提供的是网页）
404：服务器找不到你请求的 URL

3. 常见的HTTP请求方式

GET – 向服务器获取
POST – 向服务器传递
PUT – 向服务器传递，并让服务器添加
DELETE – 让服务器删除
HEAD – 只是用于获取响应头
PACTH – 和 PUT 类似，只不过更倾向于更新局部数据
CONNECT – 预留方式，管道连接更改为代理连接使用
OPTIONS – 允许客户端查看服务端性能