今天上午，路路同學(xué)問(wèn)了一個(gè)JQuery跨域讀取json數(shù)據(jù)的問(wèn)題。JQuery用得很少，還真沒(méi)實(shí)際試過(guò)。于是上網(wǎng)找個(gè)找，看到了JQ的$.getJSON() 方法。先介紹下概念性的東西，網(wǎng)上找的，簡(jiǎn)單看看就行了。
1.JSONP（JSON with Padding-填充json數(shù)據(jù)也就是常用的json跨域方式）：利用script標(biāo)簽，通過(guò)特定的src地址的調(diào)用，來(lái)執(zhí)行一個(gè)客戶(hù)端的js函數(shù)，在服務(wù)器端生成相對(duì)的數(shù)據(jù)（json格式）并以參數(shù)的形式傳遞給這個(gè)客戶(hù)端的js函數(shù)并執(zhí)行這個(gè)函數(shù)，前提是需要服務(wù)器端的數(shù)據(jù)輸出支持。
2.為什么使用JSONP：由于 JSON 只是一種含有簡(jiǎn)單括號(hào)結(jié)構(gòu)的純文本，因此許多通道都可以交換 JSON 消息。因?yàn)橥床呗缘?wbr>限制，我們不能在與外部服務(wù)器進(jìn)行通信的時(shí)候使用 XMLHttpRequest。而JSONP是一種可以繞過(guò)同源策略的方法，即通過(guò)使用 JSON 與 <script> 標(biāo)記相結(jié)合的方法，從服務(wù)端直接返回可執(zhí)行的JavaScript函數(shù)調(diào)用或者JavaScript對(duì)象。
3.誰(shuí)在使用JSONP：dojo、JQuery、Youtube GData API 、Google Social Graph API 、Digg API 、GeoNames webservice、豆瓣API、Del.icio.us JSON API等。
------------------------------------------------------------------------------------------------
和 AJAX 一樣，JSONP 實(shí)際上也是早已存在，只是說(shuō)法相對(duì)比較新穎（貌似也出來(lái)很久了）。自 1.2 版本起，JQuery加入了對(duì) JSONP 的支持（http://docs.jquery.com/Ajax/jQuery.getJSON#urldatacallback）。我們可以很容易的利用 $.getJSON() 方法（或者其它基于 $.ajax() 的方法），來(lái)跨域加載 JSON 數(shù)據(jù)。我參考官網(wǎng)，寫(xiě)了個(gè)JQ測(cè)試的例子：
a.html
<html>
<head>
<script src="
http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<script type="text/javascript">
function do_jsonp() {
$.getJSON(" function(data) {
$('#result').val('My name is: ' + data.nick);
});
}
</script>
<a href="javascript :do_jsonp();">Click me</a><br />
<textarea id="result" cols="50" rows="3"></textarea>
</body>
</html>
profile2.php
<?php
$callback = isset($_GET['callback']) ? $_GET['callback'] : '';
$json = '';
//php數(shù)組
$arr = array(
'name' => 'lava',
'nick' => '比目魚(yú)',
'contact' => array(
'MSN' => 'lavaguo#msn.com',
'email' => 'guo.feng#zol.com.cn',
'website' => 'http://www.zol.com.cn',
)
);
$arr = gb2312ToUtf8($arr);//中文需要轉(zhuǎn)UTF-8
$json = json_encode($arr);//轉(zhuǎn)成json數(shù)組
if (!empty($callback)) {
$json = $callback . '(' . $json . ')';//注意這里的格式，調(diào)試時(shí)這里費(fèi)了點(diǎn)時(shí)間
}
echo $json;
function gb2312ToUtf8(&$input)
{
if (!is_array($input)) {
$input = iconv('GB2312', 'UTF-8', $input);
} else {
foreach ($input as $k=>$v) {
gb2312ToUtf8(&$input["$k"]);
}
}
return $input;
}
?>
你可能注意到上面的例子中，url 被寫(xiě)成了http://active.zol.com.cn/guofeng/profile2.php?callback=?，需要說(shuō)明的是，這個(gè)問(wèn)號(hào)會(huì)被 jQuery 自動(dòng)替換為回調(diào)函數(shù)的函數(shù)名（如果是一個(gè)匿名函數(shù)，JQuery 會(huì)自動(dòng)生成一個(gè)帶時(shí)間戳的函數(shù)名）。
總結(jié)下JSONP原理：
首先在客戶(hù)端注冊(cè)一個(gè)callback, 然后把callback的名字傳給服務(wù)器。
此時(shí)，服務(wù)器先生成 json 數(shù)據(jù)。
然后以 javascript 語(yǔ)法的方式，生成一個(gè)function , function 名字就是傳遞上來(lái)的參數(shù) jsonp.
最后將 json 數(shù)據(jù)直接以入?yún)⒌姆绞?wbr>，放置到 function 中，這樣就生成了一段 js 語(yǔ)法的文檔，返回給客戶(hù)端。
客戶(hù)端瀏覽器，解析script標(biāo)簽，并執(zhí)行返回的 javascript 文檔，此時(shí)數(shù)據(jù)作為參數(shù)，傳入到了客戶(hù)端預(yù)先定義好的 callback 函數(shù)里.（動(dòng)態(tài)執(zhí)行回調(diào)函數(shù)）
