jsonp

lich0079

浏览: 1233945 次
性别:
来自: 上海

最近访客更多访客>>

luowenyong6

wangyy

f51886

xjg9083

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jsonp JavaScript json HTML

1) 什么是JSONP?
JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。

2) 如何使用JSONP?
1. 在客户端调用提供JSONP支持的URL Service，获取JSONP格式数据。
比如客户想访问http://www.myserver.com/myService.aspx?jsonp=callbackFunction

//这个“json”是服务提供端规定好了的字符，不能改 “callbackFunction”是调用者回调的函数，是调用者决定的，可以改
假设客户期望返回JSON数据：[“customername1","customername2"]
那么直正返回到客户端的是: callbackFunction([“customername1","customername2"])

//服务器返回的这个字符串被嵌入在一个<script> 标签里执行
可能的调用方式：

2. 在客户端写callbackFunction函数的实现

<script type="text/javascript">
        function callbackFunction(result)
        {
            var html = '<ul>';
            for(var i = 0; i < result.length; i++)
            {
                html += '<li>' + result[i] + '</li>';
            }
            html += '</ul>';

            document.getElementById('divCustomers').innerHTML = html;
        }
    </script>

function CallJSONPServer(url){                                 // 调用JSONP服务器，url为请求服务器地址

        var oldScript =document.getElementById(url);       // 如果页面中注册了调用的服务器，则重新调用
        if(oldScript){
        oldScript.setAttribute("src",url);
        return;
        }
        var script =document.createElement("script");       // 如果未注册该服务器，则注册并请求之
        script.setAttribute("type", "text/javascript");
        script.setAttribute("src",url);
        script.setAttribute("id", url);
        document.appendChild(script);
    }

=======================================================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>My JSP 'index.jsp' starting page</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">

		<script language="javascript" type="text/javascript"
			src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script type="text/javascript">
    function clickme(){
        $.getJSON('http://localhost:8080/web_test/callServer?callback=?',
                {number:1}, 
                function(data) {
		 	        var items = [];
			      
			        $.each(data, function(key, val) {
			          items.push('<li id="' + key + '">' + val + '</li>');
			        });
			      
			        $('<ul/>', {
			          'class': 'my-new-list',
			          html: items.join('')
			        }).appendTo('body');
                }
		);
    }
    </script>



	</head>

	<body>
		This is my JSP page.
		<br>
		<input type="button" value="clickme" onclick="clickme()"></input>

	</body>
</html>

Request URL:

http://localhost:8080/web_test/callServer?callback=jsonp1299753149125&number=1

server out:

jsonp1299753149125({"a": "b","c":"d","e":"f"})

server public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        response.setContentType("text/html");
        String callback = request.getParameter("callback");
        
        PrintWriter out = response.getWriter();
        out.println(callback+"({\"a\": \"b\",\"c\":\"d\",\"e\":\"f\"})");
        out.flush();
        out.close();
    }

分享到：

jsonp 访问 douban api | solr 安装

2009-11-23 14:10
浏览 2100
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jsonp

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jsonp

评论

发表评论

相关推荐

node npm windows

How to use requirejs in client side

dojo get post demo

dgrid之Grid Pagination 集成分页 后台rest service

angular 1.3.15 表达式bug

书上看来的js闭包列子

犀牛书 & JavaScript Web Applications notes

犀牛书 笔记

点击其他地方隐藏popup窗口

jqgrid 隔行变底色

twitter search jquery plugin

js encodeURIComponent encodeURI decodeURI

jquery hover hasClass insertBefore live blockUI children notice

jquery validate

js 测试 用户名 中文 英文 数字 判断 函数 是否 存在

css 滤镜 路径

jquery取得text,areatext,radio,checkbox,select的值

js 遍历对象属性

jQuery 对Select的操作

国家地区 js 数组

最近访客更多访客>>

dgrid之Grid Pagination 集成分页后台rest service

犀牛书笔记

js 测试用户名中文英文数字判断函数是否存在

css 滤镜路径