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 文件夹选择框的两种解决方案
Jul 01 Javascript
ajax更新数据后,jquery、jq失效问题
Mar 16 Javascript
js 第二代身份证号码的验证机制代码
May 12 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
JS动态添加iframe的代码
Sep 14 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
Dec 10 Javascript
jQuery实现布局高宽自适应的简单实例
May 28 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
详解JavaScript按概率随机生成事件
Aug 02 Javascript
个人小程序接入支付解决方案
May 23 Javascript
javascript获取元素的计算样式
May 24 Javascript
jQuery实现轮播图源码
Oct 23 jQuery
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建立外键
2006/11/25 PHP
PHP中Date()时间日期函数的使用方法小结
2011/04/20 PHP
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
PHP回调函数简单用法示例
2019/05/08 PHP
php生成HTML文件的类方法
2019/10/11 PHP
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
javascript实用方法总结
2015/02/06 Javascript
Jquery中$.post和$.ajax的用法小结
2015/04/28 Javascript
简单的jQuery入门指引
2015/07/28 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
javascript简易画板开发
2020/04/12 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
基于vue 动态加载图片src的解决方法
2018/02/05 Javascript
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
jsonp跨域获取数据的基础教程
2018/07/01 Javascript
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
2020/12/04 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
2021/01/19 Vue.js
[05:35]DOTA2英雄梦之声_第13期_拉比克
2014/06/21 DOTA
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
Python标准库之sqlite3使用实例
2014/11/25 Python
Python获取当前路径实现代码
2017/05/08 Python
Python同步遍历多个列表的示例
2019/02/19 Python
python按比例随机切分数据的实现
2019/07/11 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
Android笔试题总结
2014/11/29 面试题
《中彩那天》教学反思
2014/02/22 职场文书
建筑工地宣传标语
2014/06/18 职场文书
校园安全广播稿范文
2014/09/25 职场文书
上班时间打瞌睡检讨书
2014/09/26 职场文书
环境卫生标语
2015/08/03 职场文书
MySQL实现配置主从复制项目实践
2022/03/31 MySQL
nginx静态资源的服务器配置方法
2022/07/07 Servers