1.rem,em,px的区别
rem:相对单位,根据根节点html字体大小计算
em:相对单位,基准点为父级字体大小
px:像素,页面按精确展示(绝对单位)
2.移动端视口
视觉视口:用户正在看到的网站区域
理想视口:对设备来说最理想的视觉尺寸
布局视口:网页的宽度,移动端浏览器默认设置
3.如何设置视口
viewport设置
4.viewport的参数
viewport:
width 宽度
height 高度
initial-scale 页面初始缩放值
minimum-scale 页面最小缩放值
maximum-scale:页面的最大缩放值
user-scalable:是否允许用户缩放,值为"yes"或"no"
5.移动端本地存储
cookie
sessionStorage
setItem(key,value)添加
getItem(key,value)获取
removeItem(key)删除
clear()清空
localStorage
6.本地存储的区别
cookie :
- 存储空间太小4k
- 浏览器在发起请求时,会带上请求头,增加客户流量
sessionStorage:
- 存储的数据不会被自动随着请求被发送到服务器
- 存储的空间比cookie大
- 存储数据的周期随着关闭网页,数据也随之删除
localStorage:
- 数据存储量大
- 不会被发送到服务端
- 持久化本地存储,除非手动删除,否则一直存在
- 在同一个域下,所有窗口共享其中存储的数据
7.什么是ajax,及其作用
AJAX=异步JavaScript和XML
ajax是一种用于创建快速动态网页的技术
通过后台与服务器进行少量数据交换ajax可以使网页实现异步更新
8.ajax应用程序的优势
- 通过异步模式,提升了用户体验
- 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了宽带占用
- ajax引擎在客服端运行,承担了一部分本来由服务器承担的工作,从而减少了大用户量下的服务器负载
9.ajax的最大特点
- ajax可以实现动态不刷新(局部刷新)
就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变过的信息。
ajax工作原理
通过XMLHttpRequest对象来向服务器发送异步请求,从而获得数据,然后用JavaScript来操作DOM从而达到无刷新的更新页面
10.ajax技术体系的组成部分有哪些
HTML,css,dom,xml,xmlHttpRequest,javascript
XMLHttprequest对象介绍
Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。通过XMLHttpRequest对象,Web开发人员可以在页面加载以后进行页面的局部更新。
11.原生js ajax的请求步骤
1.//创建 XMLHttpRequest 对象
var ajax = new XMLHttpRequest();
2.//规定请求的类型、URL 以及是否异步处理请求。
ajax.open('POST',url,true);
3.//发送信息至服务器时内容编码类型
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
4.//发送请求
ajax.send(null);
5.//接受服务器响应数据
ajax.onreadystatechange = function () {
if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) {
}
};
12.json字符串转换集json对象、json对象转换json字符串
- 字符串转对象
JSON.parse(json)
eval(’(’ + jsonstr + ‘)’)
2.对象转字符串
JSON.stringify(json)
13.什么是JSON
JSON是一种轻量级的数据交换格式
14.ajax的请求方式,以及优缺点
- get
- post
- delete
- put
使用上的区别:
1:post比get安全
(因为post参数在请求体中。get参数在url上面)
2:get传输速度比post快 根据传参决定的。
(post通过请求体传参,后台通过数据流接收。速度稍微慢一些。而get通过url传参可以直接获取)
3:post传输文件大理论没有限制get传输文件小大概7-8k ie4k左右
4:get获取数据 post上传数据
(上传的数据比较多 而且上传数据都是重要数据。所以不论在安全性还是数据量级 post是最好的选择)
15.什么情况造成的跨域
同源策略限制不同源会造成跨域
同源策略:
协议,域名,端口号
全部相同,只要有一个不相同就是非同源策略
16.解决跨域请求的方案
1.jsonp
原理:利用script标签没有跨域限制,通过script标签的src属性发送带有callback参数的GET请求,服务器将接口返回的数据当做callback函数调用的实参返回给浏览器,浏览器解析执行callback函数通过形参拿到返回的数据
步骤:
-
去创建一个script标签
-
script的src属性设置接口地址
-
接口参数,必须要带一个自定义函数名 要不然后台无法返回数据。
-
通过定义函数名去接收后台返回数据
//去创建一个script标签
var script = document.createElement("script");
//script的src属性设置接口地址 并带一个callback回调函数名称
script.src = "http://127.0.0.1:8888/index.php?callback=jsonpCallback";
//插入到页面
document.head.appendChild(script);
//通过定义函数名去接收后台返回数据function jsonpCallback(data){
//注意 jsonp返回的数据是json对象可以直接使用
//ajax 取得数据是json字符串需要转换成json对象才可以使用。
}
2. CORS:跨域资源共享
原理:浏览器发出cors请求后,会在头信息里附加一个origin字段,这个字段用来说明自己来自于哪个源。服务器拿到请求之后,会根据origin字段在不是一个字段范围内,做出相应的拦截
限制:浏览器需要支持HTML5,可以支持POST,PUT等方法兼容ie9以上
3.反向代理
原理:反向代理帮其它的服务器拿到请求,然后选择一个合适的服务器,将请求转交给它。
4.window+iframe
17.http常见状态码
- 200成功
- 304缓存
- 403请求不允许
- 400请求错误
- 500服务器内部错误
- 501服务器识别错误
总结:1.请求处理中
2.请求成功
3.重定向
4.客户端错误
5.服务器错误
18.XMLHttpRequest对象的常用方法和属性
open(“method”,”URL”) 建立对服务器的调用。
第一个参数是HTTP请求 方式可以为GET,POST或任何服务器所支持的您想调用的方式。
第二个参数是请求页面的URL。
send()方法,发送具体请求
abort()方法,停止当前请求
请求的状态码
- 0 未初始化
- 1 初始化
- 2 发送数据
- 3 数据传输
- 4 完成
responseText 属性 服务器的响应,表示为一个串。
reponseXML 属性 服务器的响应,表示为XML
status 服务器的HTTP状态码,200对应ok 400对应not found
19.什么是XML
XML是扩展标记语言,能够用一系列简单的标记描述数据
20.AJAX的优缺点
优点
1、最大的一点是页面无刷新,用户的体验非常好。
2、使用异步方式与服务器通信,具有更加迅速的响应能力。
3、可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。
缺点
1、ajax不支持浏览器back按钮。
2、安全问题 AJAX暴露了与服务器交互的细节。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。
5、不容易调试。
21.多指事件
gesturestart 触屏
gesturechange 移动
gestureend 抬起
22.常见的页面布局
- 静态布局
即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位。
- 流式布局
主要的划分区域的尺寸使用百分数(搭配min-*、max-*属性使用)
- 自适应布局
即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围
- 响应式布局
检测窗口大小利用bootstrap布局,媒体查询
- 弹性布局
css3 rem
23.媒体查询
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
24.弹性布局
display:flex;