ajax跨域jsonp AJAX跨域请求获取JSON数据

我们都知道，由于受到浏览器的限制，AJAX 是不允许跨域请求。不过可以通过使用 JSONP 来实现。JSONP 是一种通过脚本标记注入的方式，它是可以引用跨域 URL 的 js 脚本，不过需要提供一个回调函数（必须在您自己的页面上），因此，你可以自己处理结果。 本文介绍了 JSONP 的是怎么在 jQuery，MooTools 的，Dojo Toolkit 中实现的。 

jQuery 的 JSONP

1. 什么是 JSONP

要了解 JSONP，不得不提一下 JSON，那什么是 JSON？

JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the language with no muss or fuss.

JSONP(JSON with Padding) 是一个非官方的协议，它允许在服务器端集成 Script tags 返回至客户端，通过 javascript callback 的形式实现跨域访问（这仅仅是 JSONP 简单的实现形式）。

2. JSONP有什么用

由于同源策略的限制，XmlHttpRequest 只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过 script 标签实现跨域请求，然后在服务端输出 JSON 数据并执行回调函数，从而解决了跨域的数据请求。

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)";

相关教程

AJAX教程