使用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 相关文章推荐
关于递归运算的顺序测试代码
Nov 30 Javascript
JavaScript 高级篇之函数 (四)
Apr 07 Javascript
JS实现根据当前文字选择返回被选中的文字
May 21 Javascript
jquery实现动态改变div宽度和高度
May 08 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 Javascript
8 行 Node.js 代码实现代理服务器
Dec 05 Javascript
详解vue-cli 构建Vue项目遇到的坑
Aug 30 Javascript
移动端效果之IndexList详解
Oct 20 Javascript
vue倒计时刷新页面不会从头开始的解决方法
Mar 03 Javascript
es6函数之尾递归用法实例分析
Apr 25 Javascript
小程序瀑布流组件实现翻页与图片懒加载
May 19 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
第六节 访问属性和方法 [6]
2006/10/09 PHP
php通过数组实现多条件查询实现方法(字符串分割)
2014/05/06 PHP
ThinkPHP5.0框架使用build 自动生成模块操作示例
2019/04/11 PHP
在Laravel中使用MongoDB的方法示例
2019/11/11 PHP
可缩放Reloaded-一个针对可缩放元素的复用组件
2007/03/10 Javascript
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
Javascript实现可旋转的圆圈实例代码
2015/08/04 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
2016/08/29 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
浅谈javascript中遇到的字符串对象处理
2016/11/18 Javascript
使用jQuery卸载全部事件的思路详解
2017/04/03 jQuery
react-native android状态栏的实现
2018/06/15 Javascript
详解JavaScript中操作符和表达式
2018/09/12 Javascript
vue项目前端知识点整理【收藏】
2019/05/13 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
Python处理命令行参数模块optpars用法实例分析
2018/05/31 Python
Python封装成可带参数的EXE安装包实例
2019/08/24 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
学习退步检讨书
2014/09/28 职场文书
2014年加油站站长工作总结
2014/12/23 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书
教师外出学习心得体会
2016/01/18 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书
如何理解PHP核心特性命名空间
2021/05/28 PHP
mysql insert 存在即不插入语法说明
2022/03/25 MySQL