专栏首页smh的技术文章手写一个jsonp格式的跨域
原创

手写一个jsonp格式的跨域

跨域是我们经常要用到的技术,在没有cors跨域的以前,大家一般都是用jquery的jsonp来进行跨域。

jsonp跨域的原理是,是利用了一些支持跨域访问的标签的原理,比如比如script,都可以链接不同域名下的资源,jsonp也就由此诞生了。

jsonp会在请求地址后面自动加上一个参数,后台接受这个参数这个值,把返回的json字符串包含在这个值里面,比如:

xxx.com?callback=jquery19390;那么后台返回的数据就应该是jquery19390(json数据),这种格式的。这样我们用script标签,src为这个地址,然后加入html页面中,就执行了jquery19390这个函数,jsonp的原理就是这样的。代码如下:

<html>
<head>
    <title>手写jsonp</title>
    <script src="https://www.sammh.com/js/jquery.js"></script>
</head>
<body>
    <input id="btn" type="button" value="jsonp" />
    <textarea id="text" style="width: 400px; height: 100px;"></textarea>
    <script>
        (function (window) {
        //使用立即执行函数不影响全局变量
        var jsonp = function (url,callback) {
            var FuncName = 'handeler' + Math.random().toString().replace('.','');
            var parameter = '?jsoncallback=' + FuncName;
            var scriptEle = document.createElement('script');
            scriptEle.src = url + parameter;
            window[FuncName] = function (data) {//将随机函数名定义在window上
                callback(data);
                document.body.removeChild(scriptEle);
            }
            document.body.appendChild(scriptEle);//添加到页面中,马上调用随机函数
        }
        //添加到window对象上
        window.jsonp = jsonp;
        })(window);
        $("#btn").click(function () {
            jsonp("https://www.sammh.com/jsonp.aspx", function (data) {
                var result = JSON.stringify(data); //json对象转成字符串
                $("#text").val(result);
            })
        })
    </script>
</body>
</html>

大家可直接复制以上代码直接运行。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • IHttpAsyncHandler实现广播功能

    IHttpAsyncHandler实现广播功能原理:第一次页面加载,发送一个请求到服务器,服务器挂起这个请求,等到有数据之后在返回这个请求,就实现了服务器主动推...

    小明爱学习
  • 【云+社区年度征文】vscode里开发vue项目需要安装的插件

    在开发编辑器中,vscode占有的比重越来越高,相比笨重的webstorm和功能不怎么全的subline,优势太明显。所以我们需要掌握vscode里开发项目一些...

    小明爱学习
  • CSS:focus-within让你脱离JS

    CSS有很多有意思的东西,让以前必须要使用js才能完成的效果,现在使用一些css选择器就完成了,今天我们就来说说focus-within。

    小明爱学习
  • 【Spring注解驱动开发】你还不会使用@Resource和@Inject注解?那你就out了!!

    作者个人研发的在高并发场景下,提供的简单、稳定、可扩展的延迟消息队列框架,具有精准的定时任务和延迟队列处理功能。自开源半年多以来,已成功为十几家中小型企业提供了...

    冰河
  • @ConditionalOn...注解,条件组合你知道吗?

    当我们构建一个 Spring 应用的时候,有时我们想在满足指定条件的时候才将某个 bean 加载到应用上下文中, 在Spring 4.0 时代,我们可以通过 @...

    JAVA葵花宝典
  • scRNA-seq聚类分析(一)

    现在我们有了高质量的细胞,在将细胞聚类并确定不同的潜在细胞类型之前,我们需要执行一些步骤。我们的数据集包含来自两个不同条件(Control and Stimul...

    生信技能树jimmy
  • 【开源游戏/射击】愤怒的小红帽

    HTML5愤怒的小红帽小游戏是一款益智休闲射击小游戏,游戏中一支箭,一个便当袋,小红帽能平安的到达老奶奶家吗?赶紧一起护送小红帽去奶奶家吧。完成这个神圣的任务,...

    用户5997198
  • Cyber nerve 神经网络

      神经网络(Cyber nerve)的项目核心框架是,利用区块链技术打造一个基于区块链上的人工智能平台,也就是说用区块链来接纳人工智能,让人工智能与区块链这两...

    执笔资讯
  • 深入浅出Java注解

    注解对于开发人员来讲既熟悉又陌生,熟悉是因为只要你是做开发,都会用到注解(常见的@Override);陌生是因为即使不使用注解也照常能够进行开发...

    open
  • ionic4底部Tab居中圆形凸出按钮

    IT晴天

扫码关注云+社区

领取腾讯云代金券