一、什么是ajax？
它是JS 语言 和 服务端 交互的手段，全称为Asynchronous JavaScript and XML。
二、ajax有哪些特点？
1、不需要插件的支持，原生 js 就可以使用；
2、用户体验好（不需要刷新页面就可以更新数据） ；
3、减轻服务端和带宽的负担 ；
4、缺点： 搜索引擎的支持度不够，因为数据都不在页面上，搜索引擎搜索不到 ；
5、前进、后退的功能被破坏（因为 Ajax 永远在当前页，不会记录前后页面）。
三、如何开启ajax请求？
1、发送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)
}
2、状态码和请求方式
2.1 ajax状态码
0 => 创建 ajax 对象成功
1 => 配置请求信息成功
2 => 响应已经回到浏览器
3 => 浏览器正在解析响应体
4 => 响应体解析完毕可以使用了2.2 HTTP响应状态码
在一个 HTTP 请求的响应报文中的状态行会有一个响应状态码
100 ~ 199
表示连接继续
200 ~ 299
各种成功
300 ~ 399
重定向
400 ~ 499
客户端错误
500 ~ 599
服务端错误
下面是这些响应状态码的具体说明：
100 ~ 199 一般我们看不到，因为表示请求继续 ；
100： 继续请求，前面的一部分内容服务端已经接受到了，正在等待后续内容 ；
101： 请求者已经准备切换协议，服务器页表示同意；
200 ~ 299 2 开头的都是表示成功，本次请求成功了，只不过不一样的状态码有不一样的含义（语义化） ；
200： 标准请求成功（一般表示服务端提供的是网页） ；
201： 创建成功（一般是注册的时候，表示新用户信息已经添加到数据库） ；
203： 表示服务器已经成功处理了请求，但是返回的信息可能来自另一源 ；
204： 服务端已经成功处理了请求，但是没有任何数据返回；
300 ~ 399 3 开头也是成功的一种，但是一般表示重定向 ；
301： 永久重定向 ；
302： 临时重定向 ；
304： 使用的是缓存的数据 ；
305： 使用代理；
400 ~ 499 4 开头表示客户端出现错误了 ；
400： 请求的语法服务端不认识 ；
401： 未授权（你要登录的网站需要授权登录） ；
403： 服务器拒绝了你的请求 ；
404： 服务器找不到你请求的 URL ；
407： 你的代理没有授权 ；
408： 请求超时 ；
410： 你请求的数据已经被服务端永久删除；
500 ~ 599 5 开头的表示服务端出现了错误 ；
500： 服务器内部错误 ；
503： 服务器当前不可用（过载或者维护） ；
505： 请求的协议服务器不支持；
常见的HTTP请求方式
3、常见的HTTP请求方式
GET – 向服务器获取 ；
POST – 向服务器传递 ；
PUT – 向服务器传递，并让服务器添加 ；
DELETE – 让服务器删除；
HEAD – 只是用于获取响应头 ；
PACTH – 和 PUT 类似， 只不过更倾向于更新局部数据 ；
CONNECT – 预留方式， 管道连接更改为代理连接使用 ；
OPTIONS – 允许客户端查看服务端性能；
3.1.GET 和 POST 的区别：
3.1.1 语义化不一样
GET 倾向于从服务器获取数据
POST 倾向于向服务器提交数据
3.1.2 传递参数的方式
GET 请求直接在地址栏后面拼接
POST 请求在请求体里面传递
3.1.3 参数的大小限制
GET 请求一般不大于 2KB
POST 请求理论上没有上限
3.1.4 缓存能力
GET 会被浏览器主动缓存
POST 不会被浏览器主动缓存
3.1.5 安全性能
GET 请求相对安全性比较低
POST 请求相对安全性比较高
四、Ajax 的兼容处理
4.1 创建 ajax对象 的兼容
// 标准浏览器
let xhr = new XMLHttpRequest()
// IE 低版本
let xhr = new ActiveXObject(‘Microsoft.XMLHTTP’)
4.2 接受响应的兼容
// 标准浏览器
xhr.onload = function () {
console.log(xhr.responseText)
}
// IE 低版本
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText)
}
}
