JS的跨域问题,我想很多程序员的脑海里面还认为JS是不能跨域的,其实这是一个错误的观点;
有很多人在网上找其解决方法,教其用IFRAME去解决的文章很多,真有那么复杂吗?
其实很简单的,如果你用JQUERY,一个GETJSON方法就搞定了,而且是一行代码搞定。
今天2013年8月2日又抽时间整理了下,修改了优化在线调用的方法。
我这里提供了在线测试调用的功能,方便大家测试。点击查看
其实跨域有两种思路,思路一:就是通过js跨域访问;思路二:是通过后台写代码访问
下面说下两种方法的实现:
思路一:通过js跨域访问
一、服务器端(远程访问段),构造指定的json格式:
代码如下 | 复制代码 |
var url = "http://www.111com.net /CsAjax.do?method=getCrossJson&jsoncallback=?" $.getJSON(url, {www_url:"www.111com.net"}, function(json) { //返回格式: ?(json_data) /*返回数据: ?([{"www_url":"www.111com.net","www_name":"www_name", "items":[{"p_name":"安徽省","p_index":340000},{"p_name":"北京市","p_index":110000}]}]) */ //调用实例:alert(json[0].www_url); }); |
注意:CsAjax.do?method=getCrossJson中,在输出JSON数据时,一定要带参数:jsoncallback,并将获取的内容放到返回JSON数据的前面,假设实际获取的值为Jquery123456_7890123,那么返回的值就是 Jquery123456_7890123([{"www_url":"www.111com.net","www_name":"www_name","items":[{"p_name":"安徽省","p_index":340000},{"p_name":"北京市","p_index":110000}]}]);
这个贴上我的远程端的获取代码java写的其他语言类似参考:
代码如下 | 复制代码 |
String www_url = (String) request.getAttribute("www_url"); String jsoncallback = (String) request.getAttribute("jsoncallback"); if (StringUtils.isBlank(www_url)) { www_url = "www.111com.net"; } JSONObject jsonb = new JSONObject(); jsonb.put("www_url", www_url); jsonb.put("www_name", "爱森家园"); JSONArray items = new JSONArray(); JSONObject item = new JSONObject(); item.put("p_name", "安徽省"); item.put("p_index", 340000); items.put(item); jsonb.put("p_name", "北京市"); jsonb.put("p_index", 110000); items.put(item); jsonb.put("items", items); String json = jsoncallback + "([" + jsonb.toString() + "])"; if (StringUtils.isNotBlank(jsoncallback)) { //将特殊构造的数据:json 返回到页面 } else { //将正常的数据jsonb返回到页面 } |
因为getJSON跨域的原理是把?随机变一个方法名,然后返回执行的,实现跨域响应的目的。
二、客户端实际调用, 下面一个是跨域执行的真实例子(可跨所有域名):
代码如下 | 复制代码 |
|
后台写代码访问
第一种思路有一个缺陷:就是如果需要访问的服务端你无法控制的话,那么你也就无计可施了,所以提供第二种思路,后台通过HttpClient 和 HttpGet 直接访问,
然后在后台获取访问的数据,在做处理,返回到页面即可。
这个可以参考我的文章:有道翻译 使用
jQuery跨域原理
浏览器会进行同源检查,这导致了跨域问题,然而这个跨域检查还有一个例外那就是HTML的
响应值:parseResponse({"Name": "Cheeso", "Rank": 7})
这种方式被称作 JsonP ;(如果链接已经失效请点击这里: JSONP ) ;即:JSON with padding 上面提到的前缀就是所谓的“padding”。 那么 jQuery 里面是怎么实现的呢?
貌似并没有