jq+jsonp+ajax解决跨域问题

时间:2024-08-01 12:07:14

Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”,可以让网页从别的网域获取资料。

关于Jsonp更详细的资料请参考http://baike.baidu.com/view/2131174.htm,下面给出例子:

一.客户端

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Insert title here</title>
  6. <script type="text/javascript" src="resource/js/jquery-1.7.2.js"></script>
  7. </head>
  8. <script type="text/javascript">
  9. $(function(){
  10. /*
  11. //简写形式,效果相同
  12. $.getJSON("http://app.example.com/base/json.do?sid=1494&busiId=101&jsonpCallback=?",
  13. function(data){
  14. $("#showcontent").text("Result:"+data.result)
  15. });
  16. */
  17. $.ajax({
  18. type : "get",
  19. async:false,
  20. url : "http://app.example.com/base/json.do?sid=1494&busiId=101",
  21. dataType : "jsonp",//数据类型为jsonp
  22. jsonp: "jsonpCallback",//服务端用于接收callback调用的function名的参数
  23. success : function(data){
  24. $("#showcontent").text("Result:"+data.result)
  25. },
  26. error:function(){
  27. alert('fail');
  28. }
  29. });
  30. });
  31. </script>
  32. <body>
  33. <div id="showcontent">Result:</div>
  34. </body>
  35. </html>

二.服务器端

  1. import java.io.IOException;
  2. import java.io.PrintWriter;
  3. import java.util.HashMap;
  4. import java.util.Map;
  5. import javax.servlet.http.HttpServletRequest;
  6. import javax.servlet.http.HttpServletResponse;
  7. import net.sf.json.JSONObject;
  8. import org.springframework.stereotype.Controller;
  9. import org.springframework.web.bind.annotation.RequestMapping;
  10. @Controller
  11. public class ExchangeJsonController {
  12. @RequestMapping("/base/json.do")
  13. public void exchangeJson(HttpServletRequest request,HttpServletResponse response) {
  14. try {
  15. response.setContentType("text/plain");
  16. response.setHeader("Pragma", "No-cache");
  17. response.setHeader("Cache-Control", "no-cache");
  18. response.setDateHeader("Expires", 0);
  19. Map<String,String> map = new HashMap<String,String>();
  20. map.put("result", "content");
  21. PrintWriter out = response.getWriter();
  22. JSONObject resultJSON = JSONObject.fromObject(map); //根据需要拼装json
  23. String jsonpCallback = request.getParameter("jsonpCallback");//客户端请求参数
  24. out.println(jsonpCallback+"("+resultJSON.toString(1,1)+")");//返回jsonp格式数据
  25. out.flush();
  26. out.close();
  27. } catch (IOException e) {
  28. e.printStackTrace();
  29. }
  30. }
  31. }