使用JavaScript 实现各种跨域的方法


Posted in Javascript onMay 08, 2013

一、一些概念

①传统Ajax:交互的数据格式——自定义字符串或XML描述;

跨域——通过服务器端代理解决。

②如今最优方案:使用JSON格式来传输数据,使用JSONP来跨域。

③JSON:一种数据交换格式。基于纯文本、被原生JS支持。

    格式:两种数据类型描述符:大括号{ }、方括号[ ]。分隔符逗号、映射符冒号、定义符双引好。

④JSONP:一种跨域数据交互协议,非官方。

1、Web页面调用js文件,可跨域。扩展:但凡有src属性的标签都具有跨域能力。

2、跨域服务器 动态生成数据 并存入js文件(通常json后缀),供客户端 调用。

3、为了便于客户端使用数据,形成一个非正式传输协议,称为JSONP。该协议重点是允许用户传递一个callback参数给服务器,然后服务器返回数据时 将此callback参数作为函数名包裹住JSON数据,使得客户端可以随意定制自己的函数来自动处理返回数据。

二、JSONP实现

实例1——客户端单方面接收:

①客户端——在客户端设置创建一个函数对象,名称可为callFunc,用于接收服务器的js数据和对其进行处理。

js数据中的核心是:调用callFunc函数的同时附带着参数,此参数即data对象的值。

<script type="text/javascript">
    var callFunc = function(data){
        alert('远程js文件传来的数据:' + data.result);//data为服务器端的JSON数据对象。
    };
</script>
<script type="text/javascript" src="http://其他域的js文件.com/remote.js"></script>

②服务器端——直接调用客户端js中的函数,并传入数据。
callFunc({"result":"value1"});

实例2——客户端向服务器传送 指定函数名,服务器端接收该函数名 并调用对应函数 将数据以参数形式传入。
<script type="text/javascript">
    // 得到航班信息查询结果后的回调函数
    var flightHandler = function(data){
        alert('你查询的航班结果是:票价 ' + data.price + ' 元,' + '余票 ' + data.tickets + ' 张。');
    };
    // 动态添加链接服务器js文件的script。
// 在url地址中传递了一个code参数匹配JSON数据中的某个key,callback参数则告诉服务器:本地回调函数名为callFuncName。
    var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=callFuncName";
    var script = document.createElement('script');
    script.setAttribute('src', url);
    // 将script元素在网页加载时插入head头部
    document.getElementsByTagName('head')[0].appendChild(script); 
</script>

总结:实现的代码并不复杂,但在实现Ajax跨域、frameset/iframe跨域等却是效率颇高的。
Javascript 相关文章推荐
使用TextRange获取输入框中光标的位
Oct 14 Javascript
在页面上点击任一链接时触发一个事件的代码
Apr 07 Javascript
jquery 弹出层注册页面等(asp.net后台)
Jun 17 Javascript
javascript中不提供sleep功能如何实现这个功能
May 27 Javascript
JavaScript实现的类字典插入或更新方法实例
Jul 10 Javascript
深入理解MVC中的时间js格式化
May 19 Javascript
教你如何在Node.js中使用jQuery
Aug 28 Javascript
vue.js中$watch的用法示例
Oct 04 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 Javascript
Vue 样式切换及三元判断样式关联操作
Aug 09 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 Javascript
jQuery根据纬度经度查看地图处理程序
May 08 #Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 #Javascript
JavaScript 创建运动框架的实现代码
May 08 #Javascript
jQuery输入城市查看地图使用介绍
May 08 #Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
May 08 #Javascript
基于jquery实现拆分姓名的方法(纯JS版)
May 08 #Javascript
jQuery cdn使用介绍
May 08 #Javascript
You might like
桌面中心(四)数据显示
2006/10/09 PHP
5种PHP创建数组的实例代码分享
2014/01/17 PHP
ThinkPHP调用百度翻译类实现在线翻译
2014/06/26 PHP
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
php获取客户端电脑屏幕参数的方法
2015/01/09 PHP
JQuery select标签操作代码段
2010/05/16 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
2011/04/28 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
JavaScript:Array类型全面解析
2016/05/19 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
js转换对象为xml
2017/02/17 Javascript
微信小程序 商城开发(ecshop )简单实例
2017/04/07 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
python开发中module模块用法实例分析
2015/11/12 Python
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
类和结构的区别
2012/08/15 面试题
办公室主任岗位职责
2013/11/08 职场文书
讲座主持词
2014/03/20 职场文书
个人工作能力自我评价
2015/03/05 职场文书
何玥事迹观后感
2015/06/16 职场文书
自信主题班会
2015/08/14 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书
python实现进度条的多种实现
2021/04/29 Python