VML勾画流程图(三)jsonp跨域调用
API文档：
http://api.jquery.com/jQuery.getJSON/
官方网站的测试用例，jsonp_demo1.html:
<!DOCTYPE html>
<html>
<head>
<style>img{ height: 100px; float: left; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="images">
</div>
<script>
$.getJSON(
"http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});
</script>
</body>
</html>
我本机测试的JSP用例，客户端jsonp_demo2.html:
<html>
<head>
<title>jsonp</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$.getJSON("http://localhost:8080/easyworkflow/test/jsonp_demo2_data.jsp?callback=?", //调用JSONP
function(json){
alert(json[0].name);
}
);
</script>
</head>
<body>
This is my HTML page. <br>
</body>
</html>
服务端测试页面，jsonp_demo2_data.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<% String callback=request.getParameter("callback"); %>
<% out.print(callback + "([ { name:'John中文字幕'}])");%>
改写了一下jquery的格式,jsonp_demo3.html:
<html>
<head>
<title>jsonp</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$.ajax({
async:false,
url: 'http://localhost:8080/easyworkflow/test/jsonp_demo3_data.jsp', // 跨域URL
type: 'GET',
dataType: 'jsonp',
jsonp: 'jsoncallback', //默认callback
timeout: 10000,
success: function (json) {
//客户端jquery预先定义好的callback函数，成功获取跨域服务器上的json数据后，
//会动态执行这个callback函数
alert(json[0].name);
}
});
</script>
</head>
<body>
This is my HTML page. <br>
</body>
</html>
数据文件jsonp_demo3_data.jsp问价如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<% String jsoncallback=request.getParameter("jsoncallback"); %>
<% out.print(jsoncallback + "([ { name:'John中文字幕'}])");%>
并将代码改为groovy的，而不是jsp的，jsonp_demo3.html如下：
<html>
<head>
<title>jsonp</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$.ajax({
async:false,
url: 'http://localhost:8080/easyworkflow/groovy.do?method=jsonpsample', // 跨域URL
type: 'GET',
dataType: 'jsonp',
jsonp: 'jsoncallback', //默认callback
timeout: 10000,
success: function (json) {
//客户端jquery预先定义好的callback函数，成功获取跨域服务器上的json数据后，
//会动态执行这个callback函数
alert(json[0].name);
}
});
</script>
</head>
<body>
This is my HTML page. <br>
</body>
</html>
groovy文件的内容GroovyController.groovy如下：
@RequestMapping(params = "method=jsonpsample")
public ModelAndView jsonpsample(HttpServletRequest request,
HttpServletResponse response) throws IOException {
ModelAndView view = new ModelAndView("jsonpView");
String jsoncallback = request.getParameter("jsoncallback");
String jsonp = jsoncallback + "([{name:'John'}])";
System.out.println(jsonp);
view.addObject("jsonp",jsonp);
return view;
}
要展示的文件，jsonpView.vm如下：
#set($layout = "layout/layout_empty.vm")
${jsonp}
API文档：
http://api.jquery.com/jQuery.getJSON/
官方网站的测试用例，jsonp_demo1.html:
<!DOCTYPE html>
<html>
<head>
<style>img{ height: 100px; float: left; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="images">
</div>
<script>
$.getJSON(
"http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});
</script>
</body>
</html>
我本机测试的JSP用例，客户端jsonp_demo2.html:
<html>
<head>
<title>jsonp</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$.getJSON("http://localhost:8080/easyworkflow/test/jsonp_demo2_data.jsp?callback=?", //调用JSONP
function(json){
alert(json[0].name);
}
);
</script>
</head>
<body>
This is my HTML page. <br>
</body>
</html>
服务端测试页面，jsonp_demo2_data.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<% String callback=request.getParameter("callback"); %>
<% out.print(callback + "([ { name:'John中文字幕'}])");%>
改写了一下jquery的格式,jsonp_demo3.html:
<html>
<head>
<title>jsonp</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$.ajax({
async:false,
url: 'http://localhost:8080/easyworkflow/test/jsonp_demo3_data.jsp', // 跨域URL
type: 'GET',
dataType: 'jsonp',
jsonp: 'jsoncallback', //默认callback
timeout: 10000,
success: function (json) {
//客户端jquery预先定义好的callback函数，成功获取跨域服务器上的json数据后，
//会动态执行这个callback函数
alert(json[0].name);
}
});
</script>
</head>
<body>
This is my HTML page. <br>
</body>
</html>
数据文件jsonp_demo3_data.jsp问价如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<% String jsoncallback=request.getParameter("jsoncallback"); %>
<% out.print(jsoncallback + "([ { name:'John中文字幕'}])");%>
并将代码改为groovy的，而不是jsp的，jsonp_demo3.html如下：
<html>
<head>
<title>jsonp</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$.ajax({
async:false,
url: 'http://localhost:8080/easyworkflow/groovy.do?method=jsonpsample', // 跨域URL
type: 'GET',
dataType: 'jsonp',
jsonp: 'jsoncallback', //默认callback
timeout: 10000,
success: function (json) {
//客户端jquery预先定义好的callback函数，成功获取跨域服务器上的json数据后，
//会动态执行这个callback函数
alert(json[0].name);
}
});
</script>
</head>
<body>
This is my HTML page. <br>
</body>
</html>
groovy文件的内容GroovyController.groovy如下：
@RequestMapping(params = "method=jsonpsample")
public ModelAndView jsonpsample(HttpServletRequest request,
HttpServletResponse response) throws IOException {
ModelAndView view = new ModelAndView("jsonpView");
String jsoncallback = request.getParameter("jsoncallback");
String jsonp = jsoncallback + "([{name:'John'}])";
System.out.println(jsonp);
view.addObject("jsonp",jsonp);
return view;
}
要展示的文件，jsonpView.vm如下：
#set($layout = "layout/layout_empty.vm")
${jsonp}
8991
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
