精品伊人久久大香线蕉,开心久久婷婷综合中文字幕,杏田冲梨,人妻无码aⅴ不卡中文字幕

打開APP
userphoto
未登錄

開通VIP,暢享免費電子書等14項超值服

開通VIP
jsonp 進行 Javascript 的跨域數據訪問
ZOL博客 > 超音速毛豆的博客 > jsonp 進行 Javascript 的跨域數據訪問

jsonp 進行 Javascript 的跨域數據訪問


2008-11-24 20:52:35    技術 |  評論(3) |  瀏覽(3594)

  今天上午,路路同學問了一個JQuery跨域讀取json數據的問題。JQuery用得很少,還真沒實際試過。于是上網找個找,看到了JQ的$.getJSON() 方法。先介紹下概念性的東西,網上找的,簡單看看就行了。

1.JSONP(JSON with Padding-填充json數據也就是常用的json跨域方式):利用script標簽,通過特定的src地址的調用,來執行一個客戶端的js函數,在服務器端生成相對的數據(json格式)并以參數的形式傳遞給這個客戶端的js函數并執行這個函數,前提是需要服務器端的數據輸出支持。       

2.為什么使用JSONP:由于 JSON 只是一種含有簡單括號結構的純文本,因此許多通道都可以交換 JSON 消息。因為同源策略的限制,我們不能在與外部服務器進行通信的時候使用 XMLHttpRequest。而JSONP是一種可以繞過同源策略的方法,即通過使用 JSON 與 <script> 標記相結合的方法,從服務端直接返回可執行的JavaScript函數調用或者JavaScript對象。       

3.誰在使用JSONP:dojo、JQuery、Youtube GData API 、Google Social Graph API 、Digg API 、GeoNames webservice、豆瓣API、Del.icio.us JSON API等。

------------------------------------------------------------------------------------------------


  和 AJAX 一樣,JSONP 實際上也是早已存在,只是說法相對比較新穎(貌似也出來很久了)。自 1.2 版本起,JQuery加入了對 JSONP 的支持(http://docs.jquery.com/Ajax/jQuery.getJSON#urldatacallback)。我們可以很容易的利用 $.getJSON() 方法(或者其它基于 $.ajax() 的方法),來跨域加載 JSON 數據。我參考官網,寫了個JQ測試的例子:

a.html

<html>
<head>
  <script src="></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數組
$arr = array(
     'name' => 'lava',
     'nick' => '比目魚',
     'contact' => array(
      'MSN' => 'lavaguo#msn.com',
         'email' => 'guo.feng#zol.com.cn',
         'website' => 'http://www.zol.com.cn',
     )
 );

$arr = gb2312ToUtf8($arr);//中文需要轉UTF-8
$json = json_encode($arr);//轉成json數組
if (!empty($callback)) {
    $json = $callback . '(' . $json . ')';//注意這里的格式,調試時這里費了點時間
}
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 被寫成了http://active.zol.com.cn/guofeng/profile2.php?callback=?,需要說明的是,這個問號會被 jQuery 自動替換為回調函數的函數名(如果是一個匿名函數,JQuery 會自動生成一個帶時間戳的函數名)。

總結下JSONP原理

首先在客戶端注冊一個callback, 然后把callback的名字傳給服務器。

此時,服務器先生成 json 數據。 

然后以 javascript 語法的方式,生成一個function , function 名字就是傳遞上來的參數 jsonp.

最后將 json 數據直接以入參的方式,放置到 function 中,這樣就生成了一段 js 語法的文檔,返回給客戶端。

客戶端瀏覽器,解析script標簽,并執行返回的 javascript 文檔,此時數據作為參數,傳入到了客戶端預先定義好的 callback 函數里.(動態執行回調函數)

本站僅提供存儲服務,所有內容均由用戶發布,如發現有害或侵權內容,請點擊舉報
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
jq使用jsonp實現百度搜索
淺談跨域以WebService對跨域的支持
Jsonp 方式跨域獲取 json 數據原理 - JavaScript - web - JavaEye論壇
使用Jsonp解決跨域數據訪問問題
AJAX 跨域請求
谷歌通過ajax獲取本地JSON文件,為什么會提示跨域?解決方法?
更多類似文章 >>
生活服務
分享 收藏 導長圖 關注 下載文章
綁定賬號成功
后續可登錄賬號暢享VIP特權!
如果VIP功能使用有故障,
可點擊這里聯系客服!

聯系客服

主站蜘蛛池模板: 普定县| 尼勒克县| 枣强县| 古浪县| 连城县| 黔南| 大荔县| 万山特区| 淮南市| 子长县| 报价| 庐江县| 贡山| 资溪县| 新营市| 新干县| 通江县| 唐山市| 枝江市| 平乡县| 崇明县| 巫山县| 台东市| 峨边| 涡阳县| 永安市| 连州市| 麻阳| 本溪市| 大田县| 磐安县| 江西省| 句容市| 莆田市| 萝北县| 海林市| 抚远县| 屏东县| 清新县| 临沭县| 津市市|