2016年12月聚合文章--封装一个Jsonp函数（原生js）

一.Jsonp的作用？

Jsonp可以跨域读取数据

二.Jsonp的核心机制？

借助了 script标签 可以跨域异步请求数据的原理，请求一段js脚本，调用 回调函数

三.Jsonp能不能用post交互？

不能

四.注意事项

Jsonp必须得有 服务器接口

五.封装Jsonp

1.采用Json传参形式，解决位置置换问题

2.设置 响应超时 提示

3.从服务器接口获取数据

六.实例

1.调用搜索引擎接口（百度）

2.获取并展现数据（需要在有网的万前提下）

七.效果展示

1.百度搜索数据

2.实例数据展示

八.Jsonp代码和注释

//封装一个json转字符串函数
function json2url(json){

    //创建一个空数组
    var arr = [];

    //遍历json的每个键值对
    for(var key in json){

        //把每个键值对转换成=的形式依次放入数组
        arr.push(key+'='+json[key]);

    };

    //用&进行字符串拼接，并返回结果
    return arr.join('&');
}

//封装一个jsonp函数
function jsonp(json){

    //在没有传入json的情况下，默认设置为{}
    json = json||{};

    //判断是否传入url交互地址，如果没有，则终止运行
    if(!json.url)return;

    //设置响应时间，默认为15秒（后台为3秒）
    json.timeout = json.timeout||15000;

    //设置默认的接口（仅对于此处用到的url）
    json.cbName = json.cbName||'cb';

    //默认数据为一个空的json
    json.data = json.data||{};

    //设置jsonp的回调函数名并同时设置刷新缓存（利用随机数）
    json.data[json.cbName] = 'show'+Math.random();

    //把随机数里生成的.替换为空（函数命名不要有点）
    json.data[json.cbName] = json.data[json.cbName].replace('.','');

    //获取头部元素
    var oHead = document.getElementsByTagName('head')[0];

    //创新script（此处用到jsonp的核心机制，利用script的跨域异步请求，调用回调函数）
    var oS = document.createElement('script');

    //给script的src的地址赋值为交互地址
    oS.src = json.url+'?'+json2url(json.data);

    //把创建的script放入head中
    oHead.appendChild(oS);


    //设置一个定时器
    var timer = setTimeout(function(){

        //当响应时间超时后，使后续的函数不执行
        window[json.data[json.cbName]] = null;

        //并提示网络信息
        json.error&&json.error('亲，网络不给力！');

    },json.timeout);

    //当数据正常响应时，执行以下操作
    window[json.data[json.cbName]] = function(res){

        //关闭定时器
        clearTimeout(timer);

        //清除之前插入的script（因为script只加载一次，并且此时已收到数据）
        oHead.removeChild(oS);

        //执行成功时设置的函数
        json.success&&json.success(res);
    };
}

九.HTML代码

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jsonp封装</title>
    <style>
    </style>

    <!-- 调用Jsonp函数 -->
    <script src="jsonp.js"></script>
    <script>

        //当页面加载完毕
        window.onload = function(){

            //获取元素
            var oWord = document.getElementById('word');

            //当键盘抬起时
            oWord.onkeyup = function(){

                //提交接口，进行数据交互
                jsonp({

                    //百度数据地址
                    "url":"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",

                    //数据接口
                    "data":{
                        "wd":this.value
                    },
                    //交互成功时
                    "success":function(res){

                        //弹出获取的数据
                        alert(res.s);
                    }
                });
            };
        };
    </script>
</head>

<body>
    <input type="text" id="word">
</body>
</html>

注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。

[聚合文章] 封装一个Jsonp函数（原生js）