专注WEB开发 分享经验,沉淀知识

script标签快速实现跨域访问

 作者:chenxing  时间:2016-11-01 18:23  阅读:356  评论:

像这种用接口数据用一个字符串(前端回调函数的函数名)将json数据包裹起来,前端用这个字符串作为回调函数的函数名,包裹起来的json数据作为此函数的一个参数 **被人们起了一个名字叫“jsonp”。

在切入主题之前先看一下以下的一个引用:

<script src="http://api.qiusuoweb.com/api.php?m=api1" type="text/javascript" charset="utf-8"></script>

当你初次看到这样一个src路径的时候是不是充满疑问,为什么src不是引入的一个.js文件而是一个接口地址。

没错!它就是一个跨域调用接口数据的方式。

切入正题我们通过demo来完整呈现这种跨域方式。

步骤:

1.先在本地搭建一个服务器,利用虚拟主机的方式映射出两个域出来:a.qiusuoweb.com 和 api.qiusuoweb.com

2.在a.qiusuoweb.com域下的目录创建页面访问api.qiusuoweb.com域下的接口,其页面代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">

        <title></title>
    </head>
    <h1 id="h1"></h1>
    <body>
        <script type="text/javascript">
            var apiCallback = function(data){//函数名要和接口callback的字符保持一致
                document.getElementById('h1').innerHTML = data.name;
            }
        </script>
    </body>
    <script src="http://api.qiusuoweb.com/api.php?m=api1" type="text/javascript" charset="utf-8"></script>
</html>

3.api.qiusuoweb.com接口服务器创建一个api.php,api代码

$m      = isset($_GET['m'])?$_GET['m']:'';
$data   = array(
    'url'   => 'www.qiusuoweb.com',
    'name'  => '求索网',
    'time'  => time(),
    'author'=> 'chenxing'
);
if($m){
    $m($data);
}

/**
 * jsonp跨域测试接口
 */
function api1($data){
    echo 'apiCallback' . '(' . json_encode($data) . ')';//apiCallback和前端的js函数保持一致
}

4.访问a.qiusuoweb.com域下的页面测试页面,结果:

script请求结果

以上结果说明拿到了接口数据,跨域成功。

注意:

callback函数名前端和后端要一致。demo中是apiCallback,已在代码中备注。

callback函数必须是全局的。

如何理解?

script src 虽然请求的不是一个.js的静态文件,但它获取的依然是一个js文件,只是这个js文件是动态生成的。那么以上行代码就是js函数执行的代码,那么之前前端定义的那个函数就会被执行。现在重新回到注意的那两个点是不是很好理解的呢?

像这种用接口数据用一个字符串(前端回调函数的函数名)将json数据包裹起来,前端用这个字符串作为回调函数的函数名,包裹起来的json数据作为此函数的一个参数 被人们起了一个名字叫“jsonp”。

一种优雅的写法

通过封装的动态加载js,实现完全通过js跨域调用接口api。这一种写法是比较常用的,相比于直接在页面中添加script标签,它实现了按需加载数据,也可以说是异步处理的数据,能够像ajax那样去处理数据,这个是我们真正需要的。

/**
 * 动态加载远程js
 * @param {远程链接} b
 * @param {回调函数} c
 */
function LoadScript(b, c) {
    c = c ||
    function() {};
    var a = document.createElement("script");
    a.type = "text/javascript";
    if (a.readyState) {
        a.onreadystatechange = function() {
            if (a.readyState == "loaded" || a.readyState == "complete") {
                a.onreadystatechange = null;
                c();
            }
        };
    } else {
        a.onload = function() {
            c();
        };
    }
    a.src = b;
    document.getElementsByTagName("head")[0].appendChild(a);
}

function apiCallback(){
    document.getElementById('h1').innerHTML = data.name;
}

LoadScript('http://api.qiusuoweb.com/api.php?m=api1');

优缺点:

这个好处就是不用使用jquery依然能够快速的实现跨域访问数据及其异步处理数据。不好的一点就是当你无法控制服务器端的时候(纯前端人员),你必须按照接口callback的字符来命名你的 函数,还有在你使用它之前你得先祈祷接口做了这样的处理;第二不好的一点就是函数名必须是全局的,这个很容易造成全局变量的污染。

除特别注明外,本网站所有文章均为作者原创。 或分享自己的编程经验,或探讨工作中的问题,或聊以人生趣事。 转载请注明出处来自 https://www.qiusuoweb.com/18.html

发布评论

 提交评论
有人回复时邮件通知我

 评论(0)

站长头像
chenxing(PHP攻城狮)

运营天数

总访问量

文章数量

-

-

-

交流群:157451741

新浪微博:草莽兴

 近期文章

一年时间又回到这里

 2019-07-27 16:54  177

PHP字符串转数组的三种场景

 2018-05-05 01:32  217

PHP如何遍历字符串?

 2018-05-04 00:56  1444

api接口常见的安全问题和解决方案

 2018-05-03 23:20  1051

 最新评论

 lisheng: 05月09日 19:26
兴哥牛B加油哈兴哥成功的道路上你又进了一步 哈哈
来源: 一年时间又回到这里
 心态炸裂: 03月24日 10:54
No3.blindcomfirm 多了一个l,望改正!!!
来源: 微信小程序获取input值的总结
 666666: 11月08日 13:49
66666
来源: 一年时间又回到这里
 花花草草: 10月14日 14:58
tp5不是已经提前开了吗
来源: _SESSION变量未定义?
 疯了: 10月10日 13:40
你好呀,我使用docker构建的 把整个项目给了777 并把runtime的所有者给了nginx php的运行者还是报错
来源: thinkphp5的mkdir() Permission denied问题探讨
 mesecretme: 09月30日 15:30
有个问题,有没有发现用redis保存session的话,session清空redis的key还没过期,会依然保留的,这是值变成空了
来源: php项目redis实现session共享案例