使用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 表单验证类介绍与实例
Jun 09 Javascript
jQuery $.extend()用法总结
Jun 15 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
实例代码详解jquery.slides.js
Nov 16 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 Javascript
jQuery Plupload上传插件的使用
Apr 19 jQuery
VUE element-ui 写个复用Table组件的示例代码
Nov 18 Javascript
理解Koa2中的async&amp;await的用法
Feb 05 Javascript
JS实现点星星消除小游戏
Mar 24 Javascript
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
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后门URL的防范
2013/11/12 PHP
ThinkPHP 表单自动验证运用示例
2014/10/13 PHP
Zend Framework入门教程之Zend_Session会话操作详解
2016/12/08 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
SUN的《AJAX与J2EE》全文译了
2007/02/23 Javascript
javascript获得CheckBoxList选中的数量
2009/10/27 Javascript
offsetParent 算法分析
2010/04/05 Javascript
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
异步javascript的原理和实现技巧介绍
2012/11/08 Javascript
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
JS获取当前日期时间并定时刷新示例
2021/03/04 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
2016/06/08 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
原生JS发送异步数据请求
2017/06/08 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
JavaScript刷新页面的几种方法总结
2019/03/28 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
Python中shutil模块的学习笔记教程
2017/04/04 Python
Python中关于Sequence切片的下标问题详解
2017/06/15 Python
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
非常震撼的纯CSS3人物行走动画
2016/02/24 HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
美国班级戒指、帽子和礼服、毕业产品、年鉴:Balfour
2018/11/01 全球购物
铲车司机岗位职责
2014/03/15 职场文书
保护环境倡议书
2014/04/14 职场文书
支行行长竞聘演讲稿
2014/05/15 职场文书
2016应届大学生自荐信模板
2016/01/28 职场文书
python基于tkinter制作下班倒计时工具
2021/04/28 Python
php7中停止php-fpm服务的方法详解
2021/05/09 PHP
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python