Ajax跨域模仿jQuery封装整合 

function ajax(obj) {
    var defaults = {
        type:'get',
        async:true,
        date:{},
        url:'#',
        dataType:'text',
        jsonp:'callback',
        success:function (data) {
            console.log(data);
        },
    }
    //使用for in循环进行属性覆盖
    for(var key in obj){
        defaults[key] = obj[key];
    }
    if (defaults.dataType == 'jsonp'){
        ajax4Jsonp(defaults,obj);
    }else {
        ajax4Json(defaults,obj);
    }
}
function ajax4Json(defaults,obj) {
    //1、创建xhrd对象
    var xhr =null;
    if (window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    //把对象形式的参数转化成字符串形式的参数
    var param ='';
    for(var attr in defaults,data){
        param += attr + '=' +defaults.data[attr]+'&';
    }
    if (param){
        param = param.substring(0,param.length -1);
    }
    //处理get参数并且处理中文乱码问题
    if (defaults.type == 'get'){
        defaults.url += '?' + encodeURI(param);
    }
    //2、准备发送（设置发送的参数）
    xhr.open(defaults.type,defaults.url,defaults.async);
    //处理post请求参数并设置请求头（必须设置）
    var data = null;
    if (defaults.type == 'post'){
        data =param;
        xhr.setRequestHeader("Content-Type","application/x-www-form-encoded");
    }
    //3、执行发送动作
    xhr.send(data);
    //处理同步请求：不会调用回调函数
    if (defaults.async){
        if (defaults.dataType == 'json'){
            return JSON.parse(xhr.responseText);
        }else {
            return xhr.responseText;
        }
    }
    //4、指定回调函数（处理服务器响应数据）
    xhr.onreadystatechange = function () {
            if (xhr.readyState == 4){
                if (xhr.status == 200){
                    var data = xhr.responseText;
                    if (defaults.dataType == 'json'){
                        data = JSON.parse(data);
                    }
                    defaults.success(data);
                }
            }
    }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/ajax3.js"></script>
    <script>
        ajax({
            type:'get',
            url:'http://localhost:9999/test5',
            dataType:'jsonp',
            success:function (data) {
                console.log(data);
            },
        })
    </script>
</head>
<body>
</body>
</html>


 



}
function ajax4Jsonp(defaults,obj) {
    var cbName  = 'jQuery' + ('1.11.1'+Math.random()).replace(/\D/g,"") +'_'+(new Date().getTime());
    if (defaults.jsonpCallback){
        cbName = jsonpCallback;
    }
    //这里是回调函数，调用方式：服务器响应内容来调用
    //向window对象中添加了一个方法，方法名称是cbName
    window[cbName] = function (data) {
        obj.success(data);
    }

    var script   = document.createElement('script');
    script.src = defaults.url +'?'+defaults.jsonp +'='+ cbName;
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(script);

}




 






            

            
posted @ 
2020-08-12 22:18 
喜之郎果冻 
阅读(120) 
评论(0) 
 
收藏 
举报