美文网首页
jsonp跨域实现原理

jsonp跨域实现原理

作者: Ama_deus | 来源:发表于2018-05-22 19:51 被阅读0次

跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。

所谓同源是指,域名,协议,端口均相同

我们想要调取不同的数据需要跨域,解决跨域问题显得十分的重要
跨域的三种方式 1 jsonp跨域
2 使用代理
3 cors(后台)
主要讲讲jsonp跨域的方式(简单,兼容好|只能用get跨域)
实现原理:因为script标签具有跨域能力,所以我们将想要跨域的地址放入script标签中并发送一个回调函数,后台返回回调函数到前端就可以实现跨域
首先我们要动态创建一个script标签 把回调函数拼接在想要跨域的地址后面
具体代码
前台
function callback(data){
alert("age:" + data.age + "name:" + data.name);
}

let url = "xxxxxx&callback=callback";
    let  obj = document.createElement('script');
    obj.attr("src",url);
    document.getElementByTagName('body')[0].appendchild(obj);

后台
<?php
$data = array(
'age' => 20,
'name' => '张三',
);

$callback = $_GET['callback'];

echo $callback."(".json_encode($data).")";

接收数据

    $.ajax({
        type : "get",
        async: false,
        url : "xxxxx",
        dataType: "jsonp",
        jsonp:"callback", //请求php的参数名
        jsonpCallback: "callback",//要执行的回调函数
        success : function(data) {
            alert("age:" + data.age + "name:" + data.name);
        }

    });

相关文章

  • 遇到的面试题

    null instanceOf Object false jsonp跨域原理,优缺点,安全性因素 jsonp的实现...

  • js跨域问题

    来源 javascript中实现跨域的方式总结 第一种方式:jsonp请求;jsonp的原理是利用 标签的跨域特性...

  • 跨域的三种实现方法

    用JSONP实现跨域 原理: 利用 script 标签引用JS文件时不受是否跨域的影响,在后端支持的情况下,实现跨...

  • ajax跨域请求

    ajax跨域请求(jsonp) 利用JSONP解决AJAX跨域问题的原理与jQuery解决方案JSONP jQue...

  • 跨域

    JSONP jsonp是一种跨域通信的手段,它的原理其实很简单: 首先是利用script标签的src属性来实现跨域...

  • 跨域

    解决跨域方法:jsonp,代理,cors jsonp实现原理:动态创建script标签 ,因为script中的sr...

  • JSONP原理探究

    介绍   JSONP是一直种解决跨域问题的方案,实现的原理来自于页面中的 标签能够跨域请求资源。要通过JSONP实...

  • 完成vue项目过程中的一些要点

    1、html适配移动端 2、vue实现双向绑定 跨域请求方法 1、jsonp原理利用 可以跨域请求js文件 所以...

  • ajax跨域

    JSONP之所以能够用来解决跨域方案,主要是因为 脚本拥有跨域能力,而JSONP正是利用这一点来实现。具体原理如图

  • 做demo和学习过程当中遇到的一些问题,收集的博文

    轻松搞定JSONP跨域请求--->关键字: 跨域, 同源策略, JSONP原理 git拉取远程分支到本地 git ...

网友评论

      本文标题:jsonp跨域实现原理

      本文链接:https://www.haomeiwen.com/subject/ukntdftx.html