原生js ajax网络数据请求 XMLHttprequest、A

再学封装ajax请求

1. 原生JS，AJAX数据封装
2. 兼容性处理

脚本:

//处理url对象为字符串
function dealJsonUrl(jsonObj){
    var resultStr = '';
    if(Object.keys){
        var keysArr = Object.keys(jsonObj);
        for(var i=0; i<keysArr.length; i++){
            resultStr += (keysArr[i] +'='+ jsonObj[keysArr[i]] +'&');
        }
    }else{
        for(var attr in jsonObj){
            resultStr += (attr+'='+jsonObj[attr]+'&');
        }
    }
    resultStr = resultStr.slice(0,-1);
    return resultStr;
}

//get ajax
function getMes(options){
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    var _method = options.method || 'get';
    var _url = options.url || '';
    var _query = options.query || null;
    var _callbackFn = options.callbackFn || null;
    var _inJson = options.inJson || true;
    var isGetMethod = _method.toLocaleLowerCase()==='get'? true : false;
    
    if((typeof String.prototype.trim).toLowerCase()=='function'){
        _url = _url.trim();
    }else{
        _url = _url.replace(/^\s+|\s+$/g,"");
    }
    if(_url==""){ console.log('url不能为空'); return false; }
    
    //如果是get方式，且有参数存在
    var _queryStr = ""
    if(isGetMethod && query){
        _queryStr = dealJsonUrl(_query);
        _url = _url+'?'+_queryStr;
    };
    //如果是post方式,有参数存在
    if(!isGetMethod && _query){
        _queryStr = dealJsonUrl(_query);
    };
    
    xhr.open(_method,_url,true);
    if(isGetMethod){
        xhr.send();
    }else{
        /*POST请求的两种编码格式：
            application/x-www-form-urlencoded     
            是浏览器默认的编码格式，用于键值对参数，参数之间用&间隔；
            
            multipart/form-data                   
            用于文件等二进制，浏览器会把整个表单以控件为单位分割，并为每个部分加上Content-Disposition(form-data或者file),Content-Type(默认为text/plain),name(控件name)等信息，并加上分割符(boundary)
            
            application/json也经常使用
        */
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
        xhr.send(_queryStr); //渲染为类似 xhr.send("a=1&b=2");
    }
    xhr.onreadystatechange = function(){
        if(xhr.readyState===4){
            var resp = '';
            if(xhr.status===200){
                resp = _inJson ? JSON.parse(xhr.responseText) : xhr.responseText;
                _callbackFn && _callbackFn(resp,null);
            }else{
                resp = xhr.responseText;
                _callbackFn && _callbackFn(null,resp);
            }
        }
    }
}

请求操作：

var _oBtn = document.querySelector ? document.querySelector('#btn1') : document.getElementById('btn1');
_oBtn.onclick = function(){
    //send ajax
    getMes({
        "method":"post",
        "url":'./data1.js',
        "query":{"name":"zhangsan","age":14},
        "callbackFn": function(res,err){
            if(err){
                console.log(err);
            }else{
                console.log(res);
            }
        },
        "_inJson":true
    });
}