Ajax跨域(jsonp) 调用JAVA后台
1. JSONP定义
JSONP是英文JSON with Padding的缩写,是一个非官方的协议。它允许在服务器端生成script tags返回至客户端,通过javascript callback的形式来实现站点访问。 JSONP是一种script tag的注入,将server返回的response添加到页面实现特定功能。
2.JSONP由来
要解释JSONP的来由,先要说一下浏览器的“同源策略(SOP:Same Origin Policy)”。 简而言之,就是浏览器限制脚本程序只能和同协议、同域名、同端口的脚本进行交互,这包括共享和传递变量等。cookie的传递也是遵从同样策略。这就造成一些涉及到多个服务器的应用在整合时一些麻烦。跨域访问的问题造成A站点的Ajax代码无法访问B站点的数据。
如何解决跨域访问呢?那就要借助浏览器的一个特性:尽管浏览器不允许页面中的脚本程序跨域读取数据,但却允许HTML引用跨域的资源,如图片,CSS和脚本程序。对于脚本程序的引用比较特殊,它被浏览器解析以后,就和本地的脚本程序别无二致且可立即进行解释并执行。如在B站点的一个js文件,一个简单的提示框:alert(“This is Victor!”);。在A站点引用这个js,这个脚本就会在B站点的应用中执行,显示一个alert信息。由于站外脚本的引用是通过script tag来实现的,而脚本程序又可通过DOM的方式可以对HTML页面的所有标签进行控制(包括动态的创建script标签),这就可以实现通过调用站外程序对本地资源进行更改了。另外,通过<script> 标记的使用,就可从服务端直接返回可执行的JavaScript函数调用或者JSON数据。
3. JSONP原理与实现
首先在客户端注册一个callback, 然后把callback的名字传给服务器。此时,服务器先生成 JSON数据。然后以JavaScript 语法的方式,生成一个function, function名字就是传递上来的参数jsonp.
然后,将JSON数据直接以入参的方式,放置到function中,这样就生成了一段 js 语法的文档,返回给客户端。
最后,在客户端浏览器中解析script标签,并执行返回的JavaScript文档,此时数据作为参数,传入到了客户端预先定义好的回调函数里(动态执行回调函数) 。
具体代码操作:
1,js代码
$.ajax({
url: 'http://192.168.3.49:8080/PORTAL/authCode',
type: 'post',
dataType:'jsonp',
jsonp: "callback",
data: {
"type":'0',
"mobilePhone": $("#tel").val()
},
success:function(data){
alert(data.ret)
settime(obj);
},
error:function(data){
$('#mstr_ck').html("获取验证码失败,请重试!");
$("#error_ck").show();
}
});
2,java代码
@RequestMapping(value = "authCode")
@ResponseBody
public String getMobileAuthCode( HttpServletRequest request, String callback)
throws Exception {
String result = "{'ret':'true'}";
//加上返回参数
result=callback+"("+result+")";
return result;
}
如上:前端调用结果弹出:alert('true')
Ajax跨域(jsonp) 调用JAVA后台的更多相关文章
- 【JS】AJAX跨域-被调用方与调用方解决方案(二)
解决跨域问题 跨域问题说明,参考[JS]AJAX跨域-JSONP解决方案(一) 实例,使用上一章([JS]AJAX跨域-JSONP解决方案(一))的实例 解决方案三(被调用方支持跨域-服务端代码解决) ...
- 【JS】AJAX跨域-JSONP解决方案(一)
AJAX跨域介绍 AJAX 跨域访问是用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面 由于安全方面的原因, 客户端js使用xmlhttprequest只能用来向来源网站发送请求 ...
- jQuery的ajax跨域 Jsonp原理
1.Jsonp Jsonp(json with padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题. Jsonp是为了解决ajax跨域发送http请求出现的,利用S ...
- jQuery $.ajax跨域-JSONP获取JSON数据(转载)
Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示 ...
- ajax跨域jsonp —— javascript
目录 jsonp是什么 jsonp原理 原生js使用jsonp jquery使用jsonp jsonp是什么 jsonp作用:解决跨域问题 为什么有跨域问题? “同源策略限制了从同一个源加载的文档或脚 ...
- 由浅入深学习ajax跨域(JSONP)问题
什么是跨域?说直白点就是获取别人网站上的内容.但这么说貌似又有点混淆,因为通常我们用ajax+php就可以获取别人网站的内容,来看下面这个例子. 来看看跨域的例子,jquery+ajax是不能跨域请求 ...
- ajax跨域jsonp
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...
- ajax跨域请求调用webservice接口
1.WebService 接口编写 步骤:新建web项目=>添加web service=>编写方法接口=>然后发布(本地测试可以直接把这个web service运行起来). 关键如何 ...
- ajax跨域,这应该是最全的解决方案了
前言 从刚接触前端开发起,跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了,16年时也整理过一篇相关文章,但是感觉还是差了点什么,于是现在重新梳理了一下. 个人见 ...
- ajax 跨域----好用的解决方案
一.前言 跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了! 但是感觉还是差了点什么,于是现在重新梳理了一下.个人见识有限,如有差错,请多多见谅 二.前言 关于跨 ...
随机推荐
- javascript 实现函数/方法重载效果
什么是重载? 在C#和JAVA等编程语言中函数重载是指在一个类中可以定义多个方法名相同但是方法参数和顺序不同的方法,以此来实现不同的功能和操作,这就是重载. JS没有重载,只能模拟重载 一般来说,如果 ...
- c#解析json字符串处理(最清晰易懂的方法)
注:博客迁移到csdn,本文最新地址:https://blog.csdn.net/sajiazaici/article/details/77647625 以下为原文 本文是全网第二简单的方法,因为我女 ...
- 正则表达式把所有Paul替换成Ringo:Paul Puala Pualine paul Paul
代码实现如下: <!DOCTYPE html><html><body> <h2>JavaScript Regular Expressions</h ...
- 什么是SQL注入?什么是XSS攻击?什么是CSRF攻击?
1. XSS(Cross Site Script,跨站脚本攻击) 是向网页中注入恶意脚本在用户浏览网页时在用户浏览器中执行恶意脚本的攻击方式. 1.1跨站脚本攻击分有两种形式: 反射型攻击(诱使用户点 ...
- EBS登陆界面IE显示异常
使用在IE浏览登陆EBS时: 在登陆界面,登录和取消的按钮显示异常: 在进入HOME界面时,显示的职责全为undefined. 原因: 由于IE版本的兼容性. 解决方法: 浏览器 菜单->工具- ...
- oracle_How to Recover Data (Without a Backup!)
How to Recover Data (Without a Backup!) It's the classic career-limiting maneuver(职业限制机动): accidenta ...
- tensorflow 模型不兼容
[ERROR] [1533570199.196157]: bad callback: <bound method TLDetector.image_cb of <__main__.TLDe ...
- C 中重载一词中的“重”字读ZHONG4还是CHONG2?
in my opinion: overload: 重zhong4载override overwrite:覆盖,改写,重写.//csdn上有人问过,没有overwrite这个词 http://bbs.c ...
- python接口测试-项目实践(一) 测试需求与测试思路
测试需求: 第三方系统提供了3个接口,需要测试前端显示的字符串里的对应数据与接口数据是否一致. 测试分层: 开发人员的设计:每周从接口取一次数据,拼接完成后保存到数据库.再从数据库取数提供接口给前端开 ...
- swift语言的特点(相对于oc)
1.泛型.泛型约束与扩展: 2.函数式编程: 3.值类型.引用类型: 4.枚举.关联值.元组等其他 上述为swift最大的特点 Another safety feature is that by de ...