使用JSONP 处理跨域请求

最新推荐文章于 2024-10-17 09:40:47 发布

ycwu3

最新推荐文章于 2024-10-17 09:40:47 发布

阅读量100

点赞数

分类专栏： Jquery 文章标签： javascript json java ViewUI

本文链接：https://blog.csdn.net/ycwu3/article/details/83974533

版权

Jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

注：为了解决实际项目中因跨域访问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/