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