深入了解jsonp解决跨域访问

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

这不是一项凭空产生的新东西。不过JS的一个特性而已之前没有被我们提及也没有被我们注意到原来常常使用的js还能够跨域呢,觉的我们对已经学过的东西理解还不是不够深入、有些肤浅,JS绝大多数在浏览器中执行完毕各种动态效果,开发js的人一開始应该就考虑到了浏览器的特性。为了不受浏览器的限制而将js赋予了这一个神圣的职责,浏览器的限制是安全策略里面的一个策略,叫同源策略。

同源策略

同源的意思是协议、域名、port都同样,仅仅要有一个不同样那么就是不同源的訪问地址。一个浏览器的一个页面中是不能够从不同源的地址获取数据的,当每次页面载入时浏览器都会自己主动推断获取的数据是否来自一个源地址。假设不是会受到浏览器的阻止。

好像会议的安检一样,仅仅同意某一类有通行证的人进入,其它的则不会让进入阻止在外面,而js有一个特性能够跨过安检通过特殊途径进入不受阻止。

解决同源策略问题jsonp

Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”,能够让网页从别的网域获取资料。

之所以叫jsonp能够理解为主要作用和目的就是从别的网域获取json格式数据,这是它的主要应用方面,其他的作用临时没实用到。

原理

原理也非常easy理解,它之所以能够跨域是利用了script标签的跨域能力。试想?你有没有想过常常引入的一个普通js文件。它是怎么样载入到页面中去的为什么它的src属性写上一个地址就能够把别处的js文件载入到页面上呢。经測试这个src属性能够填写随意有效的地址。即使不在同一个项目文件夹结构中的文件也是能够的。

比如这个链接;

<span style="font-size:14px;"><script type="text/javascript" src="_js/jquery-2.0.0.min.js"></script></span>

它仅仅是一个引用,载入进来的文件时非常多这种函数function(){}………………,同理jsonp就是这样一种模式。它返回的也是js函数同上面这个链接没有什么差别。仅仅是函数名叫做回调函数需预定义好,函数里面是返回的json数据。我们来看一个实例:

<span style="font-size:14px;">	<script type="text/javascript">

		function getjson(json)
		{
			alert("通过src属性获得json="+json.result);
		}
	</script>

	<script type="text/javascript" src="http://localhost:28080/application1/login.do?

method=loginInterface&callback=getjson&name=lilongsheng"></script></span>

这是我自己写的一个js标签。它的src地址是还有一个tomcat中部署的application1应用的登录接口地址。而上面调用是在还有一个tomcat中的application2 jsp页面,属于不同源调用,再来看一下application1中接口类

