苹果手机 ajax不兼容,技术回顾:浏览器兼容性 axios+fetch+ajax
css盒:
box-sizing:content-box;表示标准的盒子模型
box-sizing:border-box表示的是IE盒子模型
box-sizing:padding-box,这个属性值的宽度包含了左右padding+width
经常遇到的浏览器的兼容性有哪些
IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。
//解决方案:
var page = {};
page.x = event.x ? event.x : event.pageX;
page.y = event.y ? event.y:event.pageY;
复制代码
Chrome 中文界面下默认会将小于12px的文本强制按照12px显示,可通过加入CSS属性-webkit-text-size-adjust: none; 解决。
获取目标元素的方法也不同,标准浏览器是event.target,而IE下是event.srcElement
axios
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
复制代码
Vue2.0之后,尤雨溪推荐大家用axios替换JQuery
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范,它本身具有以下特征:
2.支持 Promise API
3.客户端支持防止CSRF
本质上, 借用用户的身份或权限偷偷的完成某些操作。
我们登录了某个 tao.com 购物网站之后,cookie 就会有登录过的标记了。
同域名下的请求http://tao.com/pay?id=123&mon..., 是会带着 cookie 的,server 端就知道已经登录了。
但是此时在其他网站,请求http://tao.com/pay?id=123&mon...,就会带着tao.com的 cookie 。
这是发生 CSRF 攻击的理论基础。
如何防御CSRF:
防御CSRF 有效的手段就是加入各个层级的权限验证.
例如现在的购物网站,只要涉及现金交易,肯定要输入密码
敏感的接口要使用POST请求而不是GET.
4.提供了一些并发请求的接口
Promise.all()方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。
const p = Promise.all([p1, p2, p3]);
p的状态:p1& p2& p3
(注意,如果作为参数的 Promise 实例,自己定义了catch方法,那么它一旦被rejected,并不会触发Promise.all()的catch方法。)
Promise.race()方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例。
只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p的回调函数。
fetch
try {
let response = await fetch(url);
let data = response.json();
console.log(data);
} catch(e) {
console.log("Oops, error", e);
}
复制代码
Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了,参数有点像jQuery ajax。 fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象。
优点:
语法简洁,更加语义化
基于标准 Promise 实现,支持 async/await
更加底层,提供的API丰富(request, response)
缺点:
fetch只对网络请求报错,对400,500都当做成功的请求,服务器返回 400,500 错误码时并不会 reject,只有网络错误这些导致请求不能完成时,fetch 才会被 reject。
fetch默认不会带cookie,需要添加配置项: fetch(url, {credentials: 'include'})
fetch不支持abort
传统 Ajax : XMLHttpRequest(XHR)
优点:jsonp
缺点:
1.本身是针对MVC的编程,不符合现在前端MVVM的浪潮
3.JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常的不合理(采取个性化打包的方案又不能享受CDN服务)
MVVM 的核心是 ViewModel 层,它就像是一个中转站(value converter),负责转换 Model 中的数据对象来让数据变得更容易管理和使用,该层向上与视图层进行双向数据绑定,向下与 Model 层通过接口请求进行数据交互,起呈上启下作用。 完全解耦了 View 层和 Model 层,这个解耦是至关重要的,它是前后端分离方案实施的最重要一环。
对于GET方式的请求,浏览器会把http header和data一并发送出去,服务器响应200(返回数据);
而对于POST,浏览器先发送header,服务器响应100 continue,浏览器再发送data,服务器响应200 ok(返回数据)。
苹果手机 ajax不兼容,技术回顾:浏览器兼容性 axios+fetch+ajax相关推荐
- html 引入js 兼容,JS跨浏览器兼容性解决思路及方案汇总,常见JS兼容性知识点汇总...
上篇文章我们介绍了,处理CSS浏览器兼容性的4个解决方案:浏览器CSS样式初始化.浏览器私有属性,CSS hack语法和自动化插件,有兴趣的可以看看,链接放到本文结尾 本文主要介绍JS的跨浏览器兼容性 ...
- html5谷歌浏览器兼容性,谷歌浏览器怎样打开兼容模式_google浏览器兼容性设置在哪-win7之家...
google谷歌浏览器是现在目前最流行的浏览工具之一,但是在浏览的时候,大部分网页都要兼容模式才可以打开,那么就需要设置兼容模式,很多用户可能还不知道google浏览器兼容性设置在哪吧,为了帮助到大家 ...
- i8本地兼容html5文件,浏览器兼容性
前端开发遇到的浏览器兼容性问题 产生这个问题的主要原因是不同浏览器的内核不同,对网页的解析结果就产生了差异. 解决浏览器兼容性问题,主要从三方面考虑:html,css,js. html部分 1.调用C ...
- php 浏览器 兼容,关于对浏览器兼容性的一点点理解
原来对浏览器兼容性的理解主要是: 1. 要对浏览器兼容性做判断 2. 不是所有浏览器都支持的东西尽量不要用 今天看了QQ空间的一点代码,有所启发: 1. 要善于利用浏览器的一些特性:比如,现在的主流浏 ...
- 浏览器兼容问题 php,浏览器兼容性问题的实例分析
兼容性问题是前端的一个重要部分. 在国内的浏览器中,360浏览器,QQ浏览器等绝大部分都是双核浏览器.双核浏览器即拥有IE兼容内核和非IE极速内核两个内核,分别对应兼容模式和极速模式.兼容模式时使用I ...
- jquery发送ajax请求_复习之Vue用axios发送ajax请求
Axios是一个基于promise的HTTP库. 浏览器支持情况:Chrome.Firefox.Safari.Opera.Edge.IE8+. 官网:https://github.com/axios/ ...
- 如何在使用新技术前评估其浏览器兼容性
这里向大家推荐两个网站:caniuse.com以及html5test.com,大家在使用新技术前,可以在这两个网站上看看浏览器的支持情况,看看自己能不能接受,同时也考虑一下能不能优雅降级. caniu ...
- 各大浏览器兼容性报告
IE、FF、Safari、OP不同浏览器兼容报告
IE.FF.Safari.OP不同浏览器兼容报告 分类:UI前端設計2011-12-05 17:01323人阅读评论(0)收藏举报 IE.FF.Safari.OP不同浏览器兼容报告 1浏览器内核简介 ...
- html浏览器兼容测试工具,13个不同浏览器兼容性测试的免费软件工具
网页制作poluoluo文章简介:这里是网络上传播较多的13个不同操作系统中各色浏览器兼容性测试的软件工具. 前端开发人员最头疼的,莫过于形形色色的浏览器间的兼容性问题.每天绞尽脑汁地为这些本不应该存 ...
最新文章
- 【Socket研究】~。~ Scoket开发蛋疼笔记 Silverlight
- java多模块maven_Maven和Java多版本模块
- Linux(Ubuntu)版本Idea软件字体模糊解决办法
- 【渝粤教育】 国家开放大学2020年春季 2528监督学 参考试题
- Linux各个目录的作用及内容
- [USACO09OCT]热浪Heat Wave
- python计算蛋白质的质量
- asp.net 下拉框绑定值
- navicat激活已过期
- PHPcmsv9采集-PHPcmsv9免费采集-PHPcmsv9自动采集
- Proteus仿真STM32F103R6输出PWM波
- Supervised Sequence Labelling with Recurrent Neural Networks 笔记 -LSTM
- 如何能从自我怀疑中走出来?
- python 自定义时间 加减天数
- 零基础成为网络工程师经验分享,附完整学习路线
- Lambda 表达式详解
- 处理器排行_数字信号处理器价格和库存TOP10排行
- 说说如何安装与配置 jBPM4 开发环境
- MySQL学习路线指南
- (转)中科院理论物理所考研…
热门文章
- 女主是计算机系的师生文,十一本经典师生文:绝对有一本是你没看过的,强推《至此终年》...
- 初中教师资格证计算机试讲教案模板,教案模板| 初中语文教师资格证面试教案模板...
- 斗罗大陆手游怎么换角色
- jQuery实现点击图片放大,鼠标滑轮控制缩放
- 2021年制冷与空调设备运行操作最新解析及制冷与空调设备运行操作新版试题
- stm32定时器实现 微秒延时
- 不就是Java吗 之 接口
- Slub代码流程分析
- 7000G机械软件教程,免费分享
- 物理学和计算机科学交叉,浅谈物理学知识和计算机科学的交叉融合