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 相关文章推荐
带左右箭头图片轮播的JS代码
Dec 18 Javascript
做好七件事帮你提升jQuery的性能
Feb 06 Javascript
封装获取dom元素的简单实例
Jul 08 Javascript
js实现精确到毫秒的倒计时效果
Aug 05 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 Javascript
Bootstrap表单制作代码
Mar 17 Javascript
微信小程序实现顶部选项卡(swiper)
Jun 19 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 Javascript
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
vue实现键盘输入支付密码功能
Aug 18 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 Javascript
vue 使用lodash实现对象数组深拷贝操作
Sep 10 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
第四节 构造函数和析构函数 [4]
2006/10/09 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
[00:32]2018DOTA2亚洲邀请赛Mineski出场
2018/04/04 DOTA
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
浅谈python中的占位符
2017/11/09 Python
根据DataFrame某一列的值来选择具体的某一行方法
2018/07/03 Python
python爬虫selenium和phantomJs使用方法解析
2019/08/08 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
基于Django统计博客文章阅读量
2019/10/29 Python
利用python绘制数据曲线图的实现
2020/04/09 Python
Python利用命名空间解析XML文档
2020/08/10 Python
利用Python实现字幕挂载(把字幕文件与视频合并)思路详解
2020/10/21 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
html5教你做炫酷的碎片式图片切换 (canvas)
2017/07/28 HTML / CSS
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
毕业生求职简历的自我评价
2013/10/07 职场文书
写自荐信要注意什么
2013/12/26 职场文书
黄继光的英雄事迹材料
2014/02/13 职场文书
能源工程专业应届生求职信
2014/03/01 职场文书
市场营销管理毕业生自荐信
2014/03/03 职场文书
班班通校本培训方案
2014/03/12 职场文书
留学推荐信范文
2014/05/10 职场文书
服装设计专业求职信
2014/06/16 职场文书
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL
Android自定义双向滑动控件
2022/04/19 Java/Android