快捷導(dǎo)航

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ù)器端代碼：

復(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
跨域

相關(guān)文章

實(shí)現(xiàn)單層json按照key字母順序排序的示例
下面小編就為大家分享一篇實(shí)現(xiàn)單層json按照key字母順序排序的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2017-12-12
JS操作JSON常用方法(10w閱讀)
工作中做了幾款自動(dòng)化測(cè)試工具都是跟日志讀取相關(guān)，日志格式又大多數(shù)都是JSON，所以這里把常用的JS操作JSON的方法做了總結(jié),需要的朋友可以參考下
2020-12-12
json編寫(xiě)簡(jiǎn)單一例
主要是了解一下json的簡(jiǎn)單寫(xiě)法與應(yīng)用，方便想學(xué)習(xí)json的朋友
2008-08-08
web頁(yè)面數(shù)據(jù)展示新想法(json)
若使用json作為客戶(hù)端和服務(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
JavaScript 創(chuàng)建對(duì)象
JSON方式/對(duì)象直接量等多種方法。大家可以快速的掌握js對(duì)象的建立。
2009-07-07
把普通對(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ù)，但是程序要用到的話(huà)該怎么辦呢？今天在網(wǎng)上搜索的時(shí)候，發(fā)現(xiàn)了這個(gè)小技巧，分享給大家，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧
2016-11-11