跨域解决方案之二---jsonp

最新推荐文章于 2024-04-27 14:33:42 发布

门_玻璃_天花板

最新推荐文章于 2024-04-27 14:33:42 发布

阅读量844

点赞数

分类专栏：系统默认文章标签： jsonp 跨域前端

本文链接：https://blog.csdn.net/gong_zhe_511/article/details/66971875

版权

系统默认专栏收录该内容

17 篇文章 0 订阅

订阅专栏

…….续前缘…….
前文讲到, 用类似爬虫的方式抓取数据; 本篇则讲解使用jsonp解决同源问题.
jsonp原理如下: 利用script标签的跨域性, 在地址后面携带参数, 被请求方则根据参数来处理请求. 需要后台和前端一起合作才能完成.
战前准备工作: 两个**非同源**webSite(必须).
楼主用的是本机(localhost)模拟非同源网站, 一个是wamp(localhost:80), 一个是HBuilder内置服务器(localhost:8020). 当然还有Tomcat等服务器. HBuilder直接下载就能用, wamp有点复杂, 但网上教程也是一大把.
在此说一个安装wamp的坑: windows系统下, 如果开启IIS, wamp无法正常启动, 因为IIS占用了80端口. 所以要停掉IIS服务.
准备工作完成之后, 那就开始撸代码了. 两份代码文件: php和HTML文件.PHP文件写在wamp之中, HTML写在HBuilder之中. 最好这样分配, 因为在HB中配置PHP环境太过于麻烦.
先看一下jsonp.php

<?php
    header('Content-type: application/json');
    // 获取回调函数名
    $jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
    // json数据
    $json_data = ["customername_first","customername_second"];
    // 输出jsonp格式的数据
    echo $jsoncallback."(".json_encode($json_data).")";
?>

应该很好理解的吧?!
再看下jsonpTest.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="divCustomers"></div>
    </body>
    <script id="first" type="text/javascript">

        function callbackFunction(result, methodName){
            console.log(result);
            var _html = '<ol>';
            for (var i = 0; i < result.length; i++) {
                _html += '<li>' + result[i] + '</li>';
            }
            _html += '</ol>';
            document.getElementById('divCustomers').innerHTML = _html;
        }

    </script>
    <script id="second" type="text/javascript" src="http://localhost/cross_domain/php/jsonp.php?jsoncallback=callbackFunction"></script>
</html>

主要强调下匹配关系:
id为second的script标签, 其src路径中的携带参数名jsoncallback与jsonp.php中的请求参数必须一致; 而参数值callbackFunction与id为first的函数名必须一致. 否则无法请求到数据.
此外, 对callbackFunction的定义必须放在做请求的前面, 否则会报函数未定义.
在此推荐下博客园和菜鸟教程的两篇文章. 写的很好. 本文可以说是照搬的菜鸟教程.
…….postMessage请听下回分解!…….

门_玻璃_天花板

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跨域解决方案之二---jsonp

…….续前缘……. 前文讲到, 用类似爬虫的方式抓取数据; 本篇则讲解使用jsonp解决同源问题. jsonp原理如下: 利用script标签的跨域性, 在地址后面携带参数, 被请求方则根据参数来处理请求. 需要后台和前端一起合作才能完成. 战前准备工作: 两个**非同源**webSite(必须). 楼主用的是本机(localhost)模拟非同源网站, 一个是wamp(localhost
复制链接

扫一扫