文档章节

Ajax使用JSONP实现跨域请求

别寒
 别寒
发布于 2015/01/21 14:17
字数 945
阅读 86
收藏 2

在web开发中大量使用Ajax技术,其中不可避免的遇到跨域的问题,Ajax直接请求数据存在跨域问题 ,不管你是动态页面、静态页面、web服务,只要是跨域请求,一概不准。基于这种情况,于是出现了JSONP。

Ajax中,一般是使用JSON的格式来交换数据,这里说的JSONP与JSON是有区别的,简单的说,JSON是一种数据格式,而JSONP是一种非官方的跨域数据交互协议。


JSON的产生:

1、一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准;

2、不过我们又发现,Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>);

3、于是可以判断,当前阶段如果想通过纯web端(ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算)跨域访问数据就只有一种可能,那就是在远程服务器上设法把数据装进js格式的文件里,供客户端调用和进一步处理;

4、恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据,更妙的是JSON还被js原生支持,所以在客户端几乎可以随心所欲的处理这种格式的数据;

5、这样子解决方案就呼之欲出了,web客户端通过与调用脚本一模一样的方式,来调用跨域服务器上动态生成的js格式文件(一般以JSON为后缀),显而易见,服务器之所以要动态生成JSON文件,目的就在于把客户端需要的数据装入进去。

6、客户端在对JSON文件调用成功之后,也就获得了自己所需的数据,剩下的就是按照自己需求进行处理和展现了,这种获取远程数据的方式看起来非常像AJAX,但其实并不一样。

7、为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。


JSONP的实现:

    服务端返回的数据:

    

flightHandler({    "code": "CA1998",    "price": 1780,    "tickets": 5});


    客户端发送的请求(Ajax):

  $.ajax({
     type: "get",
     async: false,
     url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
     dataType: "jsonp",
     jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
     jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据,注意到没?这个名称需要和服务器返回的名称一致
     success: function(json){
	 alert('您查询到航班信息:票价: ' + json.price + ' 元,余票: ' + json.tickets + ' 张。');
     },
     error: function(){
	 alert('fail');
     }
 });

至此,Ajax跨域就完美解决了!!!


最后,值得注意的是,jquery的API中,JSONP格式的时候,是不支持同步的,所以ajax的async:false,属性是无效的。造成的缺点就是success中的数据我们无法返回,只能在回调函数中处理。

© 著作权归作者所有

上一篇: 微信支付
下一篇: javascript实现弹幕
别寒
粉丝 30
博文 272
码字总数 138741
作品 0
永州
程序员
私信 提问
PHP判断ajax请求:HTTP_X_REQUESTED_WITH

有时我们需要判断是不是ajax请求来决定模块输出还是json格式输出. PHP判断ajax请求的原理: 在发送ajax请求的时候,我们可以通过XMLHttpRequest这个对象,创建自定义的header头信息, 在jquer...

鬼方赤命
2016/11/22
31
0
JSONP跨域的原理解析

JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略)。这一策略对于JavaScript代码能够访问的页...

武文海
2016/03/21
24
0
JSONP原理优缺点(只能GET不支持POST)

JSONP的优点是:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中都 可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕...

BearCatYN
2015/06/04
0
0
前端筑基篇(一)->ajax跨域原理以及解决方案

说明 本文内容较老,而且已经不再更新,最新更新请移步 http://www.jianshu.com/p/82b82d5dd1ea 跨域主要是由于浏览器的“同源策略”引起,分为多种类型,本文主要探讨Ajax请求跨域问题 前言 ...

撒网要见鱼
2016/09/21
0
0
简单透彻理解JSONP原理及使用

什么是JSONP 首先提一下JSON这个概念,JSON是一种轻量级的数据传输格式,被广泛应用于当前Web应用中。JSON格式数据的编码和解析基本在所有主流语言中都被实现,所以现在大部分前后端分离的架...

菜鸟的进阶
2017/10/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

解决vim打开之后乱码的问题

在Windows中的文档,传输到Linux系统中(使用rz命令),出现乱码 root@localhost ~]# rpm -qf `which iconv` glibc-common-2.17-105.el7.x86_64 [root@localhost ~]# rpm -ihv /mnt/Packages......

寰宇01
27分钟前
1
0
aldi 2017年1月记录

../../tools/CBLAS/lib/cblas_LINUX.a ../../tools/lapack-3.4.2/liblapacke.a \../../tools/lapack-3.4.2/librefblas.a -lgfortran \../../tools/lapack-3.4.2/liblapack.a \../../......

MtrS
28分钟前
2
0
Choerodon如何进行日志收集与告警

作者:董文启 应用程序日志是由软件应用程序记录的事件文件, 它一般包含错误,信息事件和警告。一个良好的日志系统有助于快速发现问题,定位问题,同时也为业务分析起到一定的作用。 传统E...

Choerodon
40分钟前
2
0
js二维码生成插件“jquery.qrcode.min.js”

<!doctype html> <html> <head> <meta charset="utf-8" /> <title>生成二维码</title> <script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></scri......

泉天下
43分钟前
1
0
Spring AOP之同一个对象方法内部自调用导致事务失效问题

对于像我这种喜欢滥用AOP的程序员,遇到坑也是习惯了,不仅仅是事务,其实只要脱离了Spring容器管理的所有对象,对于SpringAOP的注解都会失效,因为他们不是Spring容器的代理类,SpringAOP,就切入不...

xiaomin0322
49分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部