ajax与jsonp封装

自己封装了下跨域的jsonp请求和t同源请求ajax

$ = {
    ajax : function(options){
        var xhr = null,
            url = options.url || null,
            method = options.method || 'GET',
            sync = options.sync || 'true',
            data = options.data || null,
            index = url.indexOf('?'),
            callback = options.success;
        if(!url){
            console.log("url为空");
        }
        // 若为POST请求方式,则把地址中的参数存储到参数data中
        if(method === "POST"){
            if( index!= -1){
                var str = url.substr(index+1)
                var str = str.split(/[=|,]/)
                for(var i=0;i<str.length;i++){
                    data[str[i]]=str[i+1];
                    i++
                }                  
            }
        }
        //GET请求中,需要将参数data加入到url地址中
        if(data){
            if(index == -1){
                url += '?';
                for(var i in data){
                    url += i + '=' + data[i] +'&'
                }
                url = url.replace(/[&]$/,'')
            }else{
                for(var i in data){
                    url += i + '=' + data[i] +'&'
                }
                url = url.replace(/[&]$/,'') 
            }
            data= null
        }
        // 定义创建XMLHttpRequest对象函数
        function createXHR(){
            if(typeof(XMLHttpRequest) != 'undefined'){
                return new XMLHttpRequest()
            }else if(typeof(ActiveXObject) !='undefined'){
                var xhrArr = ['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0'];
                for(var i=0;i<xhrArr.length;i++){
                    try{
                        xhr = new ActiveXObject(xhrArr[i]);
                        break;
                    }catch(err){}
                    return xhr;
                }
            }else{
                throw new Error('No XHR object available!')
            }
        }
        // 创建xhr对象
        xhr = createXHR()
        // 创建请求
        console.log(method);
        xhr.open(method,url,sync)
        // 发送请求
        console.log(data);
        xhr.send(data);
        // 设置http请求头部信息
        // xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        // 注册请求
        xhr.onreadystatechange=function(){
            /*
            readyState:
            0 代表请求未初始化
            1 代表服务已连接
            2 请求已接收
            3 请求处理中
            4 请求已完成,且响应就绪
            status:
            200 ok
            404 未找到页面
            */
            if(xhr.readyState ==4 && xhr.status == 200){
                // if(typeof(xhr.responseText) == 'json')
                var res = xhr.responseText 
                return callback&&callback(JSON.parse(res))
            }
        }        
    },
    jsonp : function(options){
        var url= options.url,
            callback = success;
        if(!url){
            return;
        }        
        // 声明数组用来随机生成函数名
        var a = ['a','b','c','d','e','f','g','i','h','j'],
            r1 = Math.floor(Math.random()*10),
            r2 = Math.floor(Math.random()*10),
            r3 = Math.floor(Math.random()*10),
            name = 'getJSONP' + a[r1] + a[r2] + a[r3],
            cbname = 'getJSONP.' + name;
            // 判断url地址中是否含有?号
            if(url.indexOf('?') === -1){
                url += '?jsonp=' + cbname;
            }else{
                url += '&jsonp=' + cbname;
            }
            // 动态创建script标签
            var script = document.createElement('script');
            // 定义被脚本执行的回调函数
            getJSONP[name] = function(data){
                try{
                    callback && callback(data);
                } catch(e){
                }finally{
                    // 最后删除该函数及script标签
                    delete getJSONP[name];
                    script.parentNode.removeChild(script);
                }
            }
            // 定义script的src
            script.src = url;           
            document.getElementsByTagName("head")[0].appendChild(script);
    }
}
//调用接口
$.ajax({
    method:'POST|GET',
    url:'',
    sync:true|flase,
    data:{object},
    success: function(){},
})
$.jsonp({
    url:'',
    success:function (){
            }
});

记录一下

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值