JSONP学习

来源：互联网发布：java httpclient请求编辑：程序博客网时间：2024/05/22 14:26

参考资料：

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

阅读全文

0 0