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 相关文章推荐
JavaScript 学习笔记(十六) js事件
Feb 01 Javascript
Javascript 判断客户端浏览器类型代码
Mar 01 Javascript
JQuery之拖拽插件实现代码
Apr 14 Javascript
javascript学习基础笔记之DOM对象操作
Nov 03 Javascript
Js操作Select大全(取值、设置选中等等)
Oct 29 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
Apr 25 Javascript
使用node.js搭建服务器
May 20 Javascript
vue结合Echarts实现点击高亮效果的示例
Mar 17 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
Dec 30 Javascript
ES10 特性的完整指南小结
Mar 04 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维护文件系统
2006/10/09 PHP
PHP中PDO基础教程 入门级
2011/09/04 PHP
PHP引用符&amp;的用法详细解析
2013/08/22 PHP
php ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
js实现交换运动效果的方法
2015/04/10 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
angular中使用Socket.io实例代码
2017/06/03 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
2017/06/28 Javascript
vue的token刷新处理的方法
2018/07/17 Javascript
使用JS获取页面上的所有标签
2018/10/18 Javascript
[01:45]DOTA2新英雄“神谕者”全方位展示
2014/11/21 DOTA
详解Python中for循环是如何工作的
2017/06/30 Python
Python使用plotly绘制数据图表的方法
2017/07/18 Python
使用Python写一个量化股票提醒系统
2018/08/22 Python
python实现将文件夹下面的不是以py文件结尾的文件都过滤掉的方法
2018/10/21 Python
Python3.7 dataclass使用指南小结
2019/02/22 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
Pytorch Tensor基本数学运算详解
2019/12/30 Python
python ubplot使用方法解析
2020/01/10 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
Python通过两个dataframe用for循环求笛卡尔积
2020/04/29 Python
解决pymysql cursor.fetchall() 获取不到数据的问题
2020/05/15 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
10个顶级Python实用库推荐
2021/03/04 Python
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
2015最新婚礼司仪主持词
2015/06/30 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书
Oracle配置dblink访问PostgreSQL的操作方法
2022/03/21 PostgreSQL
Nginx图片服务器配置之后图片访问404的问题解决
2022/03/21 Servers
《极主夫道》真人电影正式预告 定档6月3日上映
2022/04/05 日漫
全网非常详细的pytest配置文件
2022/07/15 Python