原生Javascript封装ajax

2017-12-31

ajax对于前端来说并不陌生，在与后端进行交互的时候基本上都会用到。平时在使用的时候，大多数的前端er会采用jquery或者其它框架已经封装好的ajax请求，直接调用，但是如果在简单项目中，只需用到ajax，这样引入jquery显得有些过重，所以用原生JS封装好ajax函数直接调用，会方便许多。

用原生JS封装ajax并不是很困难，只要清楚其中每一步的原理和操作，就能轻松写出来。（这里只做出简要的说明，并没有写出完整的逻辑判断）

opt为ajax传递的参数，其值有以下几个：
    1、* @param {string}opt.type http连接的方式，包括POST和GET两种方式
    2、* @param {string}opt.url 发送请求的url
    3、* @param {boolean}opt.async 是否为异步请求，true为异步，false为同步
    4、* @param {object}opt.data 发送的参数，格式为对象类型
    5、* @param {function}opt.success ajax发送并接收成功调用的回调函数
     
function ajax(opt){

    //对所传参数进行判断
    opt = opt || {};
    opt.method = opt.method.toUpperCase() || 'POST';
    opt.url = opt.url || '';
    if(typeof(opt.async) == 'undefined'){
        opt.async = true;
    }
    opt.data = opt.data || null;

    //创建ajax对象
    var xmlHttp = null;
    if(XMLHttpRequest){
        xmlHttp = new XMLHttpRquest();
    }else{
        //兼容ie6
        xmlHttp = new ActiveXObject('Microsoft.XMLHttp');
    }

    //对传递的data参数进行格式化
    var params = [];
    for(var key in opt.data){
        params.push(key + '=' + opt.data[key]);
    }
    var postData = params.join('&');

    //判断请求方式，连接服务器，发送请求方式、链接、是否异步、参数
    if(opt.method === 'POST'){
        xmlHttp.open(opt.method, opt.url, opt.async);
        xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
        xmlHttp.send(postData);
    }else if(opt.method === 'GET'){
        xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
        xmlHttp.send(null);
    }

    //判断是否请求成功，如果成功，接收返回值
    xmlHttp.onreadyStateChange = function(){
        if(xmlHttp.readystate == 4 && xmlHttp.status == 200){
            var response = JSON.parse(responseText);
            success(response);
        }
    }
}

这样引入这个JS库，并在页面中调用封装好的ajax，并传递相应的参数，就可以像应用jquery的ajax方法一样与后台进行交互了。

在去面试的时候，很多面试官会要求手写ajax，只要理清思路，一步接一步下来，很轻松就能写出。