使用JavaScript 实现各种跨域的方法
更新时间：2013年05月08日 17:59:18 作者：
本篇文章是对在JavaScript中实现各种跨域方法的介绍。需要的朋友参考下
一、一些概念
①传统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跨域等却是效率颇高的。
相关文章
Mobile Web开发基础之四--处理手机设备的横竖屏问题
这篇文章主要介绍了Mobile Web开发基础之-—处理手机设备的横竖屏，window.orientation属性与onorientationchange事件以及media query方式是开发过程中需要注意到的两种解决方式,需要的朋友可以参考下2017-08-08
这篇文章介绍了ES6基础语法之字符串扩展，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-05-05
Math.pow函数想必大家都知道吧，本例介绍的是与其相反的函数2014-08-08
这篇文章主要介绍了DOM基础教程之使用DOM控制表格的相关资料,需要的朋友可以参考下2015-01-01
JavaScript高级程序设计（第3版）学习笔记8 js函数（中）
接着看函数——这个具有魔幻色彩的对象。在上篇文章中说函数内部属性时，还遗留了一个this内部属性没有解释，不过在说this之前，我想先说一说执行环境和作用域的概念2012-10-10
JS的垃圾回收机制是为了以防内存泄漏，内存泄漏的含义就是当已经不需要某块内存时这块内存还存在着，垃圾回收机制就是间歇的不定期的寻找到不再使用的变量，并释放掉它们所指向的内存。下面我们来一起深入学习一下吧2019-06-06
这篇文章主要为大家介绍了javaScript获取对象中非空的属性实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
这篇文章主要介绍了JavaScript的21条基本知识点的相关资料,需要的朋友可以参考下2014-03-03
本文是学习笔记系列的第一篇，跟以前一样，介绍些基础知识，包括js基本概念、 JScript 的变量、js的数据类型、3.JScript 的运算符、js流程控制、js函数。有需要的朋友可以参考下2014-09-09
简介JavaScript中用于处理正切的Math.tan()方法
这篇文章主要介绍了简介JavaScript中用于处理正切的Math.tan()方法,是JS入门学习中的基础知识,需要的朋友可以参考下2015-06-06
最新评论