JSONP 跨域共享信息
更新時(shí)間:2012年08月16日 11:33:52 作者:
JSONP(JSON with Padding)是資料格式 JSON 的一種“使用模式”,可以讓網(wǎng)頁(yè)從別的網(wǎng)域要資料。另一個(gè)解決這個(gè)問(wèn)題的新方法是跨來(lái)源資源共享
由于同源策略,一般來(lái)說(shuō)位于 server1.example.com 的網(wǎng)頁(yè)無(wú)法與不是 server1.example.com 的服務(wù)器溝通,而 HTML 的 <script> 元素是一個(gè)例外。利用 <script> 元素的這個(gè)開(kāi)放策略,網(wǎng)頁(yè)可以得到從其他來(lái)源動(dòng)態(tài)產(chǎn)生的 JSON 資料,而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料并不是 JSON,而是任意的 JavaScript,用 JavaScript 直譯器執(zhí)行而不是用 JSON 解析器解析。
下面是我在一個(gè)項(xiàng)目中的應(yīng)用:
描述:域名dev.uc.everychina.com 要獲得域名 dev.members.everychina.com下的數(shù)據(jù)
dev.members.everychina.com的服務(wù)器端代碼:
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']);
//公司展廳評(píng)分
$room_score = Ec_RoomScore::getInstance();
//獲得展廳老的評(píng)分
$update_status = true;
//重新評(píng)分
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 下,前端調(diào)用(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);
}
}
下面是我在一個(gè)項(xiàng)目中的應(yīng)用:
描述:域名dev.uc.everychina.com 要獲得域名 dev.members.everychina.com下的數(shù)據(jù)
dev.members.everychina.com的服務(wù)器端代碼:
復(fù)制代碼 代碼如下:
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']);
//公司展廳評(píng)分
$room_score = Ec_RoomScore::getInstance();
//獲得展廳老的評(píng)分
$update_status = true;
//重新評(píng)分
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 下,前端調(diào)用(html)
復(fù)制代碼 代碼如下:
<a id="update_score" href="#" onclick="ajaxUpdateScore();return false;">update score</a>
<div id="member_score"></div>
javascript
復(fù)制代碼 代碼如下:
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);
}
}
您可能感興趣的文章:
- jsonp原理及使用
- ajax JSONP請(qǐng)求處理回調(diào)函數(shù)jsonpCallback區(qū)分大小寫
- 淺析php中jsonp的跨域?qū)嵗?/a>
- 滑輪滾動(dòng)到頁(yè)面底部ajax加載數(shù)據(jù)配合jsonp實(shí)現(xiàn)探討
- 借助script進(jìn)行Http跨域請(qǐng)求:JSONP實(shí)現(xiàn)原理及代碼
- js/ajax跨越訪問(wèn)-jsonp的原理和實(shí)例(javascript和jquery實(shí)現(xiàn)代碼)
- 什么是json和jsonp,jQuery json實(shí)例詳詳細(xì)說(shuō)明
- JSONP 跨域訪問(wèn)代理API-yahooapis實(shí)現(xiàn)代碼
- 說(shuō)說(shuō)JSON和JSONP 也許你會(huì)豁然開(kāi)朗
- 跨域請(qǐng)求之jQuery的ajax jsonp的使用解惑
- Jsonp 跨域的原理以及Jquery的解決方案
- 基于Jquery的跨域傳輸數(shù)據(jù)(JSONP)
- jquery下利用jsonp跨域訪問(wèn)實(shí)現(xiàn)方法
- Jsonp 跨域的原理以及Jquery的解決方案
- JQuery jsonp 使用示例代碼
- Json和Jsonp理論實(shí)例代碼詳解
相關(guān)文章
實(shí)現(xiàn)單層json按照key字母順序排序的示例
下面小編就為大家分享一篇實(shí)現(xiàn)單層json按照key字母順序排序的示例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
web頁(yè)面數(shù)據(jù)展示新想法(json)
若使用json作為客戶端和服務(wù)器之間的數(shù)據(jù)交換格式,代替原來(lái)的html交換格式。2010-06-06
JS中JSON.parse(JSON.stringify())實(shí)現(xiàn)深拷貝
深拷貝就是完全拷貝一份新的對(duì)象,本文主要介紹了JS中JSON.parse(JSON.stringify())實(shí)現(xiàn)深拷貝,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08
把普通對(duì)象轉(zhuǎn)換成json格式的對(duì)象的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇把普通對(duì)象轉(zhuǎn)換成json格式的對(duì)象的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
利用NodeJS的子進(jìn)程(child_process)調(diào)用系統(tǒng)命令的方法分享
child_process即子進(jìn)程可以創(chuàng)建一個(gè)系統(tǒng)子進(jìn)程并執(zhí)行shell命令,在與系統(tǒng)層面的交互上挺有用處2013-06-06
Chrome中JSON.parse的特殊實(shí)現(xiàn)
ECMA 262 Edition5 中提供了原生的JSON支持,其中JSON.parse用來(lái)將字符串轉(zhuǎn)成成json,見(jiàn)ECMA 262 Edition5 15.12.2。另見(jiàn):字符串轉(zhuǎn)換成json的三種方式2011-01-01
如何實(shí)現(xiàn)json數(shù)據(jù)可視化詳解
最近在工作中開(kāi)發(fā)一個(gè)內(nèi)部功能時(shí)碰到的一個(gè)需求,要把json數(shù)據(jù)在頁(yè)面上展示出來(lái),平時(shí)瀏覽器會(huì)安裝jsonView這樣的擴(kuò)展來(lái)看json數(shù)據(jù),但是程序要用到的話該怎么辦呢?今天在網(wǎng)上搜索的時(shí)候,發(fā)現(xiàn)了這個(gè)小技巧,分享給大家,有需要的朋友們可以參考借鑒,下面來(lái)一起看看吧2016-11-11

