js跨域请求的5中解决方式


Posted in Javascript onJuly 02, 2015

跨域请求数据解决方案主要有如下解决方法:

JSONP方式
表单POST方式
服务器代理
Html5的XDomainRequest
Flash request

分开说明:

一、JSONP:

直观的理解:

就是在客户端动态注册一个函数

function a(data),然后将函数名传到服务器,服务器返回一个a({/*json*/})到客户端运行,这样就调用客户端的

function a(data),从而实现了跨域.

诞生背景:

1、Ajax直接请求普通文件存在跨域无权访问的问题,甭管是静态页面、动态网页、web服务、wcf、只要是跨域请求,一律不行。

2、不过,web页面上调用js文件时则不受此影响

3、进一步推广,我们发现,凡是拥有Src属性的标签都有跨域能力,如:<script><img><iframe>

4、于是,当前如果想通过纯web端(ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算)跨域访问数据,就只能使用如下方式:就是在远程服务器上设法把数据装进js格式的文本里,供客户端调用和进一步处理。

5、JSON就是一种纯字符数据格式,且能呗js原生支持。

6、这样解决方案出炉:web客户端通过与调用脚本一模一样的方式,来调用跨域服务器上动态生成的js格式文件(一般以json为后缀)。

7、客户端在对json文件调用成功后,也就得到了所需数据,剩下的就是按照自己的需求进行处理了。

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

具体实现:

不管jQuery也好,extjs也罢,又或者是其他支持jsonp的框架,他们幕后所做的工作都是一样的,下面我来循序渐进的说明一下jsonp在客户端的实现:

1、我们知道,哪怕跨域js文件中的代码(当然指符合web脚本安全策略的),web页面也是可以无条件执行的。

远程服务器remoteserver.com根目录下有个remote.js文件代码如下:

alert('我是远程文件');

本地服务器localserver.com下有个jsonp.html页面代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
</head>
<body>

</body>
</html>

毫无疑问,页面将会弹出一个提示窗体,显示跨域调用成功。

2、现在我们在jsonp.html页面定义一个函数,然后在远程remote.js中传入数据进行调用。

jsonp.html页面代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script type="text/javascript">
  var localHandler = function(data){
    alert('我是本地函数,可以被跨域的remote.js文件调用,远程js带来的数据是:' + data.result);
  };
  </script>
  <script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
</head>
<body>

</body>
</html>

remote.js文件代码如下:

localHandler({"result":"我是远程js带来的数据"});
运行之后查看结果,页面成功弹出提示窗口,显示本地函数被跨域的远程js调用成功,并且还接收到了远程js带来的数据。很欣喜,跨域远程获取数据的目的基本实现了,但是又一个问题出现了,我怎么让远程js知道它应该调用的本地函数叫什么名字呢?毕竟是jsonp的服务者都要面对很多服务对象,而这些服务对象各自的本地函数都不相同啊?我们接着往下看。

3、聪明的开发者很容易想到,只要服务端提供的js脚本是动态生成的就行了呗,这样调用者可以传一个参数过去告诉服务端“我想要一段调用XXX函数的js代码,请你返回给我”,于是服务器就可以按照客户端的需求来生成js脚本并响应了。

看jsonp.html页面的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script type="text/javascript">
  // 得到航班信息查询结果后的回调函数
  var flightHandler = function(data){
    alert('你查询的航班结果是:票价 ' + data.price + ' 元,' + '余票 ' + data.tickets + ' 张。');
  };
  // 提供jsonp服务的url地址(不管是什么类型的地址,最终生成的返回值都是一段javascript代码)
  var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
  // 创建script标签,设置其属性
  var script = document.createElement('script');
  script.setAttribute('src', url);
  // 把script标签加入head,此时调用开始
  document.getElementsByTagName('head')[0].appendChild(script); 
  </script>
</head>
<body>

</body>
</html>

这次的代码变化比较大,不再直接把远程js文件写死,而是编码实现动态查询,而这也正是jsonp客户端实现的核心部分,本例中的重点也就在于如何完成jsonp调用的全过程。

我们看到调用的url中传递了一个code参数,告诉服务器我要查的是CA1998次航班的信息,而callback参数则告诉服务器,我的本地回调函数叫做flightHandler,所以请把查询结果传入这个函数中进行调用。

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

