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>