前端最全面试题（2）

数据请求相关问题：

http请求方式有哪些？

• HTTP1.0定义了三种请求方法： GET, POST 和 HEAD方法。
• HTTP1.1新增了五种请求方法：OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法。

http的状态码有哪些？分别说下它们的含义

1XX：信息状态码

2XX：成功状态码

3XX：重定向

4XX：客户端错误

5XX：服务器错误

常见状态码：

401  请求要求身份验证。对于需要登录的网页，服务器可能返回此响应

403  服务器已经理解请求，但是拒绝执行它。

404  请求失败

500 服务器遇到一个未曾预料的情况，导致无法完成对请求的处理

503  由于请示服务器维护或者过载，服务器当前无法处理请求

请描述一下get与post的区别

W3schools上面的参考答案

GET在浏览器回退时是无害的，而POST会再次提交请求

GET产生的URL地址可被Bookmark，而POST不可以

GET请求会被浏览器主动cache，而POST不会，除非手动设置

GET请求只能进行url编码，而POST支持多种编码方式。

GET请求参数会被完整的保留在浏览器历史记录中，而POST中的参数不会被保留

GET请求在URL中传送的参数是有长度限制的，而POST没有

对参数的数据类型，GET只接受ASCII字符，而POST没有限制

GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息

GET参数通过URL传递，POST放在Request body中

get与post都是http协议中的两种发送请求方式，由于http的层是TCP/IP，所以get与post的底层也是TCP/IP。而get产生一个TCP数据包，post产生两个TCP数据包。具体点来说就是：

对于Get方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）

对于Post方式的请求，浏览器先发送header，服务器响应100，浏览器再发送data，服务器响应200（返回数据）

这样看来Post需要两步，时间上消耗的要多一点。所以get比post更有效

但是：

1. get与post都有自己的语义，不能随便混用
2. 如果网络好的情况下，发一次包的时间和发两次包的时间差别基本可以无视。但是网络环境比较差的情况下，两次包的TCP在验证数据包完整性上，有很大的优点

并不是所有浏览器都会在POST中发送两次包，Firefox就只发送一次

get请求传参长度的误区

实际上http协议从未规定GET/POSt的请求长度限制是多少, 对get请求参数的限制是来源于浏览器或Web服务器, 浏览器或者Web服务器限制了url的长度。为了明确这个概念，需要强调以下几点

1. HTTP协议为规定GET和POST的长度限制
2. GET的最大长度显示是因为浏览器和web服务器限制了url的长度
3. 不同的浏览器和web服务器， 限制长度不一样
4. 要支持IE，则最大长度为2083byte，若支持Chrome，则最大长度8182byte

get和post请求在缓存方面的区别

get请求类似于查找的过程， 用户获取数据，可以不用每次都与数据库链接，所以可以使用缓存

post不同，post做的一般是修改和删除的工作，所以必须与数据库交互，所以不能使用缓存

get请求更适合于请求缓存

http和https有何区别？如何灵活使用？

http协议传输的数据都是未加密的，也就是明文的，因此使用http协议传输隐私信息非常不安全。为了保证这些隐私数据能加密传输，于是网景公司设计了ssl(Secure Sockets Layer)协议用于对http协议传输的数据进行加密，从而就诞生了https。
简单来说，https协议是由ssl+http协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全。

https和http的主要区别：
一、https协议需要到ca机构申请ssl证书(如沃通CA)，另外沃通CA还提供3年期的免费ssl证书，高级别的ssl证书需要一定费用。
二、http是超文本传输协议，信息是明文传输，https 则是具有安全性的ssl加密传输协议。
三、http和https使用的是完全不同的连接方式，用的端口也不一样，http是80端口，https是443端口。
四、http的连接很简单，是无状态的;https协议是由ssl+http协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。
五、如果要实现HTTPS那么可以淘宝Gworg获取SSL证书。

什么是AJax?为什么使用Ajax?

