JSONP 跨域共享信息


Posted in Javascript onAugust 16, 2012

由于同源策略,一般来说位于 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); 
} 
}
Javascript 相关文章推荐
jquery offset函数应用实例
Nov 14 Javascript
js中settimeout方法加参数
Feb 28 Javascript
jquery 选取方法都有哪些
May 18 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
Mar 26 Javascript
jquery动态增加删减表格行特效
Nov 20 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 Javascript
vue 添加vux的代码讲解
Nov 30 Javascript
微信小程序自定义音乐进度条的实例代码
Aug 28 Javascript
JavaScript判断浏览器运行环境的详细方法
Jun 30 Javascript
浅谈webpack和webpack-cli模块源码分析
Jan 19 Javascript
详解ES6实现类的私有变量的几种写法
Feb 10 Javascript
JavaScript执行机制详细介绍
Dec 06 Javascript
js自执行函数的几种不同写法的比较
Aug 16 #Javascript
js三种排序算法分享
Aug 16 #Javascript
jQuery点击后一组图片左右滑动的实现代码
Aug 16 #Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
Aug 14 #Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
Aug 14 #Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
Aug 14 #Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
Aug 14 #Javascript
You might like
非常不错的MySQL优化的8条经验
2008/03/24 PHP
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
PHP jQuery表单,带验证具体实现方法
2014/02/15 PHP
CMS中PHP判断系统是否已经安装的方法示例
2014/07/26 PHP
PHP实现图片上传并压缩
2015/12/22 PHP
PHP函数积累总结
2019/03/19 PHP
二级域名转向类
2006/11/09 Javascript
css图片自适应大小
2007/11/28 Javascript
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
javascript时区函数介绍
2012/09/14 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
基于jquery实现动态竖向柱状条特效
2016/02/12 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
Node.js中防止错误导致的进程阻塞的方法
2016/08/11 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
超简单的微信小程序轮播图
2019/11/22 Javascript
python 判断自定义对象类型
2009/03/21 Python
Python实现动态加载模块、类、函数的方法分析
2017/07/18 Python
python方向键控制上下左右代码
2018/01/20 Python
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
python制作mysql数据迁移脚本
2019/01/01 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
Python 函数list&amp;read&amp;seek详解
2019/08/28 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
pandas apply使用多列计算生成新的列实现示例
2021/02/24 Python
Web前端页面跳转并取到值
2017/04/24 HTML / CSS
大学毕业的自我鉴定
2013/10/08 职场文书
爱国卫生月活动总结范文
2014/04/25 职场文书
整改落实自查报告
2014/11/05 职场文书
英语通知范文
2015/04/22 职场文书