jsonp在jsp中的使用

本地程序代码　　

 1 <div id="jsonpData"></div>
 2 <script type="text/javascript">
 3     var callbackFunction = function(result){
 4         var html=‘<ul>‘;
 5         for(var i=0;i<result.length;i++){
 6             html+=‘<li>‘+result[i].name+"</li>";
 7         }
 8         html+=‘</ul>‘;
 9         document.getElementById("jsonpData").innerHTML=html;
10     }
11 </script>
12 <script type="text/javascript"src="http://localhost:8080/JsonpCallBackProjectindex.jsp?callback=callbackFunction"></script>//调用另一个程序的某个页面。如指定返回时调用的函数名

远程程序代码

1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2     pageEncoding="UTF-8"%>
3 <%
4     response.setContentType("text/html,charset=utf-8");
5     String callback=request.getParameter("callback");　　//获取到数据返回时调用的函数名
6     response.getWriter().print(callback+"([ { name:\"跨域访问成功！\"},{ name:\"跨域访问失败！\"}])");　//直接用print的方式输出javascript调用函数并传值。这样在调用方的javascript代码中就相当于调用了此函数。
7 %>

请求数据方，也可以使用jquery来请求数据

 1 <script>
 2     $.getJSON("http://www.w3cschool.cc/try/ajax/jsonp.php?jsoncallback=?", function(data) {
 3
 4     　　var html = ‘<ul>‘;
 5     　　for(var i = 0; i < data.length; i++)
 6     　　{
 7       　　  html += ‘<li>‘ + data[i] + ‘</li>‘;
 8    　　 }
 9   　　  html += ‘</ul>‘;
10
11    　　 $(‘#divCustomers‘).html(html);
12 　　});
13 </script>