一、了解 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 – 允许客户端查看服务端性能
3-1. GET 和 POST 的区别
语义化不一样
GET 倾向于从服务器获取数据
POST 倾向于向服务器提交数据
传递参数的方式
GET 请求直接在地址栏后面拼接
POST 请求在请求体里面传递
参数的大小限制
GET 请求一般不大于 2KB
POST 请求理论上没有上限
缓存能力
GET 会被浏览器主动缓存
POST 不会被浏览器主动缓存
安全性能
GET 请求相对安全性比较低
POST 请求相对安全性比较高