跨域JSONP原理及调用具体示例

千古悠悠何所愁

2015-07-20

关注关注

转载自： http://blog.csdn.net/yuebinghaoyuan/article/details/32706277

上篇博客介绍了同源策略和跨域访问概念，其中提到跨域常用的基本方式：JSONP和CORS。

那这篇博客就介绍JSONP方式。

JSONP原理

在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的，但img、iframe、script等标签是个例外，这些标签可以通过src属性请求到其他服务器上的数据。

而JSONP就是通过script节点src调用跨域的请求。

当我们通过JSONP模式请求跨域资源时，服务器返回给客户端一段javascript代码，这段javascript代码自动调用客户端回调函数。

举个例子

客户端http://localhost:8080访问服务器http://localhost:11111/user，正常情况下，这是不允许的。因为这两个URL是不同域的。

若我们使用JSONP格式发送请求的话？

http://localhost:11111/user?callback=callbackfunction

则服务器返回的数据如下：

callbackfunction({"id":1,"name":"test"})

仔细看看服务器返回的数据，其实就是一段javascript代码，这就是函数名（参数）格式。

服务器返回后，则自动执行callbackfunction函数。

因此，客户端需要callbackfunction函数，以便使用JSONP模式返回javascript代码后自动执行其回调函数。

注意：其中url地址中的callback和callbackfunction是随意命名的。

具体的JS实现JSONP代码。

JS中：

[html]view plaincopyprint? 
  <script>  
  var url = "http://localhost:8080/crcp/rcp/t99eidt/testjson.do?jsonp=callbackfunction";   
  var script = document.createElement('script');   
  script.setAttribute('src', url);  //load javascript    
  document.getElementsByTagName('head')[0].appendChild(script);   
  
  //回调函数  
   function callbackfunction(data){  
var html=JSON.stringify(data.RESULTSET);  
alert(html);  
     }  
  </script>  

服务器代码Action：

后台返回的json外面需要由回调函数包裹。具体的方法如下：

[html]view plaincopyprint? 
public class TestJson extends ActionSupport{  
  
    @Override  
    public String execute() throws Exception {  
        try {  
            JSONObject jsonObject=new JSONObject();  
            List list=new ArrayList();  
            for(int i=0;i<4;i++){  
                Map paramMap=new HashMap();  
                paramMap.put("bank_no", 100+i);  
                paramMap.put("money_type", i);  
                paramMap.put("bank_name", i);  
                paramMap.put("bank_type", i);  
                paramMap.put("bank_status", 0);  
                paramMap.put("en_sign_ways", 1);  
                list.add(paramMap);  
            }  
            JSONArray rows=JSONArray.fromObject(list);  
            jsonObject.put("RESULTSET", rows);  
            HttpServletRequest request=ServletActionContext.getRequest();  
            HttpServletResponse response=ServletActionContext.getResponse();  
            response.setContentType("text/javascript");  
              
              
            boolean jsonP = false;  
            String cb = request.getParameter("jsonp");  
            if (cb != null) {  
                jsonP = true;  
                System.out.println("jsonp");  
                response.setContentType("text/javascript");  
            } else {  
                System.out.println("json");  
                response.setContentType("application/x-json");  
            }  
            response.setCharacterEncoding("UTF-8");  
            Writer out = response.getWriter();  
            if (jsonP) {  
                out.write(cb + "("+jsonObject.toString()+")");  
                System.out.println(jsonObject.toString());  
            }  
            else{  
                out.write(jsonObject.toString());  
                 System.out.println(jsonObject.toString());  
            }  
        } catch (Exception e) {  
            e.printStackTrace();  
        }  
         
        return null;  
    }  
}  

JQUERY实现JSONP代码。

Jquery从1.2版本开始也支持JSONP的实现。

[html]view plaincopyprint? 
$(function(){  
     jQuery.getJSON("http://localhost:8080/crcp/rcp/t99eidt/testjson.do?jsonp=?",function(data)  
{   
  var html=JSON.stringify(data.RESULTSET);  
$("#testjsonp").html(html);  
}  
     );   
});  

第一个？代表后面是参数，与咱们一般调用一样。重要的是第二个？，则是jquery动态给你生成毁掉函数名称。

至于后台代码和上述一致，使用同一个后台。

JQUERY中Ajax实现JSONP代码。

[html]view plaincopyprint? 
 $.ajax({  
type:"GET",  
async :false,  
url:"http://localhost:8080/crcp/rcp/t99eidt/testjson.do",  
dataType:"jsonp",  
success:function(data){  
var html=JSON.stringify(data.RESULTSET);  
$("#testjsonp").html(html);  
},  
error:function(){  
alert("error");  
}  
  
});  