VML勾画流程图(三)jsonp跨域调用

sillycat

浏览: 2541847 次
性别:
来自: 成都

最近访客更多访客>>

huageng520

learnmore

u012363178

ymgjava

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jsonp json jQuery Groovy JSP

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}

分享到：

VML勾画流程图(四)db4o存放流程实例数据 | PDFMiner读取pdf文件

2010-04-13 15:24
浏览 2430
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论