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

  上篇博客介绍了同源策略和跨域访问概念,其中提到跨域常用的基本方式: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中:
   
  <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外面需要由回调函数包裹。具体的方法如下:
  
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的实现。
$(function(){
     jQuery.getJSON("http://localhost:8080/crcp/rcp/t99eidt/testjson.do?jsonp=?",function(data)
{ 
  var html=JSON.stringify(data.RESULTSET);
$("#testjsonp").html(html);
}
     ); 
});
  第一个?代表后面是参数,与咱们一般调用一样。重要的是第二个?,则是jquery动态给你生成毁掉函数名称。
跨域JSONP原理及调用具体示例跨域JSONP原理及调用具体示例
至于后台代码和上述一致,使用同一个后台。

JQUERY中Ajax实现JSONP代码。
     $.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");
    }
   
    });
    注意:这种形式,默认的参数是callback,而不是会是其他。则action代码中获取calback值则
    String cb=request.getParameter("callback");
    并且生成的回调函数,默认也是类似上述一大串数字。
    根据Ajax手册,更改callback名称以及回调函数名称。
    http://www.w3school.com.cn/jquery/ajax_ajax.asp 
    jsonpCallback:callbackfunction,则请求的地址为:
    最后返回前台的是:
    callbackfunction(具体的json值)

    其中上述JS实现JSONP代码中,若不是动态拼接script脚本,而是直接写script标签,类似如下:
   <script type="text/javascript" src=""></script>
   若这样写的话,通过debug发现,的确正确返回了,但是一直提示找不到回调函数。即使js也提供了回调函数【各个浏览器都测试】
   若要通过JS来显示,则通过代码动态create script标签。

   JSONP跨域方式,很方便,同时也支持大多部分浏览器,但是唯一缺点是,只支持GET提交方式,不支持其他POST提交。
   若url地址传输的参数过多,如何实现呢?下篇博客会讲解另一种跨域方案CROS原理以及具体调用示例。

跨域JSONP原理及调用具体示例,布布扣,bubuko.com

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

上一篇:jquery之获取某个元素上的事件


下一篇:[4] D3.js中使用scale(比例)