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的淡入淡出的特效基础练习
Dec 13 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
Jan 17 Javascript
JS实现匀速运动的代码实例
Nov 29 Javascript
Javascript实现简单的富文本编辑器附演示
Jun 16 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
May 08 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 Javascript
Vue 重置组件到初始状态的方法示例
Oct 10 Javascript
Vue源码解析之数组变异的实现
Dec 04 Javascript
深入理解Node内建模块和对象
Mar 12 Javascript
vue.js高德地图实现热点图代码实例
Apr 18 Javascript
12个提高JavaScript技能的概念(小结)
May 09 Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 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
php获取地址栏信息的代码
2008/10/08 PHP
PHP STRING 陷阱原理说明
2010/07/24 PHP
PHP 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
2011/06/28 Javascript
js正文内容高亮效果的实现方法
2013/06/30 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
2014/08/13 Javascript
整理AngularJS中的一些常用指令
2015/06/16 Javascript
使用jquery.form.js实现图片上传的方法
2016/05/05 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
2016/06/29 Javascript
自己封装的一个原生JS拖动方法(推荐)
2016/11/22 Javascript
windows下vue.js开发环境搭建教程
2017/03/20 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
vue获取DOM元素并设置属性的两种实现方法
2017/09/30 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
React 实现拖拽功能的示例代码
2019/01/06 Javascript
jquery制作的移动端购物车效果完整示例
2020/02/24 jQuery
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
Python编程中装饰器的使用示例解析
2016/06/20 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
Python logging模块用法示例
2018/08/28 Python
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
教师评优的个人自我评价分享
2013/09/19 职场文书
医院护士求职自荐信格式
2013/09/21 职场文书
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
五好文明家庭事迹材料
2014/12/20 职场文书
2014年小学辅导员工作总结
2014/12/23 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
论文致谢词范文
2015/05/14 职场文书
SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用
2021/06/30 SQL Server
JavaScript 事件捕获冒泡与捕获详情
2021/11/11 Javascript