李威 さぽている

小说翻译,日语相关转移至http://blog.hjenglish.com/liwei

2012年1月10日 #

JSONP 跨域原理小解

最近看一些代码时,边看边改代码,发现getJSON这个方法没法正常使用。

1 var sURL= "http://api.xxxxxx.com/services/feeds/   
2    xxxxxxx?format=json&callback=?";
3 $.getJSON(sURL, function(data) {
4 // do something with the JSON data returned
5 }); // end get

究其原因,发现url里有个callback,这里使用的是JSONP,一种跨域技术。
网上搜了下JSONP,多数都是在讲如何使用,而没有说明为什么它能跨域,且没有说明url服务器端的代码时如何生成的。
http://www.west-wind.com/weblog/posts/2007/Jul/04/JSONP-for-crosssite-Callbacks
这方面,上面的文章里有比较详细的描述。

 1 function jsonp(url,callback,name, query)
 2 {                
 3     if (url.indexOf("?"> -1)
 4         url += "&jsonp=" 
 5     else
 6         url += "?jsonp=" 
 7     url += name + "&";
 8     if (query)
 9         url += encodeURIComponent(query) + "&";   
10     url += new Date().getTime().toString(); // prevent caching        
11     
12     var script = document.createElement("script");        
13     script.setAttribute("src",url);
14     script.setAttribute("type","text/javascript");                
15     document.body.appendChild(script);
16 }

客户端的javascript代码会有如上的操作,代码不难,很容易理解,也就是加了一个script标签。

而服务器端会返回
callbackFunction( { "x": 10, "y": 15} );
这样的数据。这其实是一段javascript代码,
callbackFunction是方法名,
{ "x": 10, "y": 15}是参数。客户端代码里必须要有
callbackFunction方法的定义。

 1 public partial class JSONP : System.Web.UI.Page
 2 {
 3     protected void Page_Load(object sender, EventArgs e)
 4     {
 5         if (!string.IsNullOrEmpty(Request.QueryString["jsonp"]) )
 6             this.JsonPCallback();
 7     }
 8 
 9     public void JsonPCallback()
10     {
11         string Callback = Request.QueryString["jsonp"];
12         if (!string.IsNullOrEmpty(Callback))
13         {
14             // *** Do whatever you need
15             Response.Write(Callback + "( {\"x\":10 , \"y\":100} );");
16         }
17 
18         Response.End();
19     }
20 }

之后客户端会调用callbackFunction
使用JQuery的getJSON方法后,callback部分会变成如下形式。
callback=jQuery1710461701650187642_1326201333794&_=1326201356534
callbackFunction自然就是
jQuery1710461701650187642_1326201333794部分了。
返回来的数据也会是jQuery1710461701650187642_1326201333794( { "x": 10, "y": 15} ) 这种形式。

最后JQuery会调用匿名函数
function(data),data即为json数据。

JQuery已经将客户端部分实现了,服务器端也得遵循同样的规则才能实现跨域。


*这里有一点,JQuery如何将匿名函数换名字的?有哪位大侠知道的,请用简单的语言讲解下。

posted @ 2012-01-10 21:30 李威 阅读(336) | 评论 (0)编辑 收藏