一、使用场景

  当我们请求非本服务器的资源的时候,浏览器会禁止访问,并提示不允许跨域访问。此时我们可以使用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进行跨域访问的更多相关文章

  1. jsonp实现跨域访问

    要实现JSONP跨域访问,首先就要了解什么是跨域?然后JSONP与JSON的关系? 1.什么是跨域? 跨域简单的说就是一个域名下的程序和另一个域名下的程序做数据交互.比如说:现有一个http://ww ...

  2. 使用jsonp形式跨域访问实现电商平台的左侧导航栏

    电商平台有个具备的左侧商品类目的导航栏的结构. 通过jsonp跨域访问电商平台的后台管理系统商品分类.(主要实现后台Java代码) 实现基本步骤: 1.在后台管理系统中准备相应的json数据. poj ...

  3. 深入了解jsonp解决跨域访问

    在这个项目中,我们做的充分利用jsonp这是一个特点跨界,完成简单的单点登录认证和权限控制的统一.道,各有各的优点.各有各的优点,选择什么方式实现全然取决于我们自己或者项目经理的开发经验,对各种框架的 ...

  4. jsonp实现跨域访问json数据

    前台js function init() { $.ajax({ url: 'http://localhost:8012/index.json', dataType: "jsonp" ...

  5. Jsonp跨域访问

    很早之前看过好几篇跨域访问的文章,然后做项目的时候基本没有遇到跨域访问的问题.不过该来的还是会来,前些天终于让我遇到了.于是重温了一下原理这些,再进行实战.于是现在也敢通过实战后的一些理解来和大家分享 ...

  6. AJax与Jsonp跨域访问

    一.JavaScript的AJax AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML) 设计AJax使用的一种重要技术 ...

  7. 用jQuery与JSONP轻松解决跨域访问的问题

    浏览器端的真正跨域访问,推荐的是目前jQuery $.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的. var qsData = {'searchWord':$("# ...

  8. C# 和Jsonp的一个小demo 用jQuery与JSONP轻松解决跨域访问的问题

    客服端:      在A项目下面 建立一个 JsonpClient.aspx页面,代码如下: <%@ Page Language="C#" AutoEventWireup=& ...

  9. 【AngularJs】---JSONP跨域访问数据传输

    大家会自然想到只有一个字母之差的JSON吧~ JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别,但其实他们根本不 ...

随机推荐

  1. WatiN框架学习

    WatiN 是一个源于 Watir的工具,开源且用于web测试自动化的类库.Web Application Testing in .NET. WatiN 通过与浏览器的交互来实现自动化,使用起来具有轻 ...

  2. Scrum 项目 7.0

    ------------------7.0------------------------------ Sprint回顾 1.回顾组织 主题:“我们怎样才能在下个sprint中做的更好?” 时间:设定 ...

  3. ASP.NET MVC使用input标签上传文件

    有些时间学习了,温习一下ASP.NET MVC了.上传文档是在开发过程中,必须撑握的一个功能.以前上传均是使用第三方控件uploadify来实现,今天使使用VS标准标签input 的type=&quo ...

  4. [水煮 ASP.NET Web API2 方法论](3-4)设置路由可选项

    问题 怎么样创建一个路由,不管客户端传不传这个参数,都可以被成功匹配. 解决方案 ASP.NET WEB API 的集中式路由和属性路由都支持路由声明可选参数. 在用集中式路由中可以通过 RouteP ...

  5. 不经意间网易开源镜像去掉了FreeBSD的镜像

    http://mirrors.163.com/ FreeBSD已经到了这么不招人待见的地步了么? 网易曾经可是FreeBSD的大户啊.

  6. 常用 Git 命令清单(摘录)

    来源:阮一峰的网络日志 网址:http://www.ruanyifeng.com/blog/2015/12/git-cheat-sheet.html 我每天使用 Git ,但是很多命令记不住. 一般来 ...

  7. Hibernate框架的总结

    hibernate 简介:hibernate是一个开源框架,它是对象关联关系映射的框架,它对JDBC做了轻量级的封装,而我们java程序员可以使用面向对象的思想来操纵数据库.hibernate核心接口 ...

  8. Mac OSX 下用 Homebrew 安装 MongoDB 并配置到 WebStorm 中

    1. 安装 Ruby OSX 操作系统内置 Ruby,但如果没有 Ruby,则需先输入以下命令安装能够进行多版本ruby环境安装.管理和切换的命令行工具 RVM. 1.1 安装 RVM 打开终端输入以 ...

  9. request.getRequestDispatcher()的两个方法forward()/include()!!!

    RequestDispatcher rd = request.getRequestDispatcher("/MyServlet");请求转发: rd.forward( reques ...

  10. Javascript中的Label语句

    在javascript中,我们可能很少会去用到 Label 语句,但是熟练的应用 Label 语句,尤其是在嵌套循环中熟练应用 break, continue 与 Label 可以精确的返回到你想要的 ...