面试总结(3)

ajax

ajax

什么是Ajax

Ajax是一种异步请求数据的web开发技术,对于改善用户的体验和页面性能很有帮助。简单地说,在不需要重新刷新页面的情况下,Ajax 通过异步请求加载后台数据,并在网页上呈现出来。常见运用场景有表单验证是否登入成功、百度搜索下拉框提示和快递单号查询等等。Ajax的目的是提高用户体验,较少网络数据的传输量。同时,由于AJAX请求获取的是数据而不是HTML文档,因此它也节省了网络带宽,让互联网用户的网络冲浪体验变得更加顺畅。

Ajax原理是什么

在解释Ajax原理之前,我们不妨先举个“领导想找小李汇报一下工作”例子,领导想找小李问点事,就委托秘书去叫小李,自己就接着做其他事情,直到秘书告诉他小李已经到了,最后小李跟领导汇报工作。

小李小张

Ajax请求数据流程与“领导想找小李汇报一下工作”类似。其中最核心的依赖是浏览器提供的XMLHttpRequest对象,它扮演的角色相当于秘书,使得浏览器可以发出HTTP请求与接收HTTP响应。浏览器接着做其他事情,等收到XHR返回来的数据再渲染页面

ajax

理解了Ajax的工作原理后,接下来我们探讨下如何使用Ajax

Ajax的使用

创建Ajax核心对象XMLHttpRequest(记得考虑兼容性)

1
2
3
4
5
6
7
var xhr=null;  
if (window.XMLHttpRequest)
{// 兼容 IE7+, Firefox, Chrome, Opera, Safari
xhr=new XMLHttpRequest();
} else{// 兼容 IE6, IE5
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}

向服务器发送请求

1
2
xhr.open(method,url,async);  
send(string);//post请求时才使用字符串参数,否则不用带参数。
  • method:请求的类型;GET 或 POST
  • url:文件在服务器上的位置
  • async:true(异步)或 false(同步) 注意:post请求一定要设置请求头的格式内容
1
2
3
xhr.open("POST","test.html",true);  
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("fname=Henry&lname=Ford"); //post请求参数放在send里面,即请求体

服务器响应处理(区分同步跟异步两种情况)

responseText 获得字符串形式的响应数据。

responseXML 获得XML 形式的响应数据。

①同步处理

1
2
3
xhr.open("GET","info.txt",false);  
xhr.send();
document.getElementById("myDiv").innerHTML=xhr.responseText; //获取数据直接显示在页面上

②异步处理

相对来说比较复杂,要在请求状态改变事件中处理

1
2
3
4
5
xhr.onreadystatechange=function()  {
if (xhr.readyState==4 &&xhr.status==200) {
document.getElementById("myDiv").innerHTML=xhr.responseText;
}
}

什么是readyState?

readyState是XMLHttpRequest对象的一个属性,用来标识当前XMLHttpRequest对象处于什么状态。 readyState总共有5个状态值,分别为0~4,每个值代表了不同的含义

  • 0:未初始化 – 尚未调用.open()方法;
  • 1:启动 – 已经调用.open()方法,但尚未调用.send()方法;
  • 2:发送 – 已经调用.send()方法,但尚未接收到响应;
  • 3:接收 – 已经接收到部分响应数据;
  • 4:完成 – 已经接收到全部响应数据,而且已经可以在客户端使用了

什么是status

HTTP状态码(status)由三个十进制数字组成,第一个十进制数字定义了状态码的类型,后两个数字没有分类的作用。HTTP状态码共分为5种类型

状态码]

常见的状态码

仅记录在 RFC2616 上的 HTTP 状态码就达 40 种,若再加上 WebDAV(RFC4918、5842)和附加 HTTP 状态码 (RFC6585)等扩展,数量就达 60 余种。接下来,我们就介绍一下这些具有代表性的一些状态码

状态码

https

什么是 HTTPS

