使用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 相关文章推荐
基于jquery的给文章加入关键字链接
Oct 26 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
Mar 29 Javascript
jQuery实现判断滚动条到底部
Jun 23 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
JavaScript中boolean类型之三种情景实例代码
Nov 21 Javascript
深入理解js中的加载事件
Feb 08 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
Express之托管静态文件的方法
Jun 01 Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 Javascript
微信小程序实现简单表格
Feb 14 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
May 14 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 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
php 空格,换行,跳格使用说明
2009/12/18 PHP
如何利用php array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
php中10个不同等级压缩优化图片操作示例
2016/11/14 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
javascript实现函数柯里化与反柯里化过程解析
2019/10/08 Javascript
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
Python中操作文件之write()方法的使用教程
2015/05/25 Python
PYTHON压平嵌套列表的简单实现
2016/06/08 Python
django使用图片延时加载引起后台404错误
2017/04/18 Python
Python实现ping指定IP的示例
2018/06/04 Python
pandas删除指定行详解
2019/04/04 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
2019/06/17 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
python3实现高效的端口扫描
2019/08/31 Python
Python通过递归函数输出嵌套列表元素
2020/10/15 Python
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
存储过程的优缺点是什么
2015/01/10 面试题
师范毕业生自我鉴定
2014/01/15 职场文书
邮政员工辞职信
2014/01/16 职场文书
安全检查与奖惩制度
2014/01/23 职场文书
幼儿教师考核制度
2014/01/25 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
秋天的图画教学反思
2014/05/01 职场文书
北京奥运会口号
2014/06/21 职场文书
部门经理助理岗位职责
2015/04/13 职场文书
2015年干部教育培训工作总结
2015/05/15 职场文书
家长对学校的意见和建议
2015/06/03 职场文书