<span style="font-size:14px;">    public ActionForward loginInterface(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response)
    {

    	/** 推断是否登录成功 */
		boolean isLogin = false;
		//从用URL中获取username和password
    	String name=request.getParameter("name");
    	String pwd=request.getParameter("pwd");
		try {
			//回调函数名
			String callbackFunName = request.getParameter("callback");
			//利用jsonp包装的json数据
			String data = callbackFunName + "({\"result\":\"" + name + "\"})";

			System.out.println(data);
			//返回到界面
			print(data,request,response);

		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
    }</span>

返回结果为gejson({"result":"lilongsheng"}),返回的是一个JS代码,它会自己主动运行getjson这个函数。而花括号{}里面的内容正好当做參数传递到这个函数里面,完毕跨域调用。

从上面能够看出通过script标签能够从不同源的地方获得json数据。

我们再来看看jquery是怎样使用的,只在方法中增加一个參数就能够实现,感觉简单了非常多,这是由于框架已经为我们封装好了里面的一些细节调用关系。只要我们设置了參数它就支持跨域訪问,调用例如以下:

<span style="font-size:14px;">		function getJsonp()
		{
			var name=$("#name").val();
			var pwd=$("#pwd").val();
			$.ajax({
				url:"http://localhost:28080/application1/login.do?method=loginInterface&name="+name+"&pwd="+pwd,
				type:"post",
				dataType:"jsonp",
				jsonp : 'callback',
				success:function(data){
					alert(data.result);
				},
				error:function(){
					alert("网络连接失败!

");
				}
			});
		}</span>

除了jquery之外还有ext等框架都支持这一特性,它们都是基于javaScript基础类库封装起来的,因此都具有js具有的特性。

关于jsonp的怎样应用已经录了一集视频,以下是下载地址

jsonp视频演示下载地址:http://pan.baidu.com/s/1dDIjnTR

版权声明:本文博客原创文章。博客,未经同意,不得转载。

时间: 2024-10-07 18:07:16

深入了解jsonp解决跨域访问的相关文章

深入理解jsonp解决跨域访问

在我们做的这个项目中充分利用jsonp跨域这一个特性,完成了简单的单点登录功能和权限统一认证控制,实现思路并不复杂同各种实现单点登录的产品相比可以说微不足道,各有各的好处.各有各的优点,选择什么方式实现完全取决于我们自己或者项目经理的开发经验,对各种框架的理解程度往往决定了目前开发项目的整体架构. 这不是一项凭空产生的新东西,仅仅是JS的一个特性而已之前没有被我们提及也没有被我们注意到原来经常使用的js还可以跨域呢,觉的我们对已经学过的东西理解还不是不够深入.有些肤浅,JS绝大多数在浏览器中运行

解决跨域访问

解决跨域访问的方法 1.用响应头 response.setHeader("Access-Control-Allow-Origin","*");//允许哪些服务器访问 response.setHeader("Access-Control-Allow-Methods","GET POST");//允许的提交方式 2.使用代理 3.JSONP 原理:通过JavaScript标签来访问服务器,并接受服务器返回的数据来实现跨域访问 js

JSONP解决跨域问题,防止表单重复提交,防止XSS攻击

一.跨域问题:能够正常请求,但是没有办法获取到响应结果 解决方案一:设置请求头,在请求的资源中设置Access-Control-Allow-Origin请求头 //3.设置请求头 response.setHeader("Access-Control-Allow-Origin", "*"); 二.JSONP解决跨域问题 普通的跨域访问问题,浏览器会进行拦截,凡是src属性的都不会拦截 ajax:http://www.a.com:8080/a/AServlet JSON

jsonp实现跨域访问

要实现JSONP跨域访问,首先就要了解什么是跨域?然后JSONP与JSON的关系? 1.什么是跨域? 跨域简单的说就是一个域名下的程序和另一个域名下的程序做数据交互.比如说:现有一个http://www.zq.com和http://www.qt.com两个独立的网站,要实现从后一个网站向前一个网站中取数据.把做为数据来源的当作服务端,把去获取数据的当作客户端,实现面向服务的编程. 在动态网页当中,最重要的一项就是取数据.如果是在同一个项目中,将网站挂在同一个域名下,这种情况下无论是前台Ajax还

使用jsonp进行跨域访问

一.使用场景 当我们请求非本服务器的资源的时候,浏览器会禁止访问,并提示不允许跨域访问.此时我们可以使用jsonp这种请求方式,从其他服务器获取资源.在客户端调用提供jsonp支持的接口,获取jsonp格式的数据. 二.客户端的实现 客户端使用jsp,用js发送ajax请求,代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%

用jQuery与JSONP轻松解决跨域访问的问题【转】

原文地址:http://www.jb51.net/article/46463.htm 好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅了相关资料,算是解决了跨域问题..有必要记下来备忘. 跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,所以通过本机服务器端通过类似httpclient方式完成“跨域访问”的工作,然后在浏览器端用AJAX获取本机服务器端“跨域访问”对应的url.来间接完成跨域访问也是可以的.但很显

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

时间过得好快,又被拉回js战场时, 跨域问题这个伤疤又开疼了. 好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅了相关资料,算是解决了跨域问题..有必要记下来备忘. 跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,所以通过本机服务器端通过类似httpclient方式完成“跨域访问”的工作,然后在浏览器端用AJAX获取本机服务器端“跨域访问”对应的url.来间接完成跨域访问也是可以的.但很显然开发量比较大,但限制

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

客服端:      在A项目下面 建立一个 JsonpClient.aspx页面,代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JsonpClient.aspx.cs" Inherits="WebFrom.JsonpClient" %> <!DOCTYPE html> <html xmlns="http:/

学习 jsonp 解决跨域

转载自http://www.cnblogs.com/qyf404/p/3868611.html 1.起因 js脚本做ajax异步调用的时候,直接请求普通文件存在跨域无权限访问的问题,不管你是静态页面.动态网页.web服务,只要是跨域请求,都无法成功: 如果上句话没明白,我们直接看例子.有两个一模一样的项目,一个webApp01,一个webApp02,分别在两个tomcat里启动,一个端口是8080,一个端口是9080.即两个访问地址是 http://localhost:8080/webApp01