最近看一些代码时,边看边改代码,发现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服务器端的代码时如何生成的。
这方面,上面的文章里有比较详细的描述。
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如何将匿名函数换名字的?有哪位大侠知道的,请用简单的语言讲解下。