ajax的封装
前言
每一次发送请求我们都需要重复创建实例，配置请求 发送请求 获取数据，为了能够使用更加方便，我们对于ajax请求的步骤进行封装
同步的ajax请求
- 同步封装ajax请求可以通过返回值的方式返回后端的数据
- 请求参数
- type 请求方式
- url 请求路径
- data 发送的数据
- 返回值
- 需要将后端的数据返回
js
function ajax(type, url, data){
const xhr = new XMLHttpRequest
if(type === 'get'){
// get请求参数拼接在地址栏后面
xhr.open(type, url+data, false)
xhr.send()
}else{
// post请求参数放在send函数里面
xhr.open(type, url, false)
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 去除前面的?
xhr.send(data.slice(1))
}
return xhr.responseText
}
// 调用
let res = ajax('get', 'http://localhost:8888/test/third', '?name=jack&age=18')
console.log(res)
let res2 = ajax('post', 'http://localhost:8888/test/fourth', '?name=jack&age=18')
console.log(res2)异步的ajax请求
- 异步封装ajax请求无法通过返回值的方式返回后端的数据，需要借助回调函数的方式返回后端的数据
- 请求参数
- type 请求方式
- url 请求路径
- data 发送的数据
- success 请求成功之后执行的回调函数
- 返回值
- 无返回值
js
function ajax(type, url, data, success){
const xhr = new XMLHttpRequest
if(type === 'get'){
// get请求参数拼接在地址栏后面
xhr.open(type, url+data, true)
xhr.send()
}else{
// post请求参数放在send函数里面
xhr.open(type, url, true)
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 去除前面的?
xhr.send(data.slice(1))
}
xhr.onload = function(){
// 调用回调函数返回后端的数据
success(xhr.responseText)
}
}
// 调用
ajax('get', 'http://localhost:8888/test/third', '?name=jack&age=18', function(res){
console.log(res)
})
ajax('post', 'http://localhost:8888/test/fourth', '?name=jack&age=18', function(res){
console.log(res)
})请求的参数支持对象
- 参数为字符串会容易导致出错，传一个对象不会容易出错
js
function ajax(type, url, data, success){
const xhr = new XMLHttpRequest
if(Object.prototype.toString.call(data) === '[object Object]'){
let str = '?'
for(let key in data){
str += `${key}=${data[key]}&`
}
data = str.slice(0,-1)
}
if(type === 'get'){
// get请求参数拼接在地址栏后面
xhr.open(type, url+data, true)
xhr.send()
}else{
// post请求参数放在send函数里面
xhr.open(type, url, true)
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 去除前面的?
xhr.send(data.slice(1))
}
xhr.onload = function(){
// 调用回调函数返回后端的数据
success(xhr.responseText)
}
}
// 调用
ajax('get', 'http://localhost:8888/test/third', '?name=jack&age=18', function(res){
console.log(res)
})
ajax('post', 'http://localhost:8888/test/fourth', '?name=jack&age=18', function(res){
console.log(res)
})
// 调用
ajax('get', 'http://localhost:8888/test/third', {
name: 'jack',
age: 18
}, function(res){
console.log(res)
})
ajax('post', 'http://localhost:8888/test/fourth', {
name: 'jack',
age: 18
}, function(res){
console.log(res)
})
可省略参数
- 参数由4个变成一个对象
js
function ajax(params){
const defaultParams = {
type: 'get',
url: '',
data: {},
success: function(){
}
}
// 合并默认配置
const options = {...defaultParams,...params}
const xhr = new XMLHttpRequest
if(Object.prototype.toString.call(options.data) === '[object Object]'){
let str = '?'
for(let key in options.data){
str += `${key}=${options.data[key]}&`
}
options.data = str.slice(0,-1)
}
if(options.type === 'get'){
// get请求参数拼接在地址栏后面
xhr.open(options.type, options.url+options.data, true)
xhr.send()
}else{
// post请求参数放在send函数里面
xhr.open(options.type, options.url, true)
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 去除前面的?
xhr.send(options.data.slice(1))
}
xhr.onload = function(){
// 调用回调函数返回后端的数据
options.success(xhr.responseText)
}
}
// 调用
ajax({
type: 'get',
url: 'http://localhost:8888/test/third',
data: {
name: 'jack',
age: 18
},
success: function(res){
console.log(res)
}
})
ajax({
url: 'http://localhost:8888/test/third',
data: {
name: 'jack',
age: 18
},
success: function(res){
console.log(res)
}
})
ajax({
url: 'http://localhost:8888/test/second',
success: function(res){
console.log(res)
}
})