本地程序代码
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>