jquery get方式 跨域

Ajax的应用中，由于安全的问题，浏览器默认是不支持跨域调用的。传统解决的方法，包括：（参考http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/）

Local proxy:

Needs infrastructure (can't run a serverless client) and you get double-taxed on bandwidth and latency (remote - proxy - client).

Flash:

Remote host needs to deploy a crossdomain.xml file, Flash is relatively proprietary and opaque to use, requires learning a one-off moving target programming langage.

Script tag:

Difficult to know when the content is available, no standard methodology, can be considered a "security risk".

以上方法都各有缺陷，都不是很好多解决方案。后来出现了一种叫JSON with Padding 的技术，简称 JSONP .（原理参考http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/），应用JSONP可以实现JSON数据的跨域调用。非常的幸运，JQuery1.2以后支持JSONP的应用。下面侧重说明在JQuery中，Json的跨域调用。

      应用JSONP实现Json数据跨域调用，需要服务器端与客户端的合作完成。引用Jquery官方的例子，客户端掉用如下：

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",        function(data){          $.each(data.items, function(i,item){            $("<img/>").attr("src", item.media.m).appendTo("#images");            if ( i == 3 ) return false;          });        });

 

    注意这里调用的地址中jsoncallback=?是关键的所在！其中，符号会被Query自动替换成其他的回调方法的名称，具体过程和原理我们这里不理会。我们关心的是jsoncallback=?起什么作用了？原来jsoncallback=?被替换后，会把方法名称传给服务器。我们在服务器端要做什么工作呢？服务器要接受参数jsoncallback，然后把jsoncallback的值作为JSON数据方法名称返回，比如服务器是JSP,我们会这样做：

 

      ...

      String jsoncallback=request.getParameter("jsoncallback");

      ...

      out.print(jsoncallback+"({/"account/":/"XX/",/"passed/":/"true/",/"error/":/"null/"})");

 

Jquery取得的数据可能如下：

      JQUET0988788({"account":"XX","passed":"true","error":"null"})

 

总结，用JSONP要做两件事：

      1/请求地址加参数：jsoncallback=?

      2/服务器段把jsoncallback的值作为方法名传回来，如JQUET098788(...)

 

 

 

 

一个可以使用的例子：

jquery getJSON方式：

$.getJSON("http://localhost:8080/moneyManager/game/jsonp?jsoncallback=?",
              function(json){
                  alert(json);
            });
    
    });

    

jquery ajax方式：

s$.ajax({
async:false,
url:'http://localhost:8080/moneyManager/game/jsonp',
type: "GET",
dataType: 'jsonp',
jsonp: 'jsoncallback',
timeout: 5000,
success: function (json) {//客户端jquery预先定义好的callback函数,成功获取跨域服务器上的json数据后,会动态执行这个callback函数
     alert(json);
     alert(json);
}
});

 

服务器端：

//得到jsoncallback这个参数

List<String> list = context.getQueryParameters().get("jsoncallback");
  String jsoncallbackFunction = list.get(0);

//返回回调函数，这是一个Strings

  return jsoncallbackFunction+"('abc')";