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

…….续前缘…….
前文讲到,用类似爬虫的方式抓取数据; 本篇则讲解使用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请听下回分解!…….

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

相关文章