使用JSONP 处理跨域请求
注：为了解决实际项目中因跨域访问js问题而写的有关jsonp的Demo，记录如下。
?
一、相关定义。
JSONP（JSON with Padding）：JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。?
?
二、JSONP由何演化。
?
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Jsonp的使用</title><script type="text/javascript">function showPrice(data) { alert("Symbol: " + data.symbol + ", Price: " + data.price);}</script><script type="text/javascript">showPrice({symbol: 'IBM', price: 91.42});</script></head><body></body></html>?
三、JSONP的简单使用
?
hellojsonp.jsp 如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>jsonp的用法</title> <script type="text/javascript"> function jsonpCallback(result) { alert(result.msg); } </script> <script type="text/javascript" src="http://192.168.11.139:8081/MyWeb/HelloJsonp?jsonp=jsonpCallback"></script> </head><body></body></html>?后台?HelloJsonp.java ?相关代码?如下:
?
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String jsonData = "{msg:'hello jsonp,haha'}"; String output = "jsonpCallback" + "(" + jsonData + ");"; response.setCharacterEncoding("UTF-8"); response.setContentType("text/javascript"); PrintWriter out = response.getWriter(); System.out.println(output); out.println(output); }?
四、Jquery 对Jsonp的支持。
?
jsonpinjquery.jsp 如下：
?
<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>JSONP IN JQUERY</title><script src="<%=basePath%>js/jquery-1.4.4.js"></script><script type="text/javascript">jQuery.getJSON("http://192.168.11.139:8081/MyWeb/TestJson?callback=?", function(data) { alert("symbol:"+data.symbol+",price:"+data.price);});</script></head><body><h3>JSONP IN JQUERY</h3></body></html>?后台 Servlet TestJson.java 相关代码?如下:
?
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String jsonData = "{'symbol' : 'IBM', 'price' : '91.42'}"; String output = request.getParameter("callback") + "(" + jsonData + ");"; response.setCharacterEncoding("UTF-8"); response.setContentType("text/javascript"); PrintWriter out = response.getWriter(); System.out.println(output); out.println(output); // prints:jsonp1232617941775({"symbol" : "IBM", "price" : "91.42"}); }?
注：
1、http://192.168.11.139:8081/MyWeb/TestJson?为后台处理jsonp 的地址。
2、后台给前台的数据格式要为：jsonp1232617941775({"symbol" : "IBM", "price" : "91.42"})?
(? jsonp1232617941775 为自动生成，后台从前台获取 )
?
?
四、相关参考：http://www.ibm.com/developerworks/cn/web/wa-aj-jsonp1/
?
?
??
?
?
?