使用jsonp进行跨域访问
一、使用场景
当我们请求非本服务器的资源的时候,浏览器会禁止访问,并提示不允许跨域访问。此时我们可以使用jsonp这种请求方式,从其他服务器获取资源。在客户端调用提供jsonp支持的接口,获取jsonp格式的数据。
二、客户端的实现
客户端使用jsp,用js发送ajax请求,代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>jsonp</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
jQuery(document).ready(function() { $.ajax( {
type : "get",
async : false,
url : "http://127.0.0.1:8089/test2/TestServlet?id=1",
dataType : "jsonp",
jsonp : "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback : "Tcallback",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
success : function(json) {
alert('name: ' + json.name + ',age: ' + json.age);
},
error : function() {
alert('fail');
}
}); });
</script>
</body>
</html>
此段代码相当于get请求http://127.0.0.1:8089/test2/TestServlet?id=1&callback=Tcallback .
三、服务器实现
服务器端使用servlet实现,代码如下:
public class TestServlet extends HttpServlet
{ public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
String id = request.getParameter("id");
String callback = request.getParameter("callback");//值为Tcallback
String name = "zhangsan";
int age = 20;
String json = String.format("%s({\"name\":\"%s\", \"age\":%s})",
callback, name, age);//返回的数据
PrintWriter out = response.getWriter();
out.print(json);
out.flush();
out.close();
}
}
使用jsonp进行跨域访问的更多相关文章
- jsonp实现跨域访问
要实现JSONP跨域访问,首先就要了解什么是跨域?然后JSONP与JSON的关系? 1.什么是跨域? 跨域简单的说就是一个域名下的程序和另一个域名下的程序做数据交互.比如说:现有一个http://ww ...
- 使用jsonp形式跨域访问实现电商平台的左侧导航栏
电商平台有个具备的左侧商品类目的导航栏的结构. 通过jsonp跨域访问电商平台的后台管理系统商品分类.(主要实现后台Java代码) 实现基本步骤: 1.在后台管理系统中准备相应的json数据. poj ...
- 深入了解jsonp解决跨域访问
在这个项目中,我们做的充分利用jsonp这是一个特点跨界,完成简单的单点登录认证和权限控制的统一.道,各有各的优点.各有各的优点,选择什么方式实现全然取决于我们自己或者项目经理的开发经验,对各种框架的 ...
- jsonp实现跨域访问json数据
前台js function init() { $.ajax({ url: 'http://localhost:8012/index.json', dataType: "jsonp" ...
- Jsonp跨域访问
很早之前看过好几篇跨域访问的文章,然后做项目的时候基本没有遇到跨域访问的问题.不过该来的还是会来,前些天终于让我遇到了.于是重温了一下原理这些,再进行实战.于是现在也敢通过实战后的一些理解来和大家分享 ...
- AJax与Jsonp跨域访问
一.JavaScript的AJax AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML) 设计AJax使用的一种重要技术 ...
- 用jQuery与JSONP轻松解决跨域访问的问题
浏览器端的真正跨域访问,推荐的是目前jQuery $.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的. var qsData = {'searchWord':$("# ...
- C# 和Jsonp的一个小demo 用jQuery与JSONP轻松解决跨域访问的问题
客服端: 在A项目下面 建立一个 JsonpClient.aspx页面,代码如下: <%@ Page Language="C#" AutoEventWireup=& ...
- 【AngularJs】---JSONP跨域访问数据传输
大家会自然想到只有一个字母之差的JSON吧~ JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别,但其实他们根本不 ...
随机推荐
- .Net魔法堂:史上最全的ActiveX开发教程——自动更新、卸载篇
一.前言 B/S模式的特点之一,客户端版本升级相对简单.快捷,适合产品的快速迭代.而ActiveX组件的自动更新同样也继承了这一优点.下面我们一起来了解吧! 二.二话不说更新ActiveX 1. 设置 ...
- Android开发权威指南(第2版)新书发布
<Android 开发权威指南(第二版)>是畅销书<Android开发权威指南>的升级版,内容更新超过80%,是一本全面介绍Android应用开发的专著,拥有45 章精彩内容供 ...
- 软件测试之黑盒测试:打着手电寻找bug
功能测试,简单的理解就是黑盒测试,就是检测黑盒子,找到里面存在的缺陷. 功能测试新人学习计划: 1. 对于产品的学习---站在客户的角度学习产品.看待问题 测试人员不是简单地按照开发人员的设计文档去撰 ...
- 1215 spring 3 项目更新
列志华 (组长) http://www.cnblogs.com/liezhihua/ 团队guihub https://github.com/LWHTF/OrderingFood 黄柏堂 http:/ ...
- 通过微软的cors类库,让ASP.NET Web API 支持 CORS
前言:因为公司项目需要搭建一个Web API 的后端,用来传输一些数据以及文件,之前有听过Web API的相关说明,但是真正实现的时候,感觉还是需要挺多知识的,正好今天有空,整理一下这周关于解决COR ...
- 关于C#读取MySql数据时,返回DataTable中某字段数据是System.Array[]形式
我在使用C#(VS2008)读取MySql数据库(5.1版本)时,返回的DataTable数据中arrivalDate字段数据显示为System.Array[]形式(程序中没有对返回的数据进行任何加工 ...
- 如何高效部署前端代码,如css,js...
看了网上一些文章,做了点总结,顺便再加点自己的东西,简单的说下. 1.利用浏览器的304缓存,但是304叫协商缓存,还是需要与服务器通信一次 2.强制使用浏览器使用本地缓存(cache-control ...
- js限制input输入
1.取消按钮按下时的虚线框,在input里添加属性值 hideFocus 或者 HideFocus=true <input type="submit" value=" ...
- java jdk environment variables
1. create system variable 2. edit the system path note: ;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin; 3. cre ...
- Verilog学习笔记设计和验证篇(一)...............总线和流水线
总线 总线是运算部件之间数据流通的公共通道.在硬线逻辑构成的运算电路中只要电路的规模允许可以比较自由的确定总线的位宽,从而大大的提高数据流通的速度.各个运算部件和数据寄存器组可以通过带有控制端的三态门 ...