【JavaScript】通过封装自己的JSONP解决浏览器的跨域问题(Ajax跨域)
问题引出:要发送Ajax请求,就必须使用HTTP请求?什么是跨域问题?
什么是跨域问题:如果两个页面中的协议、域名、端口、子域名任意有一项不同,两者之间所进行的访问行动就是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源。
如何解决呢?
1. 使用创建DOM元素的方式创建img对象, audio, video, link 这几个对象都支持跨域请求,。
var img = new Image(); img.src = 'http://192.168.1.105:8080?name=zhangsan&age=18';
类似于上面的这种呢?还有其他一些类似的标签,实际上是可以向服务器发送请求的,但是不能拿到返回值
2. 使用link标签, 但是也不能拿到服务器的请求, 然后再试试script这个标签来试试看???
<link rel="stylesheet" href="">
link标签只能支持css的格式,其他格式的内容浏览器是显示不出来的
3. 使用script标签来实现跨域, 也能满足发送数据的要求, 接受数据呢?来测试一下。
var script = document.createElement('script'); script.src = 'http://192.168.1.105:8080?name=zhangsan&age=18'; document.body.appendChild(script); // 开始正式发送请求
经测试,还是真可以的,而且在客户端也成功接受到了数据,这说明我们终于找对了路!
4. 解决没有加载完成就输出的问题( 这样就会等待到script标签加载完成之后执行)
// 在返回数据到客户端之前,先进行字符串拼接 let json = JSON.stringify({ id: 1, name: 'zhangsan', age: 18, gender: 'Male' }); let jsonStr = 'var data = ' + json;
上面的是我们服务器的数据, 我们直接通过字符串拼接json,然后发给浏览器。
console.log(data)
直接输出,我们发现报错了,找不到这个变量???
原因是因为,浏览器自上而下执行代码,如果DOM元素没有加载完毕就输出,坑定会报错的
5.解决没有加载完成就输出的问题( 这样就会等待到script标签加载完成之后执行)
script.addEventListener('load', function () { console.log(data); });
直接绑定个事件不就行了,测试以后还真是可以。
但是,缺点是: 这种方式需要服务器端定义一个全局变量, 从而会污染全局变量, 不太推荐…………
6. 上面的思路逻辑和代码优化, 由于脚本执行过后才可以拿到数据, 上面的代码可以优化吗?
var script = document.createElement('script'); script.src = 'http://192.168.1.105:8080?name=zhangsan&age=18'; document.body.appendChild(script); function callback(data) { console.log(data) }
实现原理: 服务器端实际上是返回了一个callback函数的调用, 类似于callback(jsondata), 因此当且仅当服务器断点数据返回来以后, 下面的这个函数就相当于是自动调用了, 就会直接得到服务器端传回来的数据信息, 从而打印输出数据。
服务器端就是这样的:
let jsonFunc = `callback(${json})`;
7. 代码的继续优化, 可以直接在请求中, 我要自己定义一个函数呢?函数名我要自己指定的方法, 可以直接写在url请求中。
var script1 = document.createElement('script'); var url = 'http://192.168.1.105:8080?name=zhangsan&age=19&callback=callback1'; script1.src = url; document.body.appendChild(script1); function callback1(data) { console.log(data); }
服务器端进行参数解析,换成用户自己定义的函数名字不就行了?
let callback = urlObj.query.callback; let jsonFunc = ''+callback+'' + '('+ json + ')';
到此,浏览器的跨域问题已经基本全部解决。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
Windows下搭建Redis集群
原文: Windows下搭建Redis集群 Redis集群: 如果部署到多台电脑,就跟普通的集群一样;因为Redis是单线程处理的,多核CPU也只能使用一个核, 所以部署在同一台电脑上,通过运行多个Redis实例组成集群,然后能提高CPU的利用率。 在Windows系统下搭建Redis集群: 需要4个部件: Redis、Ruby语言运行环境、Redis的Ruby驱动redis-xxxx.gem、创建Redis集群的工具redis-trib.rb 安装Redis,并运行3个实例(Redis集群需要至少3个以上节点,低于3个无法创建); 使用redis-trib.rb工具来创建Redis集群,由于该文件是用ruby语言写的,所以需要安装Ruby开发环境,以及驱动redis-xxxx.gem 1.下载并安装Redis 其GitHub路径如下:https://github.com/MSOpenTech/redis/releases/ Redis提供msi和zip格式的下载文件,这里下载zip格式 3.0.504版本 将下载到的Redis-x64-3.0.504.z...
- 下一篇
Python Flask学习知识点(五)
timg (9).jpg 从本章开始,逐步引入数据库相关知识点。 关于数据库的工具以及一些入门的知识请自行查找资料学习(例如:创建数据表,数据库可视化工具)。 数据表创建方式 image.png 对于我们开发人员来说,一般推荐使用Code First ,因为可以专注业务模型的设计 而不是数据库设计 , 数据库只是用来存数据的 ,它的表关系应该由我们业务来决定。 那么其他两种数据表创建方式可以自己上网查询相关资料,这里不再赘述。 定义一个模型类 之前提过一个叫做验证层,现在引入模型层(MVC中的M:模型层) 设计模型的思维,应该考虑业务模型,而不要去过多注意数据库的设计,数据库只是存数据的。 app文件夹下新建models文件夹并新建一个名为book.py的模型: image.png 这里使用sqlalchemy这个包来做模型映射,还有一个包叫做flask_sqlalchemy,是flask在sqlalchemy的基础上做了一些自己的封装,待会我们也要用到。 再介绍一个第三方的独立的包:WTFORMS,Flask也针对这个包做了封装并有一个新的包叫做Flask_WTFORMS,以上两个(...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- 设置Eclipse缩进为4个空格,增强代码规范
- Docker安装Oracle12C,快速搭建Oracle学习环境
- CentOS7,CentOS8安装Elasticsearch6.8.6
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题
- SpringBoot2初体验,简单认识spring boot2并且搭建基础工程
- CentOS6,CentOS7官方镜像安装Oracle11G
- CentOS7安装Docker,走上虚拟化容器引擎之路
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7