javascript 跨域调用数据jsonp
经验与学习 2015/6/28 12:18:13 点击：不统计
http://%77w%77%2E%66%6F%72%61%73%70%2E%63n网站制作学习
%77w%77%2E%66%6F%72%61%73%70%2E%63%6E
JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的 <script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。
直接案例说明,有两种跨域调用的方式，一种是引入js文件调用操作，一种是直接远程获取getjson然后进行数据操作。
1. 引入js文件调用操作，我们假设两个域名 forasp.cn 和demoforasp.cn
第一个forasp.cn/server.js作为服务端 ,传递参数为json格式
第二个demoforasp.cn/getjson.html 作为请求服务的(下同)
(1)第一个forasp.cn/server.js作为服务端 ，这里的请求文件是server.js 这个是个例子，可以自由设置请求url，你的服务端可以是任意地址，但是返回输出的一定是js文件。
假设是forasp.cn/server.js的例子,文件代码
request_callback({"url":"http:\/\/www.forasp.cn\/"});
假设是forasp.cn/server.php的例子
<?php
header('Content-type: text/javascript');
$data['url'] = "http://www.forasp.cn";
echo "request_callback(".json_encode($data).")";
?>
上面的两个request_callback 是作为调用函数处理。
(2)demoforasp.cn/getjson.html 作为请求服务
<html>
<title>call</title>
<body>
</body>
<script>
function request_callback(data){
alert(data.url);//这里则输出http://www.forasp.cn
}
</script>
<script type="text/javascript" src="http://demoforasp.cn/server.php"></script> //这里也可以是js
</html>
2.第二种通过getJsonp远程获取数据后自己处理数据。这里使用了jquery 的$.getJSON
(1)服务端 仍然可以去自定义请求的URL但是在请求后面添加了参数
我们直接用php的代码为例 假设请求的URL为forasp.cn/server.php代码如下
<?php
header('Content-type: text/javascript');
$callback = strip_tags($_GET['callback']);
$data['url'] = "forasp.cn";
echo $callback."(".json_encode($data).")";
?>
这里新增加了回调的函数callback 这里可以自定义也可以默认。
(2) 客户端的代码我用用了jquery的getJSON 代码如下
<script>
$.getJSON(
"http://forasp.cn/server.php?callback=?",
function(data) {
alert(data.url);
}
);
</script>
当我们运行代码的时候你会看到 url中的callback已经默认值了
http://forasp.cn/server.php?callback=jQuery17205451187090948224_1435464540903&_=1435464540910
这样我们就可以请求道跨域调用的数据了。
http://www.forasp.cn/
http://%77%77%77%2E%66%6F%72%61%73%70%2E%63%6E