jsonp源码实现

jsonp,是常用的跨域请求服务器上资源的方式，因为script标签的src属性不会受同源策略影响，因而可以用src属性实现跨域，src属性是通过url的方式传参，故只能发送get请求

   // 生成查询url参数
    var util = {
        toQueryurl: function(o) {
            var arr = []
            for ( var i in o) {
                arr.push(encodeURIComponent(i)+ '=' +encodeURIComponent(o[i]))
            }
            return arr.join('&')

        }
    }
    
    var url = 'http://toplrcreq.xx.com/lrcreq/list'
    var page = 1
    var data = {
        pg       :   page
    }

    function jsonp(params) {
        var callbackName='json_'+ ~~(Math.random()*100) // 随机生成回调函数名称
        params.data.callback = callbackName //注意
        var script = document.createElement('script');
        var flag = params.url.indexOf('?')>-1?'&':'?'
        var queryUrl = params.url + flag + util.toQueryurl(params.data)
        var head = document.getElementsByTagName('head')[0]
        head.appendChild(script)
        script.src = queryUrl
        //回调函数要接口返回后执行
        window[callbackName] = function(json) {
            window[callbackName] = null
            clearTimeout(script.timer);
            head.removeChild(script)
            params.success && params.success(json)
        }

        //超时处理
        if (params.timer) {
           script.timer = setTimeout(function(){
            window[callbackName] = null
            head.removeChild(script)
            params&&params.error({
                message:'网络超时'
            })
            },params.timer)
        }
    }

    // 调用实现
    jsonp({
        url:url,
        data:data,
        success: function(res) {
            console.log(res)
            if(res.status == 1) {
                console.log('接口响应成功')
            }
            
        },
        error:function(error){
            console.log(error)
        },
        timer:5000})