Ajax是一种创建交互网页应用的网页开发技术，相当于在用户和服务器之间加了一个中间层(Ajax引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像一些数据验证和数据处理等都交给Ajax引擎自己来做，可以实现页面的局部刷新。

Ajax包含了一下技术：

1. 基于web标准XHTML+CSS表示
2. 使用DOM进行动态显示以及交互
3. 使用XML和XSLT进行数据交互及相关操作
4. 使用XMLHttpRequest进行一步数据查询、检索；
5. 使用Javascript将所有的东西绑定在一起

简述ajax的过程。

1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象

2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息

3. 设置响应HTTP请求状态变化的函数

4. 发送HTTP请求

5. 获取异步调用返回的数据

6. 使用JavaScript和DOM实现局部刷新

Ajax优缺点？

Ajax程序的优势在于：

通过异步模式，提升了用户体验

页面无刷新更新（局部更新），用户体验非常好

Ajax引擎在客户端运行，承担了一部分本来有服务器承担的工作，从而减少了服务负载

基于标准化的被广发支持的技术，不需要下载插件或小程序

Ajax的缺点：

Ajax不支持浏览器back按钮

安全问题，Ajax暴露了与服务器交互的细节

对搜索引擎的支持比较弱

破坏了程序的异常机制

不容易调试

XMLHttpRequest通用属性和方法

1. readyState：表示请求状态的整数、取值：

UNSENT(0) : 对象已创建

OPENED(1) : open( )成功调用，在这个状态下，可以xhr设置请求头，或者使用send（）发送请求

HEADERS——RECEIVED(2) : 所有重定向已经自动完成访问，并且最终响应的HTTP头已经收到

LOADING(3) : 响应体正在接收

DONE(4) : 数据传输完成或者传输产生错误

1. onreadystatechange : readyState改变时调用的函数
2. status : 服务器返回的HTTP状态码 (如 : 200、404)
3. statusText : 服务器返回的HTTP状态信息 (如 : OK、No Content)
4. responseText：作为字符串形式的来自服务器的完整响应式
5. responseXML：Document对象，表示服务器的响应解析成的XML文档
6. abort(): 取消异步HTTP请求
7. getAllResponseHeaders() : 返回一个字符串,包含响应中服务器发送的全部HTTP包头。每个报头都是一个用冒号分割名、值对，并且使用一个回车、换行来分割报头行
8. getResponseHeader（headerName）：返回haedName对应的报头值
9. open（method，url，asynchronous，[user，password]）：初始化准备发送到服务器上的请求。method是HTTP方法，不区分大小写；url是请求发送的相对或绝对URL；asynchronous表示请求是否异步；user和password提供身份验证
10. setRequestHeader（name，value）：设置HTTP报头
11. send（body）：对服务器进行初始化。参数body包含请求的主体部分，对于POST请求为键值对字符串；对于GET请求，为null

Ajax请求跨域接口，发送了几次请求？

所有跨域的js在提交post请求的时候，如果服务端设置了可跨域访问，都会默认发送两次请求，第一次预检请求，查询是否支持跨域，第二次踩死真正的post提交

跨域的几种方式

首先了解一下同源策略：同源策略、SOP是一种约定，是浏览器最核心也会最基本的安全功能，如果缺少了同源侧罗，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指“协议+端口+域名”三者相同，即便两个不通的域名指向同一个IP地址，也非同源。

怎样解决跨域问题？

1. 通过jsonp跨域

原生实现:

var script = document.createElement('script');

            script.type = 'text/javascript';

            // 传参并指定回调执行函数为onBack

            script.src = 'http://www.....:8080/login?user=admin&callback=onBack';

            document.head.appendChild(script);

        

            // 回调执行函数

            function onBack(res) {

                alert(JSON.stringify(res));

            }

1. document.domain+iframe跨域

此方案仅限主域相同,子域不同的跨域应用场景

1. 父窗口:(http://www.domain.com/a.html)

<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>

            <script>

                document.domain = 'domain.com';

                var user = 'admin';

            </script>

1. 子窗口(http://child.domain.com/b.html)

  <script>

                document.domain = 'domain.com';

                // 获取父窗口中变量

                alert('get js data from parent ---> ' + window.parent.user);

            </script>

弊端:查看页面渲染优化

1. nginx代理跨域
2. nodejs中间件代理跨域
3. 后端在头部信息里面设置安全域名

web应用从服务器端主动推送data大客户端有哪些方式?

1. html5  websocket
2. XHR长轮询
3. 不可见的iframe
4. <script>标签的长时间链接(可跨域)---http、Jsonp方式的长轮询

详解:

通常情况下,打开网页或app去查询或者刷新，客户端想服务器发出请求然后返回数据，客户端与服务端对应的模式是：客户端请求--服务端响应，在有些情况下，服务端会主动推送一些信息到客户端，如：新闻订阅等。这个需求类似于日常中使用QQ或微信时的新消息提醒一样，只要有新消息就需要提醒。

Ajax轮询-----我们自然会想到的是ajax轮询，每10S或30S轮询一次，这种方式有一个非常严重的问题。假如有一万个商家打开浏览器，采用10S轮询的方式，服务器就会承担1000的QPS，这种方式会对服务器造成极大的性能浪费。

优点: 实现简单

缺点: 加重网络负担，拖累服务器

Websocket-----webSocket是HTML5开始提供的一种在单个TCP连接上进行双全工通讯的协议，webSocket只需要简历一次链接，就可以一直保持连接的状态。

详情可看https://www.cnblogs.com/jingmoxukong/p/7755643.html

XHR长轮询------这种方式是比较多的长轮询模式。客户端打开一个到服务端的ajax请求然后等待响应；服务器需要一些特定功能来允许请求被挂起，只要一有时间发生，服务端就会在挂起的请求中送回响应并关闭该请求。客户端js会在处理玩服务器返回的信息后，再次发出请求，重新建立连接。

现在浏览已经支持CROS的跨域方式请求，因此HTTP和JSONP的长轮询方式会被慢慢淘汰，建议采用XHR长轮询。

优点：客户端很容易实现良好的错误处理和超时管理，实现成本与Ajax的方式类似

缺点：需要服务器端有特殊的功能来临时挂起链接。当客户端发起请求过多时，服务器端会长期保持多个链接，具有一定的风险。

Iframe------iframe通过HTML页面里嵌入了一个隐藏帧，然后将这个隐藏帧的SRC属性设为对一个长连接的请求，服务器端能源源不断的往客户端输入数据。

优点：每次数据传送都不会关闭连接，连接只会在通信出现错误时，或者是连接重建时关闭。

缺点：IE、Firefox的进度条会显示加载没有完成，IE则会一直表述正在加载进行中。而且iframe会影响页面优化效果。

http和Jsonp方式的长轮询------把script标签附加到页面中让脚本执行。服务器会挂起链接直到有事件发生，接着把脚本的内容发送回浏览器，然后重新打开另一个script标签来获取下一个事件，从而实现长轮询的模型。

如何实现浏览器内多个标签页之间的通信? (阿里)

• WebSocket、SharedWorker
• 也可以调用localstorge、cookies等本地存储方式

webSocket如何兼容低浏览器？(阿里)

• Adobe Flash Socket 、
• ActiveX HTMLFile (IE) 、
• 基于 multipart 编码发送 XHR 、
• 基于长轮询的 XHR