json和json跨域

先編寫json.php:

<?php
echo json_encode(array(’foo’ => ‘bar’));
?>

再編寫json.htm:

<script src=” http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js“></script>
<script>
$.getJSON(’/json.php’, function(data){
alert(data.foo);
});
</script>

把兩個文件放到根目錄下,運行http://localhost/json.htm,就能看到效果了。

上面的例子沒有什麼難度,下面嘗試一下在跨域情況下的效果,

編寫C:/WINDOWS/system32/drivers/etc/hosts文件,加入如下映射:

127.0.0.1 www.foobar.com

修改json.htm的內容:

<script src=” http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js“></script>
<script>
$.getJSON(’http://
www.foobar.com/json.php’, function(data){
alert(data.foo);
});
</script>

此時,重啓瀏覽器後再瀏覽http://localhost/json.htm,程序不會運行,會出現Permission denied錯誤。

這是因爲由於同源策略的限制,XmlHttpRequest只允許請求當前源(域名、協議、端口)的資源。

如果想規避跨域問題,可以通過使用html的script標記來進行跨域請求,並在響應中返回要執行的script代碼。此技術的一種實際應用方式 被稱爲JSONP,Remote JSON - JSONP 一文對其原理做了介紹。

先修改json.htm的內容:

<script src=” http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js“></script>
<script>
$.getJSON(’http://
www.foobar.com/json.php?callback=? ‘, function(data){
alert(data.foo);
});
</script>

再修改json.php的內容:

<?php
echo $_GET['callback'], ‘(’, json_encode(array(’foo’ => ‘bar’)), ‘)’ ;
?>

此時,如果再瀏覽json.htm,就會發現即便是跨域,程序也能正常運行。

有了callback=?後,JQuery就會知道你要進行一次JSONP請求,它會自動生成一個回調函數的名字,然後替換callback=?中 的問號。callback並不是必須的命名規則,而只是客戶端和服務端之間的一種約定,比如說在FlickrAPI 裏,使用的就不是callback,而是jsoncallback。不管使用什麼命名,最 後不過是生成一種function_name(json_data)的調用形式而已。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章