一、一些概念
①传统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="/UploadFiles/2021-04-02/remote.js">
②服务器端——直接调用客户端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跨域等却是效率颇高的。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 华少翌.2005-华少翌【中唱艺能】【WAV+CUE】
- 群星《十二女声Ⅱ》[WAV/CUE/分轨][527MB]
- 大自然音乐系列《漫步在山裡》[WAV/CUE/分轨][502.8MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]
- 史依弘《史依弘交响乐京剧演唱专辑HQ》头版限量编号[WAV+CUE]
- 曼丽2020《女人三十风继续吹》HQCD[WAV+CUE]
- 曼丽2021《女人三十2雾之恋》HQCD[WAV+CUE]
- 隔壁老樊.2019-我曾【好听音乐】【FLAC分轨】
- 高林生.1993-牵挂你的人是我【白天鹅】【WAV+CUE】
- 洪卓立.2012-找个懂我的女孩(国专)【英皇娱乐】【WAV+CUE】
- 曼丽2022《女人三十3晚秋》HQCD[WAV+CUE]
- 曼丽2018《女人三十4冬天》HQCD[WAV+CUE]
- 柏菲-《好歌30年壹》限量开盘母带ORMCD[低速原抓WAV+CUE]
- 大自然音乐系列《水舞》[WAV/CUE/分轨][424.3MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]