ajax对数据进行封装,ajax封装

ajax是什么

ajax是在不用刷新页面的情况下，通过js中的XMLHttpRequest对象，从服务器获取数据，对网页内容进行更新的技术。

封装方法

function ajax(params){

申明一些必要的参数，比如成功后的回调函数、错误处理、url、data、type(http method)，并且作兜底处理

const{

success = () => {},

error = () => {},

type = 'get',

data = {},

url = '/'

} = params;

过程

创建异步请求对象

const xhr = new XMLHttpRequest()

注册xhr发送接收请求时的回调，并且在服务器返回结果后，调用success或者error函数

xhr.onreadystatechange=function(){

if(xhr.readyState===4){

if(xhr.state===200){

success(JSON.parse(xhr.responseText))

}else{

error(xhr.state,xhr.responseText)

}

}

}

let sendParams = '';

Object.keys(data).map((key) => {//Object.keys(对象)，得到一个由对象里的属性名组成的数组

sendParams += `${key}=${data[key]}&`

});

判断type

如果是get， 参数就挂在url上，(url?sendParams),send空

如果是其他type， 参数就放在send中传递，send(sendParams)，但需要在open和send之间先设置请求头信息

if(type==='get'){

xhr.open(type,`${url}?${sendParams}`,true)

xhr.send()

}else{

xhr.open(type,url,true)

xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

xhr.send(sendParams);

}

}

调用实例

ajax({

url: '/code/1',

type: 'POST',

data: {

id: 'id',

name: 'name'

},

success(result) {

// do something

},

error(error1, error2) {

// do something

}

})