软件开发培训班 >> 编程开发 >> JavaScript


JSONP 跨域共享信息

　　本文标签：JSONP,跨域

由于同源策略，一般来说位于 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);
}
}