Ajax
Ajax 概述
它是浏览器提供的一套方法, 可以实现页面无刷新更新数据, 提供用户浏览网站应用的体验
Ajax 请求步骤
// 创建请求对象
var xhr = new XMLHttpRequest()
// 定义发送方式,发送地址
xhr.open('get', 'http://localhost:3000/first')
// 发送请求
xhr.send()
// 接收请求
xhr.onload = function () {
// xhr.responseText 获取文本
console.log(xhr.responseText)
}
请求参数传递
get 请求
xhr.open('get', 'http://localhost:3000/get?username=zs&age=23')
post 请求
// 表单传输
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send('username=zs&age=23')
// json 传输
xhr.setRequestHeader('Content-Type', 'application/json;charset=utf8')
xhr.send(JSON.stringify({username: 'zs', age: 23})) // 必须传递对象格式的字符串
Ajax 状态码
在创建 ajax 对象, 配置 ajax 对象 , 发送请求 以及接收完服务端响应数据, 这个过程中每一个步骤会对应一个数值, 这个数值就是ajax状态码
0 :请求未初始化(还没有调用 open 方法)
1 :请求已经建立,但是还没有发送(还没有调用 send 方法)
2 : 请求已经发送
3 : 请求正在处理中,通常响应中已经有部分数据可以用了
4 :响应已经完成,可以获取并使用服务器的响应了
xhr.readyState // 获取 ajax 状态码
// 由于响应再获取阶段的不固定性,xhr.readyState 不能准确的获取到当前的状态码 // onreadystatechange 当 readyState 改变时触发 要在 send 前面开始监听 xhr.onreadystatechange = function () { console.log(xhr.readyState) } xhr.send()
onload
和 onreadystatechange
区别
onload
:不兼容IE低版本浏览器,不要判断 ajax 状态码, 只被调用一次 推荐
onreadystatechange
:兼容IE低版本浏览器 ,需要判断ajax状态码,被调用多次
Ajax 错误处理
判断 http 状态码进行处理
xhr.status
var xhr = new XMLHttpRequest() xhr.open('get', 'http://localhost:3000') xhr.send() xhr.onload = function () { if (xhr.status == 200) { // 处理代码 } }
- 网络中断,请求无法发送到服务端
- 不会触发
onload
事件,会触发xhr对象下面的onerror
事件,在onerror
事件处理函数中对错误进行处理xhr.onerror = function () { console.log('网络连接中断...') }
低版本IE浏览器的缓存问题
在低版本的IE浏览器中, Ajax请求有严重的缓存问题;即在请求地址不发生改变的情况下,只有第一次请求会真正发送到服务端,后续的请求都会从浏览器的缓存中获取结果,即使服务端的数据更新了,客户端依然拿到的缓存中旧数据;
解决方案:在请求地址的后面加请求参数,保证每一次请求中的请求参数的值不相同
Ajax 封装
// 封装
function ajax(options) {
// 设置默认选项
var defaults = {
type: 'get',
url: '',
data: {},
header: {
'Content-type': 'application/x-www-form-urlencoded'
},
success: function () {},
error: function () {}
}
Object.assign(defaults, defaults)
var xhr = new XMLHttpRequest()
// 表单传输 参数处理
var params = ''
for (var attr in defaults.data) {
params += attr + '=' + defaults.data[attr] + '&'
}
params = params.substr(0, params.length - 1)
// 判断请求方式
if (defaults.type == 'get') {
xhr.open(defaults.type, defaults.url + '?' + params)
xhr.send()
}
// 判断 post 请求头
if (defaults.type == 'post') {
xhr.open(defaults.type, defaults.url)
xhr.setRequestHeader('Content-Type', defaults.header['Content-Type'])
if (defaults.header['Content-Type'] == 'application/json;charset=utf8') {
xhr.send(JSON.stringify(defaults.data))
} else if (defaults.header['Content-Type'] == 'application/x-www-form-urlencoded') {
xhr.send(params)
}
}
// 请求成功回调函数
xhr.onload = function () {
// 获取服务端请求头
var resHeader = xhr.getResponseHeader('Content-Type')
var resText = xhr.responseText
// 前端获取的数据默认是文本类型, 需要手动处理
if (resHeader.includes('application/json')) {
resText = JSON.parse(resText)
}
// 指定不同情况下的回调函数
if (xhr.status == 200) {
defaults.success(resText, xhr)
} else {
defaults.error(resText, xhr)
}
}
}
// 调用
jax({
type: 'post',
url: 'http://localhost:3000/post',
header: {
'Content-Type': 'application/json;charset=utf8'
},
data: {
username: 'zs',
age: 23
},
success: function (data, xhr) {
console.log(data)
console.log(xhr)
},
error: function (data, xhr) {
console.log(data, xhr)
}
})