`

jsonp

 
阅读更多
使用场景:
    域A调用域B,跨域访问时使用,正常的ajax不可以跨域使用。

项目中场景:
    不同域名的购物车实现—两个不同域商城调用第三个域公用接口,把所有购物车信息保存到此公用域的Cookie。
    而不同域网站调用第三个域公用接口,这属于跨域访问,所以用到jsonp。

jsonp跨域响应时记得把这个响应头加进去 P3P: CP="CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR"

前端js:
    // 使用jsonp发送文本对象(ajax)
    function sendJsonp(controller){

		if($("#message").val()==""){
		    $("#message").css("border","1px solid red");
		    return;
		}else{
		    $("#message").css("border","1px solid gray");
		}
		$.ajax({
		    type: 'GET',
		    url:'<%=basePath%>cookieShare/'+controller,
		    data:{"message":$("#message").val()},
            async: false,
            //headers: {"P3P":"CP=\"CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR\""},
            beforeSend: function(request) {
                request.setRequestHeader("P3P", "CP=\"CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR\"");
            },
		    dataType: "jsonp",
		    //jsonp: "callback", //传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
            //jsonpCallback:"flightHandler", //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
            jsonp: "callbackparam", //服务端用于接收callback调用的function名的 参数   
            jsonpCallback: "success_jsonpCallback", //callback的function名称,服务端会把名称和data一起传递回来   
		    success:function(data){

		    	 $("#status").html("<font color=red>"+ data.number +"</font>");
		    },
		    error:function(data){

		        $("#status").html("<font color=red>ERROR:"+data["status"]+","+data["statusText"]+"</font>");
		        setTimeout(clear,5000);
		    }
		});
    }
    
    // 使用jsonp接收文本对象
    function findJsonp(controller){

		$.ajax({
		    type: 'GET',
		    url:'<%=basePath%>cookieShare/'+controller,
		    //data:{"message":$("#message").val()},
            async: false,
		    dataType: "jsonp",
		    //jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
            //jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
            jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数   
            jsonpCallback: "success_jsonpCallback", //callback的function名称,服务端会把名称和data一起传递回来   
		    success:function(data){

		    	 $("#status").html("<font color=red>" + data.name + ":" + data.value +"</font>");
		    },
		    error:function(data){

		        $("#status").html("<font color=red>ERROR:"+data["status"]+","+data["statusText"]+"</font>");
		        setTimeout(clear,5000);
		    }
		});
    }

    // 使用jsonp发送文本对象(findJsonp)
    function sendGetJSON(controller){

		if($("#message").val()==""){
		    $("#message").css("border","1px solid red");
		    return;
		}else{
		    $("#message").css("border","1px solid gray");
		}
		var message = $("#message").val();
 		$.getJSON('<%=basePath%>cookieShare/' + controller + '?message=' + message  + '&jsoncallback=?', function(data){
 			$("#status").html("<font color=red>"+ data.number +"</font>");
		});
/* 		$.getJSON('cookieShare/sendGetJSON.json?type=1&jsoncallback=?', function(status){
			  alert("123");
		}); */
    }


后端java:
    /**
     * 发送jsonp
     * @param message
     * @return String
     */
    @RequestMapping(value = "sendJsonp.json", method = RequestMethod.GET)
    public void sendJsonp(String message, HttpSession session, HttpServletRequest request, HttpServletResponse response){

    response.setHeader("P3P", "CP=\"CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR\"");

    	Map map = new HashMap<>();
        if ("0".equals(message)){
            CookieUtils.setCookie(response, "number", message, 0);
            map.put("number", "删除cookie,key=number");
        }else{
            CookieUtils.setCookie(response, "number", message, -1);
            map.put("number", "使用默认cookie,key=number,value="+ message);
        }

    	response.setContentType("text/plain");  
        String callbackFunName = request.getParameter("callbackparam");//得到js函数名称  
        try {
        	response.getWriter().write(callbackFunName + "(" + JSON.toJSONString(map) + ")");
        	//response.getWriter().write(callbackFunName + "([ { name:\"John\"}])"); //返回jsonp数据  
        } catch (IOException e) {  
            e.printStackTrace();  
        }  
    }

    /**
     * 查询jsonp
     * @param message
     * @return String
     */
    @RequestMapping(value = "findJsonp.json", method = RequestMethod.GET)
    public void findJsonp(HttpSession session, HttpServletRequest request, HttpServletResponse response){

    	Cookie cookie = CookieUtils.getCookieByName(request, "number");

    	response.setContentType("text/plain");
        String callbackFunName = request.getParameter("callbackparam");//得到js函数名称  
        try {
        	response.getWriter().write(callbackFunName + "(" + JSON.toJSONString(cookie) + ")");

        } catch (IOException e) {  
            e.printStackTrace();  
        }  
    }

    /**
     * 发送jsonp
     * @param message
     * @return String
     */
    @RequestMapping(value = "/sendGetJSON.json")
    public void sendGetJSON(HttpServletRequest request,HttpServletResponse response,Model model, String message){

    	Map map = new HashMap<>();
        if ("0".equals(message)){
            CookieUtils.setCookie(response, "number", message, 0);
            map.put("number", "删除cookie,key=number");
        }else{
            CookieUtils.setCookie(response, "number", message, -1);
            map.put("number", "使用默认cookie,key=number,value="+ message);
        }
        String contentType = "application/json";
        response.setContentType(contentType);

        try{
            String jsoncallback = request.getParameter("jsoncallback");
            String json = jsoncallback + "(" + JSON.toJSONString(map) + ");";
            PrintWriter out = response.getWriter();
            out.print(json);
            out.flush();
            out.close();
        }catch (IOException e){
        	
        }
    }


jsonp是通过动态添加脚本来实现跨域的。不能修改请求头。除非用xhr2.0
http://stackoverflow.com/questions/3350778/modify-http-headers-for-a-jsonp-request
响应时服务器端设置。
分享到:
评论

相关推荐

    json和jsonp数据格式返回

    JSON(JavaScript Object Notation)和JSONP(JSON with Padding)是两种常见的数据交换格式,尤其在Web开发中广泛使用。本文将深入探讨这两种格式的特点、用途以及它们在跨域数据请求中的作用。 **1. JSON简介** ...

    JSONP解决跨域问题

    JSONP(JSON with Padding)是一种跨域数据交互协议,它利用了`&lt;script&gt;`标签可以跨域请求资源的特性,为了解决JavaScript在浏览器端由于同源策略限制无法直接访问不同源的HTTP请求的问题。在本场景中,前端使用...

    Ajax跨域请求解决方案-JSONP

    然而,Ajax技术在实现动态网页交互时常常需要跨越这个限制,这时就引入了JSONP(JSON with Padding)作为跨域请求的一种解决方案。本文将详细介绍JSONP的工作原理以及如何在ASP.NET网站开发中应用JSONP解决Ajax跨域...

    详解如何在Vue项目中发送jsonp请求

    在页面a中由前端发送一个jsonp请求到客户方,得到一个token值 前端得到token值后向自己后端发送一个请求,后端根据token去redis(token的值就是redis里的key)里取值(key=token的值,value=用户信息等)判断用户是否已...

    jsonp示例2则

    在本示例中,我们将深入探讨JSONP的工作原理,以及如何使用Python来实现JSONP服务。 **JSONP的原理** JSONP的核心思想是通过动态插入`&lt;script&gt;`标签,其`src`属性指向提供数据的服务端URL。服务端返回的不是标准的...

    使用JSONP完成HTTP和HTTPS之间的跨域访问

    - **JSONP**:一种允许从一个域加载另一个域中的脚本的技术,它通过动态创建`&lt;script&gt;`标签并插入到DOM中来实现。 - **跨域限制**:浏览器的安全策略之一,限制了从一个源加载的脚本获取或设置另一个源上的资源的...

    JSONP简单调用实例

    JSONP简单调用实例。ASP.NET和纯HTML。jQuery的$.ajax的调用!jsonP说白了,就是在json字符串外面包上一个:参数名称+左右括弧!只是包了个:jsonpCallback() 而已! 相关文章:...

    纯servlet实现JSONP

    在这个纯Servlet实现JSONP的例子中,我们将深入理解JSONP的工作原理,以及如何在Java的Servlet环境中实现这一功能。 首先,让我们了解JSONP的基本概念。JSON(JavaScript Object Notation)是一种轻量级的数据交换...

    jsonp原理.txt

    ### JSONP原理详解 #### 一、什么是JSONP? JSONP(JSON with Padding)是一种用于解决浏览器同源策略限制的方法,允许网页从不同域名的服务器上加载数据。它利用了`&lt;script&gt;`标签不受同源策略限制的特点来实现...

    .net3.5 WCF实现jsonp

    JSONP(JSON with Padding)是一种跨域数据交互协议,它利用了`&lt;script&gt;`标签可以跨域请求资源的特性,将JSON数据包裹在一个JavaScript函数调用中返回,从而实现跨域通信。在.NET 3.5中,Windows Communication ...

    跨域访问解决方法-jsonp

    为了解决这个问题,开发者通常采用JSONP(JSON with Padding)技术。本文将详细探讨JSONP的工作原理以及如何在实际项目中使用它来跨域获取JSON数据。 ### JSONP简介 JSONP全称为"JSON Padding",它并不是JSON的一...

    Ajax结合Jsonp实例

    **Ajax与Jsonp结合在Jquery中的应用** Ajax(Asynchronous JavaScript and XML)技术允许我们在不刷新整个网页的情况下,与服务器进行数据交互,提升用户体验。而Jsonp(JSON with Padding)是解决浏览器同源策略...

    html通过 ajax jsonp跨域请求接收和传送数据

    2. **JSONP跨域**: JSONP的工作方式不同,它不依赖于XMLHttpRequest对象。首先,客户端在HTML页面中定义一个全局函数,如`handleData(data)`。然后,创建一个`&lt;script&gt;`标签,将`src`属性设置为服务器的URL,URL中...

    js跨域jsonp的使用

    然而,为了实现数据交互,开发者们找到了一种名为JSONP(JSON with Padding)的解决方案。本文将深入讲解JSONP的原理及其在解决跨域问题中的应用。 ### JSONP 原理 JSONP 的全称是“JSON with Padding”,它并非一...

    Jsonp+asp.net

    在标题"Jsonp+asp.net"中,我们可以理解为这个项目或教程是关于如何在ASP.NET环境下使用JSONP与前端交互数据的。ASP.NET是微软开发的一种Web应用程序框架,它提供了丰富的功能和工具来构建动态网站、Web应用和服务。...

    Jsonp和java操作

    JSONP (JSON with Padding) 是一种跨域数据交互协议,主要应用于JavaScript中,用来解决浏览器的同源策略(SOP)限制。同源策略限制了JavaScript只能与相同协议、相同域名、相同端口的源进行交互,但JSONP巧妙地利用...

    利用JQuery jsonp实现Ajax跨域请求json数据

    但为了实现数据交互,开发者常使用JSONP(JSON with Padding)这一技术来规避同源策略,实现在客户端跨域获取JSON数据。本篇文章将详细讲解如何利用jQuery的jsonp方法实现Ajax跨域请求,以及如何在服务器端使用.Net...

    本地实现的最简单jsonp例子.zip

    JSONP(JSON with Padding)是一种跨域数据交互协议,它利用了`&lt;script&gt;`标签可以跨域请求资源的特性来实现数据的交换。这个本地实现的最简单jsonp例子旨在帮助初学者更好地理解这一概念。 首先,我们要明确的是,...

    jsonp源码以及jar包

    JSONP(JSON with Padding)是一种跨域数据交互协议,它的基本思想是利用JavaScript函数调用的特性,将数据封装在函数调用中,从而绕过浏览器的同源策略限制。在网页开发中,如果你需要从一个不同的域名下获取数据,...

Global site tag (gtag.js) - Google Analytics