JSONP 跨域共享信息

 更新时间:2012年08月16日 11:33:52   作者:  
JSONP(JSON with Padding)是资料格式 JSON 的一种“使用模式”,可以让网页从别的网域要资料。另一个解决这个问题的新方法是跨来源资源共享
由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com 的服务器沟通,而 HTML 的 <script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的 JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。

下面是我在一个项目中的应用:

描述:域名dev.uc.everychina.com 要获得域名 dev.members.everychina.com下的数据
dev.members.everychina.com的服务器端代码:
复制代码 代码如下:

class JsController extends CController {
public function actionIndex() {
$callback = isset($_GET['callback']) ? $_GET['callback'] : '';
$result = array();
$userinfo = Intf_Client_Uc_User::instance()->getLoginUser();
$cid = Everychina_Member::instance()->getCid($userinfo['uid']);
//公司展厅评分
$room_score = Ec_RoomScore::getInstance();
//获得展厅老的评分
$update_status = true;
//重新评分
if(isset($_GET['action']) && $_GET['action']=='update') {
$score_res = $room_score->getScoreInfo($cid);
$room_score->updateScoreResult($cid,$score_res);
$update_status = true;
}
$result['status'] = $update_status;
$res = $room_score->getScoreResult($cid);
$result['score'] = $room_score->getScoreResultView($res['score']);
if ($callback) {
$js = json_encode($result);
echo "$callback( ($js) );";
}
}

域名 dev.uc.everychina.com 下,前端调用(html)
复制代码 代码如下:

<a id="update_score" href="#" onclick="ajaxUpdateScore();return false;">update score</a>
<div id="member_score"></div>

javascript
复制代码 代码如下:

   function ajaxUpdateScore(){
if(document.getElementById("member_score_script")) {
var score_script = document.getElementById("member_score_script");
document.body.removeChild(score_script);
}
var score_script = document.createElement("script");
score_script.id = "member_score_script";
score_script.src = 'http://dev.members.everychina.com/index.php?r=js/index&callback=show_score&t='+new Date().getTime();
document.body.appendChild(score_script);
}
function show_score(json) {
if(json.status == true) {
var html = '<p>level:'+json.score.level+'</p>';
html += '<p>msg:'+json.score.msg+'</p>';
html += '<p>score:'+json.score.score+'</p>';
$("#member_score").html(html);
}
}

相关文章

  • js解析与序列化json数据(二)序列化探讨

    js解析与序列化json数据(二)序列化探讨

    上一节我们讲解了JSON.stringify()的基本用法,这一节我们来重点探讨一下序列化,单独或组合使用这两个参数(过滤器/数组),可以更全面深入地控制JSON的序列化,感兴趣的朋友可以了解下,或许对你学习json有所帮助
    2013-02-02
  • json的前台操作和后台操作实现代码

    json的前台操作和后台操作实现代码

    通常情况下,json的在项目中的应用都是在后台把数据传到前台,然后前台再获取json中的数据.
    2012-01-01
  • JSON 客户端和服务器端的格式转换

    JSON 客户端和服务器端的格式转换

    JSON是JavaScript Object Notation的缩写。JSON是个轻量级的用于服务器端和客户端交换数据的数据格式。它经常会用在ajax应用上,是因为它是基于ajax对象的格式定义出来的。
    2009-08-08
  • 半个小时学json(json传递示例)

    半个小时学json(json传递示例)

    这篇文章主要介绍了半个小时学json(json传递示例),主要包括一维数组与二维数组,需要的朋友可以参考下
    2016-12-12
  • json 介绍 js简单实例

    json 介绍 js简单实例

    json全称是JavaScript Object Notation(javaScript对象符号)。JSON是一种结构化的,轻量级的,完全独立于语言的.基于文本的数据传输格式,在许多场合下用来替代xml文件格式。
    2009-12-12
  • 简明json介绍

    简明json介绍

    不要认为JSON是种新的应用 ,其实JSON就是javascript支持的一种对象直接量。
    2008-09-09
  • JSON与XML优缺点对比分析

    JSON与XML优缺点对比分析

    本文从各个方面向大家对比展示了json和xml的优缺点,十分的全面细致,有需要的小伙伴可以参考下。
    2015-07-07
  • json 实例详细说明教程

    json 实例详细说明教程

    这是个人在最近使用json时做的总结,拿出来给没接触过的小弟们晒晒,适用与没接触过json的人员,其中json2。js请到json官网下载。
    2009-10-10
  • js解析与序列化json数据(三)json的解析探讨

    js解析与序列化json数据(三)json的解析探讨

    这一节我们主要讨论json的解析,感兴趣的朋友可以了解下,JSON.parse()方法也可以接收另一个参数,该参数是一个函数,将早每个键值对上调用,好了,话不多说,希望本文对你有所帮助
    2013-02-02
  • 深入分析jsonp协议原理

    深入分析jsonp协议原理

    JSONP的最基本的原理是:动态添加一个<script>标签,而script标签的src属性是没有跨域的限制的。这样说来,这种跨域方式其实与ajax XmlHttpRequest协议无关了。
    2015-09-09

最新评论