HTTPS(全称:Hyper Text Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单讲是HTTP的安全版。即HTTP下加入SSL层,HTTPS的安全基础是SSL,因此加密的详细内容就需要SSL。 现在它被广泛用于万维网上安全敏感的通讯,例如交易支付方面。

HTTP 与 HTTPS 的区别

  • HTTP 是明文传输,HTTPS 通过 SSL\TLS 进行了加密
  • HTTP 的端口号是 80,HTTPS 是 443
  • HTTPS 需要到 CA 申请证书,一般免费证书很少,需要交费
  • HTTPS 的连接很简单,是无状态的;HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议,比 HTTP 协议安全。

在看 HTTPS 的时候,在 GOOGLE 搜索的大部分都是一些比较专业的术语,对于一个前端来说,对这些什么应用层、传输层的协议和各种服务器的信息都不是很了解,所以看的不是很明白也看不进去,于是,看到一篇文章:一个故事讲完https 表示勉强可以理解,/(ㄒoㄒ)/~~,于是对其详细的研究了下,对于前端理解 HTTPS 还是可以看一下的。

来自中国的张大胖和位于米国的 Bill 进行通信

由于张大胖和 Bill 都是使用 HTTP 进行通信,HTTP 是明文的,所以他们的聊天都是可被窥视的。于是,二人准备想要改变现状,所以 HTTPS 首先要解决的问题就是要保证传输的内容只有这两个人能看懂

plan1:使用对称密钥

对称密钥

两人商量了一下,可以使用对称密钥进行加密。(对称密钥也就是加密和解密使用的是同一个密钥)
但是问题又来了~既然网络是不安全的,那么最开始的时候怎么将这个对称密钥发送出去呢?如果对称密钥在发送的时候就已经被拦截,那么发送的信息还是会被篡改和窥视啊~~
所以这种对称密钥的弊端就是,可能被中间人拦截,这样中间人就可以获取到了密钥,就可以对传输的信息就行窥视和篡改。

plan2:使用非对称密钥

Bill

RSA(非对称加密算法):双方必须协商一对密钥,一个私钥一个公钥。用私钥加密的数据,只有对应的公钥才能解密,用公钥加密的数据, 只有对应的私钥才能解密。

非对称算法

这样的话 Bill 将自己的公钥给张大胖,张大胖发送的信息使用 Bill 的公钥加密,这样,只有 Bill 使用自己的私钥才能获取

但是这样有个弊端:

  • RSA 算法很慢= =,要慢很多

所以为了解决这个问题,我们使用非对称密钥+对称密钥结合的方式

plan3:非对称密钥+对称密钥

使用对称密钥的好处是速度比较快,使用非对称密钥的好处是可以使得传输的内容不能被破解,因为就算你拦截到了数据,但是没有 Bill 的私钥,也是不能破解内容的。就比如说你抢了一个保险柜,但是没有保险柜的钥匙也不能打开保险柜。

解决的办法是将对称加密的密钥使用非对称加密的公钥进行加密,然后发送出去,接收方使用私钥进行解密得到对称加密的密钥,然后双方可以使用对称加密来进行沟通。

所以我们要结合两者的优点。使用 RSA 的方法将加密算法的对称密钥发送过去,之后就可以使用这个密钥,利用对称密钥来通信了。就比如说我将钥匙放进了保险柜,然后将保险柜寄给对方。

中间人攻击

还有一个问题就是在使用非对称密钥的时候,首先需要将 Bill 的公钥给张大胖,那么在这个过程中,安全是没有保障的,中间人可以拦截到 Bill 的公钥,就可以对拦截到的公钥进行篡改。

这也就是相当于我有手机号,虽然是公开的,谁都可以给我打电话,但是刚开始你并不知道我的手机号,我需要将我的手机号发给你,在我发给你我的手机号的时候,被中间人拦截了,然后将我正确的手机号换成了错误的手机号,比如:110,然后,你收到的就是错误的手机号:110,但是你自己还不知道你收到的是错的手机号,这时候,你要是给我打电话,就尴尬了~~

确认身份 —— 数字证书

所以以上的步骤都是可行的,只需要最后一点就可以了,要确定 Bill 给张大胖的公钥确实是 Bill。 的公钥,而不是别人的。(刚刚电话号码的那个例子,也就是说,需要确定我给你发的电话号码是我的,没有被修改的)

那怎么确认 Bill 给张大胖的公钥确实是 Bill 的呢?

这个时候就需要公证处的存在了。也就是说我需要先将我的电话号码到公证处去公证一下,然后我将电话号码传给你之后,你在将你收到的电话号码和公证处的比对下,就知道是不是我的了。

对应到计算机世界,那就是数字签名

数字签名

数字签名也就是相当于公证处在公证书上盖章。

盖章

数字签名和原始信息合在一起称为数字证书,Bill 只需将数字证书发送给张大胖就可以了。

在拿到数字证书之后,就用同样的Hash 算法, 再次生成消息摘要,然后用CA的公钥对数字签名解密, 得到CA创建的消息摘要, 两者一比,就知道有没有人篡改了!

比较是否相同

1)比如客户端发起一个http请求,连接到服务器的443端口。

2)服务端把自己的信息以数字证书的形式返回给客户端(证书内容有密钥公钥,网站地址,证书颁发机构,失效日期等)。证书中有一个公钥来加密信息,私钥由服务器持有。

3)验证证书的合法性

客户端收到服务器的响应后会先验证证书的合法性(证书中包含的地址与正在访问的地址是否一致,证书是否过期)。

4)生成随机密码(RSA签名)

如果验证通过,或用户接受了不受信任的证书,浏览器就会生成一个随机的对称密钥(session key)并用公钥加密,让服务端用私钥解密,解密后就用这个对称密钥进行传输了,并且能够说明服务端确实是私钥的持有者。

5)生成对称加密算法

验证完服务端身份后,客户端生成一个对称加密的算法和对应密钥,以公钥加密之后发送给服务端。此时被黑客截获也没用,因为只有服务端的私钥才可以对其进行解密。之后客户端与服务端可以用这个对称加密算法来加密和解密通信内容了。

  1. vue相关
  • 生命周期
  • 能写个render函数吗
  • 虚拟dom 为什么说在vue中操作dom性能会高
  1. 浏览器
  • 跨域具体解决办法 cors中get和post一定是简单请求吗
  • 浏览器缓存 讲一下具体的请求头 响应头 自己有配置过吗
  1. js
  • 手写个filter 最后还延伸出原型原型链定义方法(prototype上定义和[].filter定义的区别)
  • 闭包 (扯了词法作用域的具体内容)
  • event loop(浏览器和node)
  • 回调地狱的解决办法除了解决维护性和错误捕捉 还有什么(想不到了。。面试官最后告诉我说是作用域紊乱)
  1. node
  • 框架中引入的模块的具体实现(cookies body)
  1. 项目相关
  • 难点并且如何解决

vuex vue-router content-type 请求头 在各个生命周期中做啥

0%