使用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)虽然只有一个字母的差别,但其实他们根本不 ...
随机推荐
- mysql 行锁一则
CREATE TABLE `t1` ( `id` int(11) NOT NULL DEFAULT '0', `name` varchar(20) DEFAULT NULL, PRIMAR ...
- 解决tomcat was unable to start within问题
这个问题可能大家都熟悉,以前碰到这个问题,重新启动一次eclipse就好了,随着我的一个项目的增大,我发现这种情况越来越多,到底是怎么回事? 出现这个情况的原因有两个,要么是你的数据库连接connec ...
- 详细讲解PHP中缓存技术的应用
PHP,一门最近几年兴起的web设计脚本语言,由于它的强大和可伸缩性,近几年来得到长足的发展,php相比传统的asp网站,在速度上有绝对的优势,想mssql转6万条数据php如需要40秒,asp不下2 ...
- 根据Expander的IsExpanded属性值的变化动态设计Control的size
简要说明: 当Expander 的IsExpanded属性为“True” 时给控件设个尺寸(此处为高度),当为“False”时给控件设另外一个值. 知识点:数据绑定.Style和Trigger < ...
- sql server 2008出现评估期已过的问题
我的sql server2008用来半年吧,那天的昨天还能用,到了180天后,就不能用了,具体问题如下: 出了这个问题后,就打不开sql server了 解决方法: 1.打开安装中心,升级sql se ...
- Linux命令详解之–cd命令
cd命令是linux实际使用当中另一个非常重要的命令,本文就为大家介绍下Linux中cd命令的用法. 更多Linux命令详情请看:Linux命令速查手册 Linux cd命令用于切换当前工作目录至 d ...
- 安全协议:SSL、TSL、SSH概述
SSL(Secure Socket Layer--安全套接字层):为网络通信安全以及数据完整性提供保障的一种安全协议,在TCP/IP的传输层对网络连接进行加密: TSL(Transport Layer ...
- [Android] 环境配置之基础开发环境(SDK/Android Studio)(转)
[Android] 环境配置之基础开发环境(SDK/Android Studio) 博客: blog.csdn.net/qiujuer 网站: www.qiujuer.net 开源库: Geniu ...
- 养只爬虫当宠物(Node.js爬虫爬取58同城租房信息)
先上一个源代码吧. https://github.com/answershuto/Rental 欢迎指导交流. 效果图 搭建Node.js环境及启动服务 安装node以及npm,用express模块启 ...
- C# 如何使用 svcutil.exe 创建 WCF 客户端代码
工具:svcutil.exe 参数:指定wsdl.输出源码文件.输出配置文件 示例: D:\>svcutil.exe http://localhost:8087/DataService/?wsd ...