ajax和移动端

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 :

1. 存储空间太小4k
2. 浏览器在发起请求时，会带上请求头，增加客户流量

sessionStorage:

1. 存储的数据不会被自动随着请求被发送到服务器
2. 存储的空间比cookie大
3. 存储数据的周期随着关闭网页，数据也随之删除

localStorage:

1. 数据存储量大
2. 不会被发送到服务端
3. 持久化本地存储，除非手动删除,否则一直存在
4. 在同一个域下，所有窗口共享其中存储的数据

7.什么是ajax，及其作用

AJAX=异步JavaScript和XML

ajax是一种用于创建快速动态网页的技术

通过后台与服务器进行少量数据交换ajax可以使网页实现异步更新

8.ajax应用程序的优势

1. 通过异步模式，提升了用户体验
2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了宽带占用
3. ajax引擎在客服端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载

9.ajax的最大特点

1. 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字符串

1. 字符串转对象

JSON.parse(json)

eval(’(’ + jsonstr + ‘)’)

2.对象转字符串

JSON.stringify(json)

13.什么是JSON
JSON是一种轻量级的数据交换格式

14.ajax的请求方式，以及优缺点

1. get
2. post
3. delete
4. 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函数通过形参拿到返回的数据

步骤：

1. 去创建一个script标签

2. script的src属性设置接口地址

3. 接口参数,必须要带一个自定义函数名 要不然后台无法返回数据。

4. 通过定义函数名去接收后台返回数据

//去创建一个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常见状态码

1. 200成功
2. 304缓存
3. 403请求不允许
4. 400请求错误
5. 500服务器内部错误
6. 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.常见的页面布局

1. 静态布局

即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。

2. 流式布局

主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用）

3. 自适应布局

即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围

4. 响应式布局

检测窗口大小利用bootstrap布局，媒体查询

5. 弹性布局

css3 rem

5种布局详情

23.媒体查询

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

24.弹性布局

display:flex;