版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_34518793/article/details/81339018
作为一只前端小白,封装一直是让我最头疼的问题。
最近在看VUE,需要配合ajax获取数据,所以顺便看一下代码封装,简单做一下笔记,把代码贴出来,以供大家共同学习交流,也方便自己日后查阅。
首先创建一个函数对象,参数options为对象:
const imRequest = (options = {}) =>{
}
参数options的属性有:传输类型 type、返回数据类型 dataType、是否异步 async、data(POST模式下要发送的数据)
options.type = (options.type || "GET").toUpperCase();
options.dataType = options.dataType || 'json';
options.async = options.async || true;
处理POST下的数据:
//处理POST参数
this.getParams = (data) =>{
var arr = [];
for (var param in data){
arr.push(encodeURIComponent(param) + '=' + encodeURIComponent(data[param]));
}
arr.push(('imId=' + Math.random()).replace('.',''));
return arr.join('&');
}
功能,当然是发送ajax请求,并且接收返回值,在回调函数 success 里处理数据:
//创建ajax请求
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//设置传输模式
if(options.type == "GET"){
xhr.open("GET", options.url + "?" + params, options.async);
xhr.send(null);
}else if(options.type == "POST"){
xhr.open("POST", options.url, options.async);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.send(params);
}
//监听ajax状态
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
var status = xhr.status;
if (status >= 200 && status < 300 ){
if(options.dataType == 'json'){
//如果设置返回值类型为json,输出json格式,不设置默认也是json格式
options.success && options.success(JSON.parse(xhr.responseText));
}else{
//如果没有设置返回值类型为json,输出text格式
options.success && options.success(xhr.responseText);
}
}else{
options.fail && options.fail(status);
}
}
}
调用方法:
imRequest({
url:'',
type: '',
dataType: "",
data: {},
success: function(res){
console.log(res) //后台返回的数据
}
})