原生JS封装AJAX插件笔记

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

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

原文地址：http://blog.xuxiangbo.com/im-31.html

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

原生JS封装AJAX插件笔记

猜你喜欢