ajax和jsonp请求 -- 封装

ajax:

function ajax(opt) {

    //求情路径
    var url;
    if(opt.url){
        url = opt.url;
    }else{
        console.log('请输入请求路径');
    }
    //请求类型
    var type = opt.type || 'GET';
    //回调函数
    var callback = opt.callback || function (msg) {  };
    //请求数据
    var data = opt.data || [];
    //拼接求情数据
    var str = '';
    for(var k in data){
        str += k + '=' + data[k] + '&';
    }
    str = str.slice(0,str.length-1);
    console.log(str);


    // 1.创建对象
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp = new XMLHttpRequest();
    } else {
        // IE6, IE5 浏览器执行代码
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }


    // 2.发送请求

    // get请求和post请求
    if(type == 'GET'){
        //有请求数据时
        if(data.length > 0){
            var nowUrl = url + '?' + str;
            xmlhttp.open(type,url,true);
            xmlhttp.send();
        }else{
            xmlhttp.open(type,url,true);
            xmlhttp.send();
        }
    }else{
        //有请求数据时
        if(data.length > 0){
            xmlhttp.open(type,url,true);
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xmlhttp.send(str);
        }else{
            xmlhttp.open(type,url,true);
            xmlhttp.send();
        }
    }


    // 3.服务器响应
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            callback(xmlhttp.responseText);
        }
    }
}

使用方法：

ajax({
    type:'POST',
    data:{
        name:'zhangsan',
        age:20
    },
    url:'zz.text',
    callback:function(opt){
        console.log(opt)
    }
})

jsonp:

jsonp简单版：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JSONP 实例</title>
    <style>
        .jsonp{
            display: inline-block;
            padding: 5px 10px;
            background-color: aqua;
            border-radius: 6px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<span class="jsonp">jsonp</span>
<div id="divCustomers"></div>
<script type="text/javascript">
    function jsonp1(result) {
        console.log(result);
    }

    function beginJsonp(req) {
        var script = document.createElement('script');
        var url = req.url + '?jsonpCallback=' + req.callback;
        script.src = url;
        document.querySelector('head').appendChild(script);
        document.querySelector('head').removeChild(script);
    }

    document.querySelector('.jsonp').onclick = function () {
        beginJsonp({
            url:'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg',
            callback:'jsonp1'
        });
    };
</script>
</body>
</html>

本质就是创建一个script标签，src地址为请求地址，(原理就是利用script可以跨域访问，想知道的人可以百度)

jsonp加强版：

(function (globalObj) {

    function jsonp(opt) {
        var head = document.querySelector('head');

        var url = opt.url || '';

        // 拼接data，如果有的话
        var data = opt.data || {};
        //如果data有内容
        var dataStr = '';
        if(commonFun.isEmptyObj(data)){
            for(var k in data){
                dataStr += encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) + '&';
            }
            //去掉自最后一个&
            dataStr = dataStr.slice(0,str.length - 1);
        }

        //全局临时jsonpCallback,调用回填函数
        var callback = opt.callback || function (transaction) {  };
        globalObj.jsonpCallback = function (res) {
            callback(res);
            delete globalObj.jsonpCallback;
        };
        // globalObj.jsonpCallback = callback || function (transaction) {  };

        // 最终的url拼接
        url += '?' + dataStr + 'jsonpCallback=jsonpCallback';


        //生成script
        var script = document.createElement('script');
        script.src = url;
        head.appendChild(script);
        head.removeChild(script);
    }

    globalObj.jsonp = jsonp;
})(window)

使用时调用下面方法

jsonp({
    url:'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg',
    data:{
        g_tk:5381,
        uin:0,
        format:'json'
    },
    callback:function (res) {
        console.log(res)
    }
});

jsonp中，script最后带的函数只是一个函数名，那个函数一定要是全局函数，全局函数多了不好，所以这里定义了一个临时的jsonpCallback函数，在临时函数里调用callback函数，之后在去掉这个全局临时函数，不会造成污染。

jsonp智能get请求，一般不用，直接后端写好，前端直接用ajax就可以了。 cors这个东西可以看看

ajax和jsonp请求 -- 封装

ajax:

jsonp:

猜你喜欢