一、什么是Ajax
Ajax即“Asynchronous Javascript And XML”(异步JavaScript 和XML),是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某某些数据进行更新。而不使用Ajax的页面如果需要更新内容,则必须重载整个网页页面。
二、Ajax的使用
//创建一个Ajax对象
var xhr = new XMLHttpRequest();
//配置请求信息
xhr.open( "GET" , "./01_data.php" , true );
接下来就是信息的发送,使用send()方法来完成的。
//发送请求
xhr.send();
一个最基本的Ajax请求就是以上三个步骤,但是只有以上三个步骤我们是拿不到服务器返回给我们的响应。如果想要拿到响应,必须满足两个条件:本次HTTP请求是成功的,也就是HTTP的状态码为200-299之间HTTP状态码为xhr.status;另外,Ajax也有自己的状态码用来表示本次请求中的各个阶段。Ajax状态码为readyState
在 Ajax 对象中有一个事件,叫做readyStateChang事件,这个事件是专门用来监听Ajax对象readyState值改变的的行,也就是说只要readyStat的值发生变化了,那么就会触发该事件,所以我们就在这个事件中来监听Ajax的 readyState是不是到4了。
Ajax中还有一个response,就是用来记录服务端给我们的响应体内容的
xhr.onreadyStateChange = function () {
// 每次 readyState 改变的时候都会触发该事件
// 我们就在这里判断 readyState 的值是不是到 4
// 并且 http 的状态码是不是 200 ~ 299
if (xhr.readyState === 4 && /^2\d{2|$/.test(xhr.status)) {
//如果请求成功,我们就可以获取服务端给我们响应的内容了
// 我们在这里直接打印 xhr.responseText 来查看服务端给我们返回的内容
console.log(xhr.responseText)
}
}
三、Ajax的封装
接下来我们就来封装一个Ajax函数以方便我们的使用
let axios = (function () {
let BaseUrl = 'http://localhost:8888/api'
function ajax_get({ url, query }) {
return new Promise((resolve, reject) => {
if (!url) {
return alert('你没有传递url')
}
let str = ''
if (query) {
str = '?'
for (let key in query) {
str += `${key}=${query[key]}&`
}
str = str.slice(0, -1)
}
let xhr = new XMLHttpRequest()
xhr.open('get', query ? BaseUrl+url + str : BaseUrl+url)
// 设置请求头 携带token
xhr.setRequestHeader('authorization',cookie.getItem('token') || null)
xhr.send()
xhr.onreadystatechange = () => {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
resolve(JSON.parse(xhr.response))
} else {
reject(JSON.parse(xhr.response))
}
}
}
})
}
function ajax_post({ url, query }) {
return new Promise((resolve, reject) => {
if (!url) {
return alert('你没有传递地址')
}
let xhr = new XMLHttpRequest()
xhr.open('post', BaseUrl+url)
xhr.setRequestHeader('authorization',cookie.getItem('token') || null)
// xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
xhr.setRequestHeader('content-type','application/json')
xhr.send(query ?JSON.stringify(query) : null)
xhr.onreadystatechange = () => {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
resolve(JSON.parse(xhr.response))
} else {
reject(JSON.parse(xhr.response))
}
}
}
})
}
function ajax_put({ url, query }) {
return new Promise((resolve, reject) => {
if (!url) {
return alert('你没有传递地址')
}
let xhr = new XMLHttpRequest()
xhr.open('put', BaseUrl+url)
xhr.setRequestHeader('authorization',cookie.getItem('token') || null)
// xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
xhr.setRequestHeader('content-type','application/json')
xhr.send(query ?JSON.stringify(query) : null)
xhr.onreadystatechange = () => {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
resolve(JSON.parse(xhr.response))
} else {
reject(JSON.parse(xhr.response))
}
}
}
})
}
function ajax_upload({ url, query }) {
return new Promise((resolve, reject) => {
if (!url) {
return alert('你没有传递地址')
}
let xhr = new XMLHttpRequest()
xhr.open('post', BaseUrl+url)
xhr.setRequestHeader('authorization',cookie.getItem('token') || null)
xhr.send(query)
xhr.onreadystatechange = () => {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
resolve(JSON.parse(xhr.response))
} else {
reject(JSON.parse(xhr.response))
}
}
}
})
}
let options = {
get: ajax_get,
post: ajax_post,
put:ajax_put,
upload:ajax_upload
}
return options
})()