徐向博 / Imin.

原生JS封装AJAX插件
作者:Imin 时间:2018-05-16 分类: 前端

作为一只前端小白,封装一直是让我最头疼的问题。

最近在看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) //后台返回的数据
    }
})

插件下载地址:lib.xuxiangbo.com/js/plug/imRequest.js

本文标签: 封装插件

广安养老院这篇文章写得很好 2018-05-21 08:38
武胜文章很好值得一看 2018-05-21 08:36