【笔记】通过 js——实现 各种跨域
一、一些概念
①传统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> <scripttype="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跨域等却是效率颇高的。
转载于:https://www.cnblogs.com/slowsoul/archive/2013/02/14/2910661.html
【笔记】通过 js——实现 各种跨域相关推荐
- js解决iframe跨域问题
js解决iframe跨域问题 参考文章: (1)js解决iframe跨域问题 (2)https://www.cnblogs.com/qinxuhui/p/12154995.html 备忘一下.
- [转] js前端解决跨域问题的8种方案(最新最全)
[转] js前端解决跨域问题的8种方案(最新最全) 参考文章: (1)[转] js前端解决跨域问题的8种方案(最新最全) (2)https://www.cnblogs.com/chris-oil/p/ ...
- 【JS】AJAX跨域-JSONP解决方案(一)
[JS]AJAX跨域-JSONP解决方案(一) 参考文章: (1)[JS]AJAX跨域-JSONP解决方案(一) (2)https://www.cnblogs.com/h--d/p/11470534. ...
- JS中的跨域问题及解决办法汇总
一.什么是跨域? 在了解跨域之前,首先要知道什么是同源策略(same-origin policy).简单来讲同源策略就是浏览器为了保证用户信息的安全,防止恶意的网站窃取数据,禁止不同域之间的JS进行交 ...
- js中各种跨域问题实战小结
什么是跨域?为什么要实现跨域呢? 这是因为JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.也就是说只能访问同一个域中的资源.我觉得这就有必要了解下javascript中的同源策略 ...
- nuxt.js 本地开发跨域问题(Access-Control-Allow-Origin)及其解决方案
问题描述 现在 web 开发都是前后端分离的年代,前后端分离的好处我就不啰嗦了,进入问题 ==>>> 使用 nuxt.js 本地开发 Vue 项目时,ajax 请求时可能会遇到跨域问 ...
- 两种方式实现js, ajax跨域
2019独角兽企业重金招聘Python工程师标准>>> 做客户端软件或手机应用,没有域,所以要解决跨域通信. 第一种方式就是jsonp 这个大家可以查一下,这里直接贴实例 html代 ...
- js webpack 解决跨域问题_详解webpack-dev-server使用http-proxy解决跨域问题
文档资料 Vue-cli proxyTable 解决开发环境的跨域问题--虽然这篇是写vue的,不过用在webpack-dev-server上也是一样的 http-proxy-middleware-- ...
- Node.js设置CORS跨域请求中多域名白名单的方法
允许跨域请求,主要就是配置Response响应头中的 Access-Control-Allow-Origin 属性为你允许该接口访问的域名. 最常见的设置是: res.header('Access-C ...
最新文章
- 005,使用Java客户端连接RabbitMQ,构造我们的第一个Publish和Consumer应用
- python类的私有属性_Python 的私有属性和‘受保护的’属性
- 11.6 java中jar包使用
- Java实现话术词槽匹配_知识图谱与KBQA——槽填充
- html教程自适应,Html-自适应
- R语言观察日志(part21)--包的组件之元数据
- c# 向mysql插入数据_C#连接mysql数据库 及向表中插入数据的方法
- ActiveReports 报表应用教程 (15)---报表换肤
- 简单python脚本实例-五个python常用运维脚本面试题实例
- OPNET网络仿真分析-1.2、OPNET安装教程
- 意超级杯尤文小胜AC米兰 C罗获转会后首个冠军
- 一起学习x86/x64知识(一)
- php版寿星万年历,寿星万年历电脑版
- 什么是云计算,云计算的三种类型
- ipfs pubsub代码解读
- 智能窗帘不知选米家?还是Aqara?这些入坑前必备工作智汀来告诉你
- [蓝桥杯][java]信用卡号验证问题
- point类型的数组java_Java基础学习之引用类型数组访问NullPoint问题
- Windows 纤程/协程
- 关注渐冻症|菌群助力探索其发病机理及相关干预措施
热门文章
- C++笔记-VS2015加载Live2D(OpenGL)
- Qt工作笔记-Qt移植到Linux上时提升窗口部件大小写问题(VS上存在的问题)
- Qt工作笔记-各种构造函数汇总以及运算符重载(入门必备)
- Linux学习笔记-Linux下读写文件
- Qt工作笔记-对Qt工作线程的进一步理解
- 5.3矩阵的压缩存储(稀疏矩阵转置和快速转置)
- linux ls不显示total,Linux中使用ls指令时total的意思
- html进度条实现方案,两种进度条实现方案的对比
- mysql 外键_为什么大多数互联网公司不用外键约束
- android webapi 返回html 代码,ANDROID调用VS2013 ASP.NET WEBAPI 返回DATATABLE 注意