正文 

当前位置： 首页 > java > java示例

跨域jsonp原理及调用详细演示样例

yutingliuyl      2022-02-12     276

关键词：

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

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

  JSONP原理
  在同源策略下，在某个server下的页面是无法获取到该server以外的数据的，但img、iframe、script等标签是个例外。这些标签能够通过src属性请求到其它server上的数据。
  而JSONP就是通过script节点src调用跨域的请求。
  当我们通过JSONP模式请求跨域资源时，server返回给client一段javascript代码，这段javascript代码自己主动调用client回调函数。
  举个样例
  clienthttp://localhost:8080訪问serverhttp://localhost:11111/user。正常情况下，这是不同意的。

由于这两个URL是不同域的。

  
  若我们使用JSONP格式发送请求的话？
  http://localhost:11111/user?

callback=callbackfunction

  则server返回的数据例如以下：
  callbackfunction({"id":1,"name":"test"})
  细致看看server返回的数据，事实上就是一段javascript代码。这就是函数名（參数）格式。
  server返回后，则自己主动运行callbackfunction函数。
  因此，client须要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>
  
  server代码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 
    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实现原理及.net下jsonp的实现

...请求到服务端，拿到到服务端返回的数据，因为src是可以跨域的。前端通过src发送跨域请求时在请求的url带上回调函数，服务端收到请求时，接受前端传过来的回掉函数名称，将其拼接成js函数调用返回到前端即可完成跨域请求... 查看详情

jsonp原理及实现跨域方式

今天做页面时，后台给了个接口：https://a.a.com/a/a.json,我页面的上线地址是：http://b.b.com。显而易见，因为浏览器同源策略的限制，通过ajax无法无法取得json的数据。百度百科同源策略，它是由Netscape提出的一个著名的安全策略。... 查看详情

jsonp原理及实现(代码片段)

JSONP原理及实现1概述2优点3缺点4实现1概述JSONP是是一种跨域通信的手段，它可以让网页从别的域名（网站）中获取数据，即跨域读取数据，兼容性好，但是只能处理GET请求。它的原理是利用script标签的src属... 查看详情

jsonp原理及实现(代码片段)

JSONP原理及实现1概述2优点3缺点4实现1概述JSONP是是一种跨域通信的手段，它可以让网页从别的域名（网站）中获取数据，即跨域读取数据，兼容性好，但是只能处理GET请求。它的原理是利用script标签的src属... 查看详情

jsonp详细原理之一

/*script标签是不存在跨域请求的，类似的还有img，background:url,link 你可以想象一下，平时的这些标签都是可以直接引入外部资源的，所以是不存在跨域问题的*/functiongetData(res){ console.log(res.data); } /*这里创建一个JS标签，相当于... 查看详情

jsonp原理详解

...生的：一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准。不过我们又发现，Web页面上调用js文件时则不受是否跨域的影响（不仅如... 查看详情

jsonp的原理

...呢？1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准。2、不过我们又发现，Web页面上调用js文件时则不受是否跨域的影响（不... 查看详情

vue--jsonp的诞生原理及应用实例

...数据变换的需求。但是，Ajax有一个缺点，就是他不允许跨域请求资源。如果我的代码在codepen上，我不能将我的数据放到codepen网站上，那么我只能放到我自己的服务器中，这样的话，就无法通过Ajax访问到这个数据了。解决：想... 查看详情

jsonp原理详解(代码片段)

...的：1、一个众所周知的问题，ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态页面、web服务、WCF，只要是跨域请求，一律不准。2、不过我们又发现，web页面上调用js文件时则不受跨域的影响（不仅如... 查看详情

原生javascript里jsonp的实现原理

ajax不能跨域，jsonp可以跨域跨域的核心思想：     调用（拿到的接口），定义（jsonp核心处理器）分别是不同的script标签里面进行跨script取数据(只有get方式进行取数据) jsonp传进来的数据是{url:‘‘,data:{ ... 查看详情

现开发项目遇见难题及解决方案记录

一.ajax跨域的问题 因为之前没参与过web开发，所以面临着ajax不能跨域的问题。网友给出的解决方案是提交的dataTpye写jsonp。看了下jsonP的原理，必须建立在原服务器内设有callback函数的前提下才能访问。且jsonp不认识json，就算... 查看详情

原生javascript里jsonp的实现原理

ajax不能跨域，jsonp可以跨域跨域的核心思想：     调用（拿到的接口），定义（jsonp核心处理器）分别是不同的script标签里面进行跨script取数据(只有get方式进行取数据) jsonp传进来的数据是{url:‘‘,data:{ ... 查看详情

js跨域原理及解决方案

方法一：jsonp函数在HTMLDOM中,Script标签是可以跨域访问服务器上的数据的.因此,可以指定script的src属性为跨域的url,基于script标签实现跨域.script标签本身就可以访问其它域的资源，不受浏览器同源策略的限制，可以通过在页面动态... 查看详情

jsonp跨域实现

...<script>节点的方法向不同域提交HTTP请求的方法。JSONP跨域的基本原理：由于script标签不受浏览器同源策略的影响，允许跨域引用资源。因此，通过动态创建script标签，然后利用src属性进行跨域。JSONP的优点：不受同源策略的... 查看详情

jsonp原理及其简单封装(代码片段)

...JSONP1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准；2、不过我们又发现，Web页面上调用js文件时则不受是否跨域的影响（不... 查看详情

jsonp原理，怎样实现跨域？

...JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。我们拿最近比较火的谍战片来打个比方，JSON是地下党们用来书写和交换情 查看详情

jsonp跨域原理

<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"></head><body> <inputtype="button"value="点击请求"> <scriptsrc="jquery.min.js"></script> <sc 查看详情

解决ajax跨域问题-jsonp原理解析

解决Ajax跨域问题-JSONP原理解析为什么会有跨域问题？-因为有同源策略同源策略是浏览器的一种安全策略，所谓同源指的是请求URL地址中的协议,域名和端口都相同，只要其中之一不相同就是跨域同源策略主要为了保证浏览器的安... 查看详情