我们看到,传递给flightHandler函数的是一个json,它描述了航班的基本信息。运行一下页面,成功弹出提示窗口,jsonp的执行全过程顺利完成!

4、到这里为止的话,相信你已经能够理解jsonp的客户端实现原理了吧?剩下的就是如何把代码封装一下,以便于与用户界面交互,从而实现多次和重复调用。

什么?你用的是jQuery,想知道jQuery如何实现jsonp调用?好吧,那我就好人做到底,再给你一段jQuery使用jsonp的代码(我们依然沿用上面那个航班信息查询的例子,假定返回jsonp结果不变):

OK,服务器很聪明,这个叫做flightResult.aspx的页面生成了一段这样的代码提供给jsonp.html(服务端的实现这里就不演示了,与你选用的语言无关,说到底就是拼接字符串):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" >
 <head>
   <title>Untitled Page</title>
   <script type="text/javascript" src=jquery.min.js"></script>
   <script type="text/javascript">
   jQuery(document).ready(function(){ 
    $.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');
       }
     });
   });
   </script>
   </head>
 <body>
 </body>
 </html>

是不是有点奇怪?为什么我这次没有写flightHandler这个函数呢?而且竟然也运行成功了!哈哈,这就是jQuery的功劳了,jquery在处理jsonp类型的ajax时(还是忍不住吐槽,虽然jquery也把jsonp归入了ajax,但其实它们真的不是一回事儿),自动帮你生成回调函数并把数据取出来供success属性方法来调用,是不是很爽呀?

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
不同Jquery版本引发的问题解决
Oct 14 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
Dec 25 Javascript
js实现鼠标点击文本框自动选中内容的方法
Aug 20 Javascript
浅谈javascript的Array.prototype.slice.call
Aug 31 Javascript
AngularJS实现元素显示和隐藏的几个案例
Dec 09 Javascript
node.js 动态执行脚本
Jun 02 Javascript
设置jquery UI 控件的大小方法
Dec 12 Javascript
JS验证字符串功能
Feb 22 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
Mar 08 Javascript
使用nvm管理不同版本的node与npm的方法
Oct 31 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
Sep 14 Javascript
mpvue 项目初始化及实现授权登录的实现方法
Jul 20 Javascript
JS实现从连接中获取youtube的key实例
Jul 02 #Javascript
由ReactJS的Hello world说开来
Jul 02 #Javascript
深入理解JavaScript的React框架的原理
Jul 02 #Javascript
javascript实现简单的进度条
Jul 02 #Javascript
JavaScript实现添加、查找、删除元素
Jul 02 #Javascript
超级给力的JavaScript的React框架入门教程
Jul 02 #Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
Jul 02 #Javascript
You might like
php学习笔记 数组的常用函数
2011/06/13 PHP
解析php dirname()与__FILE__常量的应用
2013/06/24 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
PHP iconv()函数字符编码转换的问题讲解
2019/03/22 PHP
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
2016/10/08 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
JavaScript表单验证完美代码
2017/03/02 Javascript
JavaScript简单拖拽效果(1)
2017/05/17 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
JavaScript面向对象程序设计创建对象的方法分析
2018/08/13 Javascript
示例vue 的keep-alive缓存功能的实现
2018/12/13 Javascript
JS实现吸顶特效
2020/01/08 Javascript
[07:03]显微镜下的DOTA2第九期——430圣堂刺客杀戮秀
2014/06/20 DOTA
跟老齐学Python之再深点,更懂list
2014/09/20 Python
Python根据区号生成手机号码的方法
2015/07/08 Python
使用Python实现BT种子和磁力链接的相互转换
2015/11/09 Python
Python单例模式的两种实现方法
2017/08/14 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
html5 touch事件实现触屏页面上下滑动(二)
2016/03/10 HTML / CSS
幼儿教师个人求职信范文
2013/09/21 职场文书
实习单位评语
2014/04/26 职场文书
病媒生物防治方案
2014/05/13 职场文书
保护水资源的标语
2014/06/17 职场文书
餐厅周年庆活动方案
2014/08/25 职场文书
辞旧迎新演讲稿
2014/09/15 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书
Python list列表删除元素的4种方法
2021/11/01 Python
vue使用localStorage持久性存储实现评论列表
2022/04/14 Vue.js
MYSQL如何查看操作日志详解
2022/05/30 MySQL