笔记之前先饿补一下Src和Href的区别及应用:
Src:source的缩写,页面加载时同步指向内部或外部资源的位置,资源内容将会嵌入到文档中当前标签所在位置,加载此指定项时会会暂停其他资源的下载,等待此资源下载完成才会进行其他资源下载。这里指定的资源可以为任何域名下的资源,也就是不存在同源问题。
Href:Hypertext Reference的缩写,页面加载时异步指向内部或外部资源位置并与其建立连接,加载此指定项时会继续其他资源的下载。这里指定的资源也可以为任何域名下的资源,不存在同源问题。
同源/非同源区分方式
在访问的路径中,只要协议、域名、端口有任何一个不同,都是一个不同源的地址。
Ajax跨域
在一个域名下使用Ajax技术请求非同源的资源。
一、JSONP Ajax 跨域
1)、原理
Jsonp Ajax 跨域原理很简单,它应用了Src请求的路径可以为非同源资源,srcipt的Src属性指向一个Servlet并为其添加一个callback参数,并需要servelt与它积极配合,返回结果是调用callback指定的JS函数格式,前端执行callback指定的JS函数。
2)、Jquery Jsonp Ajax 跨域例子 基于Spring MVC
前段代码:
jQuery.ajax({ type : "GET", //此访问将会使用GET方式访问 jsonp : "callback", jsonpCallback : "hellowCrossDomain", dataType : "jsonp", url : "", data : "appid=1", async : false, success : function(result){ //会在回调函数执行后 执行 }, error:function(){ } });
//跨域访问服务端成功 回调函数
function hellowCrossDomain(result){
}
以上参数说明:
1、jsoup:‘callback’--> 回调函数参数名称(Parameter的KEY),默认为callback,此参数名可以任意指定。
2、jsonpCallback :"hellowCrossDomain" -->回到函数参数值(Parameter的VALUE),如果不指定系统会为任意指定一个函数名称。
3、 dataType : "jsonp"-->指定反馈参数类型
4、async : false-->用以指定此Ajax是否异步访问,true:异步(默认),false:同步
5、url:""-->访问参数地址
二、java代码
@ResponseBody @RequestMapping(value = "任意URL地址") public String hellowCrossDomain(HttpServletRequest request, HttpServletResponse response){ String jsonpCallback = ""; response.setContentType("text/plain"); jsonpCallback = request.getParameter("callback");//回调函数的参数名称 jsonpCallback+="([{'id':'1'},{'id','2'}])"; //返回列表 return jsonpCallback; }
相关推荐
今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友
使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript也可以实现跨域调用js。 ok,了解了jsonp的原理和应用后,我们看看百度的智能提示是如何做的 在chrome的调试窗口下看看百度搜索...
1、一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准; 2、不过我们又发现,Web页面上调用js文件时则不受是否跨域的影响...
实现方法有多种,本例采用jQuery+Ajax,完成后,在本地调试了一切ok,但是部署到服务器上以后就出现问题了,后台服务调用没有响应,怎么回事?代码没怎么改动,唯一修改的地方就是jQuery的ajax方法中的url地址。难道...
jsonp 解决的是跨域 ajax 调用的问题。为什么要跨域 ajax 调用呢?这样可以在一个应用中直接在前端通过 js 调用另外一个应用(在不同的域名下)的 API。我们在实际应用中也用到了 jsonp ,但之前只知道 jsonp 的一个...
常用的jquery实现跨域调用 $.ajax({ url: "http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/index.php", dataType: "jsonp", jsonp: "callback", context: document.body, success: function(data) { ...
一节主要演示下在JQUERY中的ajax方法怎样通过JSONP进行远程调用,需要的朋友可以参考下
注意一点是,这里是用Jsonp解决ajax的跨域问题,具体的实现其实不是ajax。 1、同源策略 浏览器有一个很重要的概念——同源策略(Same-Origin Policy)。所谓同源是指,域名,协议,端口相同。不同源的客户端脚本...
主要介绍了jquery中的ajax方法怎样通过JSONP进行远程调用,需要的朋友可以参考下
用Jquery中Ajax方式在asp.net开发环境中WebService接口的调用 2、出现的问题 原因分析:浏览器同源策略的影响(即JavaScript或Cookie只能访问同域下的内容); 3、解决方案: (1) JSONP:只支持GET方式 (2) CROS:...
JSONP跨域请求jQuery方式 JSONP跨域请求本质 XSS过滤以及单例模式 博客系统表结构讲解 博客系统功能讲解 CMDB介绍 CMDB实现的三种方式 CMDB Agent客户端示例 第26周 今日内容概要以及CMDB介绍 前端插件定制之表头 ...
实现方法有多种,本例采用jQuery+Ajax,完成后,在本地调试了一切ok,但是部署到服务器上以后就出现问题了,后台服务调用没有响应,怎么回事?代码没怎么改动,唯一修改的地方就是jQuery的ajax方法中的url地址。难道...
虽然在在jquery中,我们可以通过$.ajax的dataType设置为jsonp来调用jsonp,但是jsonp和ajax的实现原理一个关系都木有。jsonp主要是通过script可以链接远程url来实现跨域请求的。如: [removed][removed] callback...
jQuery 1.2 中,您可以跨域加载 JSON 数据,使用时需将数据类型设置为 JSONP。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。数据类型设置为 "jsonp" 时...
跨域请求和dataType: "jsonp"请求不支持同步操作。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。 beforeSend(jqXHR, settings)Function 发送请求前可修改 jqXHR(在jQuery 1.4.x的中,...
很庆幸,我又见到了末日后新升的太阳,所以我还能在这里写文章,言归正传哈,最近做了一个项目,需要用子域名调用主域名下的一个现有的功能,于是想到了用jsonp来解决,在我们平常的项目中不乏有这种需求的朋友,...
跨域请求数据解决方案主要有如下解决方法: ...1、Ajax直接请求普通文件存在跨域无权访问的问题,甭管是静态页面、动态网页、web服务、wcf、只要是跨域请求,一律不行。 2、不过,web页面上调用js文件时则不受
在使用JQuery的Ajax从服务器请求数据或者向服务器发送数据时常常会遇到跨域无法请求的错误,常用的解决办法就是在Ajax中使用JSONP。基于安全性考虑,浏览器会存在同源策略,然而[removed]标签却具有跨域访问数据的...
移动计划者用户输入街道地址和城市名称。 输出将是地址的背景图片,有关位置的《纽约时报》数据和有关位置的... 它是jQuery AJAX调用与 :简单的一种 :您需要输入API密钥才能使用它 :JSONP用于解决跨域问题。