使用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 相关文章推荐
Javascript下判断是否为闰年的Datetime包
Oct 26 Javascript
js限制checkbox选中个数以限制六个为例
Jul 15 Javascript
Jquery搜索父元素操作方法
Feb 10 Javascript
JavaScript字符串对象(string)基本用法示例
Jan 18 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
Jun 26 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
javaScript强制保留两位小数的输入数校验和小数保留问题
May 09 Javascript
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
Feb 07 Javascript
关于element-ui表单中限制输入纯数字的解决方式
Sep 08 Javascript
原生js实现贪吃蛇游戏
Oct 26 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代码优化之成员变量获取速度对比
2014/02/28 PHP
php表单请求获得数据求和示例
2014/05/15 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
PHP设计模式之适配器模式原理与用法分析
2018/04/25 PHP
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
JavaScript DOM 学习第三章 内容表格
2010/02/19 Javascript
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
jQuery中data()方法用法实例
2014/12/27 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
简单实现js悬浮导航效果
2017/02/05 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
详解http访问解析流程原理
2017/10/18 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
基于layui数据表格以及传数据的方式
2018/08/19 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
深入浅析JavaScript中的in关键字和for-in循环
2020/04/20 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
python抓取文件夹的所有文件
2018/02/27 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
对python xlrd读取datetime类型数据的方法详解
2018/12/26 Python
Python 合并拼接字符串的方法
2020/07/28 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
比较一下entity bean和session bean
2013/12/27 面试题
后勤副校长自我鉴定
2013/10/13 职场文书
工业自动化毕业生自荐信范文
2014/01/04 职场文书
幼儿园教师培训制度
2014/01/16 职场文书
中学生期末评语
2014/02/03 职场文书
学历公证书范本
2014/04/09 职场文书
计划生育汇报材料
2014/12/26 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android