AJAX跨域请求获取JSON数据

我们都知道，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)";