找回密码
当前位置：前端开发者 > 更多 > 正文

前端开发jsonp跨域程序

2019-01-29 分类：更多 阅读(1128) 评论(0)
后台开发转前端
前端后台谁开发
开发前端后台工具

在js在function($)前面加分号
;function($,underfined)
;(function($){$.extend($.fn…
在前面加分号可以有多种用途
1.防止文件集成成一个文件后,高压缩出现语法错误.
2.这是一个匿名函数,一般js库都采用这种自执行的匿名函数来保护内置变量(function(){})()
3.因为underfined是window的属性,声明为局部变量之后,在函数中如果再有变量与underfined作比较的话,程序就可以不用搜索
underfined到window,可以提高程序性能

html 代码

<!DOCTYPE html>
    <head>
        <meta charset=”utf-8″ />
        <title>JSONP跨域</title>
    </head>
    <body>
        <input id=”input” type=”text” placeholder=”请在这里输入” />
        <ul id=”ul”></ul>
    </body>
    <script>
        ;(function() {
            window.onload = function() {
                var input = document.getElementById(‘input’),
                    body = document.getElementsByTagName(‘body’)[0],
                    ul = document.getElementById(‘ul’)
                //监听input事件
                input.addEventListener(‘input’, function() {
                    var val = encodeURI(input.value)
                    ul.innerHTML = ” //清空上一次请求所插入的li
                    jsonp({
                        url:
                            ‘https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=’ +
                            val +
                            ‘&cb=’,
                        time: 3000,
                        callback: function(json) {
                            var htmlText = ”
                            for (var i = 0; i < json.s.length; i++) {
                                htmlText += ‘<li>’ + json[‘s’][i] + ‘</li>’
                            }
                            ul.innerHTML = htmlText
                        },
                        fail: function(mes) {
                            alert(mes)
                        },
                    })
                })
                function jsonp(objects) {
                    objects = objects || {}
                    if (!objects.url || !objects.callback) {
                        throw new Error(‘参数不合法’)
                    }
                    //创建script标签并插入
                    var callbackName = (‘jsonp_’ + Math.random()).replace(
                        ‘.’,
                        ”,
                    ) //随机生成callbackName
                    var script = document.createElement(‘script’)
                    var body = document.getElementsByTagName(‘body’)[0]
                    body.appendChild(script)
                    window[callbackName] = function(json) {
                        body.removeChild(script)
                        clearTimeout(script.timer)
                        window[callbackName] = null
                        objects.callback && objects.callback(json)
                    }
                    //发出请求
                    script.src = objects.url + callbackName
                    //响应时间
                    if (objects.time) {
                        script.timer = setTimeout(function() {
                            window[callbackName] = null
                            body.removeChild(script)
                            objects.fail && objects.fail(‘超时’)
                        }, objects.time)
                    }
                }
            }
        })(window)
    </script>
</html>
前端和后台开发
后台和前端开发
android开发的前端后台
赞(0)
前端开发者 » 前端开发jsonp跨域程序
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论