`

JSONP学习

 
阅读更多

参考资料：

1.http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html

2.http://www.cnblogs.com/lemontea/archive/2012/12/11/2812268.html

 

测试1

前端代码1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>New Web Project</title>
	</head>
	<body>
		<script type="text/javascript">
			function invokeByRemote(data)
			{
				alert("我是本地js函数，我被远端调用，调用方IP:"+data.ip);
			};		
		</script>
		<script type="text/javascript" src="http://10.24.18.118:8080/sunjianWeb/js/remote.js"></script>
	</body>
</html>

 

 

服务器端代码1

var data={};
data.ip = "10.24.18.118";
invokeByRemote(data);

 

测试2

前端代码2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>New Web Project</title>
		<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
		<script type="text/javascript">
			function testCallBack(data)
			{
				alert("你查询快递号:"+data.kuaiDiNumber+"的快递 寄件人是:"+data.sendPerson+" ");
			}
			
			
			function createScript(src) {
                 $("<script><//script>").attr("src", src).appendTo("head");
            }
            
            $(function(){
            	$("#queryButtonId").click(function(){
            		var kuaiDi = $.trim($("#kudiId").val());
            		var srcParam = "http://10.24.18.118:8080/sunjianWeb/jsonPTest2.jsp"
            		             + "?kuaiDiNumber="+kuaiDi
            		             + "&callBackFun=testCallBack";
            		createScript(srcParam);
            	})
            })
		</script>
	</head>
	<body>
		快递号:<input type="text" id="kudiId" />
		<input type="button" value="查询" id="queryButtonId"/>
	</body>
</html

 服务器端代码2

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%

String kuaiDiNumber = request.getParameter("kuaiDiNumber");
String callBackFun = request.getParameter("callBackFun");

System.out.println("kuaiDiNumber:"+kuaiDiNumber+" callBackFun:"+callBackFun);

String jsonStr = "";

//模拟后台查询，这里简单处理，实际可以是后台查询数据库等复杂逻辑
if (kuaiDiNumber.equals("1"))
{
    jsonStr = "{'kuaiDiNumber':'"+kuaiDiNumber+"','sendPerson':'兔斯基'}";
}
else
{
    jsonStr = "{'kuaiDiNumber':'"+kuaiDiNumber+"','sendPerson':'我是MT'}";
}


response.getWriter().write(callBackFun+"("+jsonStr+")");
response.getWriter().flush();
%>

 

 测试3

前端代码3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>New Web Project</title>
		<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
		<script type="text/javascript">
		    /*
		    function testCallBack(data)
			{
				alert("你查询快递号:"+data.kuaiDiNumber+"的快递 寄件人是:"+data.sendPerson+" ");
			}*/
			
			function jqueryJsonPVisit1(urlParam) {
                $.ajax({
		             type: "get",
		             url: urlParam,
		             dataType: "jsonp",
		             //如果不指定jsonp回调函数url中的参数名，默认就是callback
		             //jsonp: "callBackFun",
		             //jsonpCallback:"callBackFun",		             
		             success: function(data){
		                 alert("(Visit1)你查询快递号:"+data.kuaiDiNumber+"的快递 寄件人是:"+data.sendPerson+" ");
		             },
		             error: function(e){
		                 alert('fail');
		             }
		         });
            }
            
            function jqueryJsonPVisit2(urlParam) {
                $.ajax({
		             type: "get",
		             url: urlParam,
		             dataType: "jsonp",
		             //回调函数url中的参数名 后台request.getParameter("callBackFun");
		             jsonp: "callBackFun",
		             //回调函数名称
		             jsonpCallback:"testCallBack",		             
		             success: function(data){
		                 alert("(Visit2)你查询快递号:"+data.kuaiDiNumber+"的快递 寄件人是:"+data.sendPerson+" ");
		             },
		             error: function(e){
		                 alert('fail');
		             }
		         });
            }
            
            $(function(){
            	$("#queryButtonId1").click(function(){
            		var kuaiDi = $.trim($("#kudiId").val());
            		var urlParam = "http://10.24.18.118:8080/sunjianWeb/jsonPTest3.jsp"
            		             + "?kuaiDiNumber="+kuaiDi;
            		             
            		jqueryJsonPVisit1(urlParam);
            	})
            	
            	$("#queryButtonId2").click(function(){
            		var kuaiDi = $.trim($("#kudiId").val());
            		var urlParam = "http://10.24.18.118:8080/sunjianWeb/jsonPTest3A.jsp"
            		             + "?kuaiDiNumber="+kuaiDi;
            		             
            		jqueryJsonPVisit2(urlParam);
            	})
            })
		</script>
	</head>
	<body>
		快递号:<input type="text" id="kudiId" />
		<input type="button" value="查询1" id="queryButtonId1"/>
		<input type="button" value="查询2" id="queryButtonId2"/>
	</body>
</html

 服务器端代码3

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String callBackFun = request.getParameter("callback");
String kuaiDiNumber = request.getParameter("kuaiDiNumber");

System.out.println("kuaiDiNumber:"+kuaiDiNumber+" callBackFun:"+callBackFun);

String jsonStr = "";

//模拟后台查询，这里简单处理，实际可以是后台查询数据库等复杂逻辑
if (kuaiDiNumber.equals("1"))
{
    jsonStr = "{'kuaiDiNumber':'"+kuaiDiNumber+"','sendPerson':'兔斯基'}";
}
else
{
    jsonStr = "{'kuaiDiNumber':'"+kuaiDiNumber+"','sendPerson':'我是MT'}";
}


response.getWriter().write(callBackFun+"("+jsonStr+")");
response.getWriter().flush();
%>

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String callBackFun = request.getParameter("callBackFun");
String kuaiDiNumber = request.getParameter("kuaiDiNumber");

System.out.println("kuaiDiNumber:"+kuaiDiNumber+" callBackFun:"+callBackFun);

String jsonStr = "";

//模拟后台查询，这里简单处理，实际可以是后台查询数据库等复杂逻辑
if (kuaiDiNumber.equals("1"))
{
    jsonStr = "{'kuaiDiNumber':'"+kuaiDiNumber+"','sendPerson':'兔斯基'}";
}
else
{
    jsonStr = "{'kuaiDiNumber':'"+kuaiDiNumber+"','sendPerson':'我是MT'}";
}


response.getWriter().write(callBackFun+"("+jsonStr+")");
response.getWriter().flush();
%>

 

分享到：
| Excel公式字符串拼接
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    学习总结：前端跨域请求的解决办法——JSONP

    为了解决这个问题，开发者们发明了各种跨域解决方案，其中JSONP（JSON with Padding）是一种广泛使用的非官方标准。本文将深入探讨JSONP的工作原理以及如何在实际项目中应用。 ### JSONP简介 JSONP全称是"JSON ...

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

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

    JSONP 实例

    JSONP（JSON with Padding）是一种跨域数据交互协议，它利用了HTML中`&lt;script&gt;`标签可以跨域请求...随着CORS（跨源资源共享）的普及，JSONP的重要性逐渐被CORS取代，但理解JSONP的工作原理对于前端开发者仍然很重要。

    sso-jsonp-demo

    JSONP（JSON with Padding）是一种跨域数据交互协议，它利用了`&lt;script&gt;`标签可以跨域请求资源的特性来实现跨域数据交换。在本示例"ss0-jsonp-demo"中，...这个示例对于理解和学习SSO及JSONP技术具有很好的参考价值。

    JS 使用 JSONP 跨域获取用户IP

    你可以解压`demo`文件查看具体实现，以便更深入地理解和学习JSONP的工作机制。 总结来说，JSONP是通过动态加载跨域的JavaScript脚本来绕过同源策略，获取用户IP的一种技术。在前端，我们需要定义一个回调函数并创建...

    Jsonp应用实例

    描述中提到的学习文档是可运行的，这意味着可能包含了一个演示JSONP工作原理的代码示例，让学习者能够通过实践理解这一概念。 JSONP的工作原理如下： 1. **请求发起**：客户端（通常是浏览器中的JavaScript）创建...

    jquery-jsonp-master.zip_jsonp

    `jquery-jsonp-master.zip`是一个包含jQuery JSONP实现的压缩包，适用于学习和应用轻量级的JSONP解决方案。 首先，我们需要了解JSONP的基本原理。由于同源策略的限制，JavaScript通常不能直接向其他域名发送Ajax...

    跨域jsonp资料包.zip

    JSONP（JSON with Padding）是一种跨域数据交互协议，它利用了浏览器的同源策略限制的漏洞，通过动态创建`&lt;script&gt;`标签来实现...通过学习这个资料包，你可以更好地掌握JSONP的使用技巧，解决实际开发中的跨域问题。

    jsonp 简单示例

    描述中的“自己学习用的jsonp示例，一个页面建立后台方法，另一个页面负责通过js调用”揭示了项目的基本结构。首先，服务器端（后台）会设置一个方法，这个方法能够接收请求并返回JSON格式的数据。这个数据通常是...

    Unigui服务端jsonp.rar

    Unigui是一个基于Delphi开发的跨平台UI...如果你想要学习或实施Unigui服务端的JSONP功能，解压这个文件并研究其中的代码将大有帮助。记得根据你的具体需求进行调整和优化，确保服务端和客户端之间的通信既高效又安全。

    详解JSON和JSONP劫持以及解决方法.docx

    "详解JSON和JSONP劫持以及解决方法" 本文主要介绍了JSON和JSONP劫持的概念...本文旨在帮助读者深入理解JSON劫持和JSONP劫持的概念、攻击过程、解决方法，以及实例代码，希望能够对大家的学习和工作产生实质性的帮助。

    JSONP案例学习

    JSONP（JSON with Padding）是一种在JavaScript中跨域获取数据的技术，主要应用于浏览器环境，由于浏览器的同源策略限制，JavaScript不能直接从不同源获取数据。JSONP巧妙地利用了HTML `&lt;script&gt;` 标签不受同源策略...

    仿百度jsonp写的历史记录和搜索框

    总的来说，仿百度的这个示例涵盖了前端数据交互、本地存储和用户体验优化等多个方面，是学习和实践JavaScript开发技能的好例子。在实际开发中，还可以结合现代前端框架如React、Vue等，进一步提升代码组织和复用性。

    java版 解决跨域问题CORS ajax+jsonp例子源代码.zip

    标题中的“java版 解决跨域问题CORS ajax...通过阅读和分析这些源代码和讨论，开发者可以更好地理解如何在实际项目中处理跨域问题，并学习如何处理相关技术的细节，如JSONP只支持GET请求的限制以及可能出现的编码问题。

    一个用于jsonp请求的小库

    开发者可以通过查看这些源码学习JSONP的工作原理，或者直接在项目中集成和使用这个库。 总结起来，这个小库为JavaScript开发者提供了方便的JSONP请求解决方案，帮助他们克服同源策略的限制，实现跨域数据交换。其...

    android html5 ajax jsonp json

    【描述】：“一个很全的Android实例，有很多demo”，这意味着这个压缩包中包含了多种实际操作的代码样例，帮助开发者理解并掌握如何在Android应用中运用HTML5、jQuery EasyUI、AJAX、JSONP和JSON。这些技术的结合...

    200行代码的泛JSONP解析器

    JSONP（JSON with Padding）是一种跨域数据交互协议，它利用了`&lt;script&gt;`标签可以跨域请求资源的特性，将JSON数据包裹在...通过学习和理解这个解析器，开发者可以更好地掌握JSONP的工作原理，并在实际项目中灵活运用。

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

    作者通过学习和实践，掌握了使用vue-jsonp插件的方法，并解决了遇到的难题。这对读者在类似场景下的开发具有很大的参考价值。希望本文的内容能为需要在Vue项目中进行跨域数据交互的开发者们提供帮助。

    java web支持jsonp的实现代码

    在现代的Web开发中，跨域资源共享（CORS）是经常遇到的问题。在本文中，我们将探讨在Java Web应用中如何实现JSONP（JSON with ...希望本文的内容能够对您的学习和工作有所帮助，也欢迎大家对我们的内容给予支持。

    使用jsonp调用百度的js实现搜索关键字的智能提

    在网页开发中，为了实现跨域数据交互，我们经常使用JSONP（JSON with Padding）技术。...开发者可以通过学习这个案例，掌握JSONP的基本用法，并将其应用于自己的项目中，提升网站的交互性和实用性。

Magicbox
Global site tag (gtag.js) - Google Analytics