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();
%>

猜你喜欢