多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

<rt id="z68yi"><optgroup id="z68yi"></optgroup></rt>

中國最全IT社區平臺聯系我們 | 收藏本站

json教程

關于 JSON

JSON 教程

json格式

JSON解析

JSON遍歷

JSON調用

JSON轉換

JSON獲取

JSON字符串

JSON數組

←上一篇： JSON獲取

→下一篇：JS根據key值獲取URL中的參數值

AJAX跨域請求獲取JSON數據

閱讀 (2202)

我們都知道，AJAX的一大限制是不允許跨域請求。不過通過使用JSONP來實現。JSONP是一種通過腳本標記注入的方式，它是可以引用跨域URL的js腳本，不過需要提供一個回調函數（必須在您自己的頁面上），因此，你可以自己處理結果。讓我們看看JSONP的是怎么在jQuery，MooTools的，Dojo Toolkit中實現的。

jQuery的JSONP
jQuery.getJSON方法：

Js代碼

代碼如下:

jQuery.getJSON("http://search.twitter.com/search.json?callback=?",{ 
    q: "Arsenal" 
},function(tweets) { 
    // Handle response here 
    console.info("Twitter returned: ",tweets); 
});

或者類似
Js代碼

代碼如下:

$.ajax({ 
         type:"get", 
         data:"random="+Math.random(), 
         url:url, 
         dataType:"jsonp", 
         jsonp:"callback", 
         success:function(data){ 
         $.each(data, function(key, val) { 
         $("#myDiv").html($("#myDiv").html()+val.cvalue+"</br>"); 
         }); 
        } 
      });

回調方法的參數通過getJSON 就可以獲取到json對象

MooTools JSONP
MooTools 需要Request.JSONP Class , 可以從這里下載MooTools More . 選擇Request.JSONP,
這樣從另一個域獲取json就是小菜一碟了.

Js代碼

代碼如下:

new Request.JSONP({ 
    url: "http://search.twitter.com/search.json", 
    data: { 
        q: "Arsenal" 
    },//提交的參數, 沒有參數可以不寫 
        callbackKey: 'jsoncallback',//自己定義回調函數的參數名稱 
        onComplete: function(tweets) { 
        // Log the result to console for inspection 
        console.info("Twitter returned: ",tweets); 
    } 
}).send();

如果自己定義了回調函數的參數名稱. 跟jquery一樣.
服務器端你需要這樣去取得:

Js代碼

代碼如下:

String callback = request.getParameter("jsoncallback");//取得回調方法名 
        response.setHeader("Cache-Control", "no-cache"); 
        response.setContentType("text/json;charset=UTF-8"); 
        PrintWriter out; 
        try { 
            out = response.getWriter(); 
            out.print(callback+"("+message+")");//這里是關鍵.主要就是這里 
            out.flush(); 
            out.close(); 
        } catch (IOException e) { 
            e.printStackTrace(); 
        }

順便說一句: 個人比較喜歡mootools的語法結構,和框架設計思路. 再次贊美!

Dojo JSONP
JSONP 在Dojo Toolkit 中需要用上dojo.io.script (點擊可以查看示例)

Js代碼

代碼如下:

// dojo.io.script is an external dependency, so it must be required 
dojo.require("dojo.io.script"); 

// When the resource is ready 
dojo.ready(function() { 

    // Use the get method 
    dojo.io.script.get({ 
        // The URL to get JSON from Twitter 
        url: "http://search.twitter.com/search.json", 
        // The callback paramater 
        callbackParamName: "callback", // Twitter requires "callback" 
        // The content to send 
        content: { 
            q: "Arsenal" 
        }, 
        // The success callback 
        load: function(tweetsJson) {  // Twitter sent us information! 
            // Log the result to console for inspection 
            console.info("Twitter returned: ",tweetsJson); 
        } 
    }); 
});

JSONP是一種非常有效的，可靠的，容易實現的遠程數據獲取方式。JSONP的策略也使開發人員能夠避免繁瑣的服務器代理方式,很方便的獲取數據。

JSONP(JSON with Padding)是一個非官方的協議，它允許在服務器端集成Script tags返回至客戶端，通過javascript callback的形式實現跨域訪問（這僅僅是JSONP簡單的實現形式）。

客戶端代碼：

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  
  <script type="text/javascript">  
    function jsonpCallback(result) {  
      //alert(result);  
      for(var i in result) {  
        alert(i+":"+result[i]);//循環輸出a:1,b:2,etc.  
      }  
    }  
    var JSONP=document.createElement("script");  
    JSONP.type="text/javascript";  
    JSONP.src="http://crossdomain.com/services.php?callback=jsonpCallback";  
    document.getElementsByTagName("head")[0].appendChild(JSONP);  
  </script>

服務端代碼

<?php  
  
    //服務端返回JSON數據  
    $arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);  
    $result=json_encode($arr);  
    //echo $_GET['callback'].'("Hello,World!")';  
    //echo $_GET['callback']."($result)";  
    //動態執行回調函數  
    $callback=$_GET['callback'];  
    echo $callback."($result)";