注：为了解决实际项目中因跨域访问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/
分享到：
相关推荐
PHP AJAX JSONP 实现跨域请求使用实例 在 Web 开发中，跨域请求是指从一个域名下的页面请求另一个域名下的资源，这种情况下，浏览器会限制这种请求，以防止恶意攻击。JSONP（JSON with Padding）是一种解决跨域请求...
**AJAX和JSONP跨域请求的实现过程** 1. **AJAX跨域**: 通常，AJAX请求受到同源策略限制。为实现跨域，我们可以使用CORS（Cross-Origin Resource Sharing）机制。服务器需要在响应头中添加`Access-Control-Allow-...
"jsonp跨域请求"可能是服务器返回的示例数据，模拟了JSONP的跨域请求过程。 总结，JSONP和CORS是解决JavaScript跨域问题的两种主要方法，它们各有优缺点，适用于不同的场景。JSONP简单易用，但安全性较低；CORS则更...
然而，在现代Web应用中，随着CORS（Cross-Origin Resource Sharing，跨源资源共享）的普及，JSONP的重要性有所降低，因为CORS允许更广泛的跨域请求，包括POST等方法，且提供了错误处理机制和安全性。 综上所述，...
jsonp解决跨域 JsonP（JSON with Padding）是一种常用的解决跨域请求的技术。在本文中，我们将详细介绍 JsonP 的原理、作用、优缺点和使用场景。...JsonP 的使用场景非常广泛，例如跨域请求数据、实时更新数据等。
在两个Tomcat服务器之间进行跨域访问演示，我们可以设置CORS（Cross-Origin Resource Sharing）头信息，允许特定的跨域请求。在Tomcat的配置文件（如server.xml）中，我们可以通过添加过滤器或在Servlet中设置响应头...
基于ajax方式的跨域请求jsonp的前后台代码
JSONP（JSON with Padding）是一种跨域数据交互协议，它利用了`<script>`标签可以跨域请求资源的特性，为了解决JavaScript在浏览器端由于同源策略限制无法直接访问不同源的HTTP请求的问题。在本场景中，前端使用...
本篇文章将详细讲解如何利用jQuery的jsonp方法实现Ajax跨域请求，以及如何在服务器端使用.Net的*.handler和WebService来返回JSON数据。 首先，理解JSONP的基本原理。JSONP是一种非官方的协议，通过动态创建`...
总结来说，通过jQuery的AJAX处理跨域请求，主要依赖于CORS和JSONP两种方式。CORS更强大，支持更多类型的请求，但需要服务器配合设置相应头部；JSONP则简单易用，适用于只需GET请求的情况。在实际项目中，开发者应...
然而，Ajax技术在实现动态网页交互时常常需要跨越这个限制，这时就引入了JSONP（JSON with Padding）作为跨域请求的一种解决方案。本文将详细介绍JSONP的工作原理以及如何在ASP.NET网站开发中应用JSONP解决Ajax跨域...
- **发起请求**：使用jQuery的`$.ajax`方法发送GET请求，并设置`dataType`为`"jsonp"`以支持JSONP方式的跨域请求。 - **参数设置**：URL中包含待查询的电话号码，并指定`jsonp`参数为`callback`，这是服务器端期望...
在Web开发中，跨域（Cross-Origin）是一个常见的问题，特别是在使用Ajax进行异步数据交互时。跨域限制是浏览器为了安全原因而设置的一种机制，防止恶意网站通过脚本访问其他站点的数据。本文将深入探讨两种主要的...
知识点三: 使用 JSONP 完成 HTTPS 跨域请求的前提条件 使用 JSONP 完成 HTTPS 跨域请求需要满足以下前提条件： 1. 已配置本机 Java 环境 2. 已安装 Tomcat 6.0 知识点四: 生成服务器证书 使用 Keytool 工具生成...
Ajax JSONP跨域处理是Web开发中的重要技术，通过JSONP，开发者可以在不违反同源策略的前提下实现跨域数据交互。虽然JSONP存在一些限制和安全隐患，但在许多场景下，它仍然是一个实用且有效的解决方案。随着技术的...
JSONP（JSON with Padding）是一种常见的解决JavaScript跨域问题的技术。由于浏览器的同源策略限制，JavaScript通常不能向不同源的服务器...了解和掌握JSONP有助于理解跨域请求的原理，为解决实际问题提供更多的选择。
由于浏览器允许不同源的`<script>`标签加载和执行，开发者可以利用这一点来实现跨域请求。 ### JSONP工作原理 1. **客户端（浏览器）**：在JavaScript中，我们创建一个`<script>`元素，并设置其`src`属性为服务器...
总的来说，Vue项目中使用JSONP抓取跨域数据的步骤包括：安装JSONP库，封装一个返回Promise的`jsonp`函数，处理参数并将它们拼接到URL上，最后通过`originJsonp`发起请求并处理结果。这种方式使得在Vue项目中实现跨域...