分类导航

Json 发布时间：2022-04-22 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了跨域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动态给你生成毁掉函数名称。

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

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

jsonp:jsonp,则请求的地址为： http://localhost:8080/crcp/rcp/t99eidt/testjson.do?jsonp=自动生成回调函数名

jsonpCallBACk:callBACkfunction,则请求的地址为：

http://localhost:8080/crcp/rcp/t99eidt/testjson.do?jsonp=callBACkfunction

最后返回前台的是：

callBACkfunction(具体的json值)

其中上述JS实现JSONP代码中，若不是动态拼接script脚本，而是直接写script标签，类似如下：

若这样写的话，通过debug发现，的确正确返回了，但是一直提示找不到回调函数。即使js也提供了回调函数【各个浏览器都测试】

若要通过JS来显示，则通过代码动态create script标签。

JSONP跨域方式，很方便，同时也支持大多部分浏览器，但是唯一缺点是，只支持GET提交方式，不支持其他POST提交。

若URL地址传输的参数过多，如何实现呢？下篇博客会讲解另一种跨域方案CROS原理以及具体调用示例。

大佬总结

以上是大佬教程为你收集整理的跨域JSONP原理及调用具体示例全部内容，希望文章能够帮你解决跨域JSONP原理及调用具体示例所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：jsonp 具体原理域示例调用跨

上一篇: JSON.stringify 语法实例讲解下一篇:JSON.parse()和JSON.stringify()

猜你在找的Json相关文章

json - 前端跨域-JSONP 2022-04-22
jquery+json实现数据列表分页 2019-10-11
jsonp cookie 跨域原理详解 2019-10-11
JSONArray jsonArray解析 2019-10-11
JsonUtils.java 2019-10-11
JSON.parse 和 JSON.stringify 2019-10-11
不需要jsonp进行跨域的web-api (ssl enabled) 2019-10-11
jQuery+AJAX+JSON+Highcharts 可视化数据实战——实时的温度曲线实战 2019-10-11
SBJson 框架使用2 SBJson解析数据解析字典，数组 2019-10-11
sbjson框架使用 jsonDemo1 json操作请求，下载，转码 2019-10-11