专题复习二、关于http的那些事（2）

写于2017.07.27

缓存

缓存就是你在第一次访问一个网页时，浏览器需下载相关文件并存放在相关目录里。但当你第二次访问该网页时，根据一些方法判定是否相关文件发生变化，若未发生变化，则直接调用本地缓存文件而不需要下载，节省时间，提高效率。
具体判定方法有如下几种：

1、服务器在响应的时候设置Cache-control

例：response.setHeader('Cache-control','public,max-age=3600')
max-age=3600秒，意味着这个缓存在1小时之内是有效的
但是这会存在一个问题：如果在这一小时之内我缓存的文件实际上已经更新过了，在访问的时候还是用本地缓存文件就会存在问题，为此提供下面方法解决
要知道缓存是以URL为依据的，所以我只需要在每一次更改文件后把该文件的URL改变即可，这样浏览器会判断URL变化了，需要重新下载。例：
第一次：http://localhost:8888/style.css?version=1
第二次：http://localhost:8888/style.css?version=2
如上，如果在这个max-age内内容变了，就在index.html文件里改链接文件的查询参数，这样URL变了，缓存就失效了
备注：如果请求头里有Cache-control，默认按照请求的Cache-control来，而不会受到响应里的Cache-control影响。这种情况一般指主页的HTML文件，这种文件永远不缓存，要和服务器请求，从本地拿意味着里面所有的链接发生变化都拿不到，是有问题的

2、服务器在响应的时候设置Expires
例：response.setHeader('Expires','Mon Jan 01 2018 00:00:00 GNT')
通过Expires设置格林美治时间，在这个时间前有效，原理同上（格林美治时间，js通过new Date(2018-01-01)生成）
与Cache-control区别，Cache-control是与上一次下载时间比，Expires是该时间与本机电脑时间比较，所以不确定性高，建议用Cache-control

3、服务器在响应的时候设置Last-Modified（最后一次更新时间）
例：response.setHeader('Last-Modified','Fri 22 Jan 2016 01:47:00 GMT')
第一次下载，第二次缓存
如果响应内容里有Last-Modified，那么缓存是被鼓励的，假设距离上次修改已有1年，则建议缓存时间为1年*10%=36.5天

4、ETag
先了解MD5。MD5是一个算法：接受一个输入，输出一个32位字符串。作用：在不知道内容的情况下，用来检测两个东西是否相等
举个不恰当的例子：假设我现在登录一个网站，我登录的密码就会以MD5的形式存入该网站后台数据库，下次再登录输入密码时，自动转化为MD5与上次的MD5对比验证是否相等，相等即可说明一致。当然现在不用MD5存密码，因为它的对应关系都是固定的，容易被人破解
ETag的原理就用到了MD5，假设我现在有一个style.css文件，它的MD5码是A，那么在响应时就会生成这样一个码，下次再次请求时，请求头里会有一个叫if-none-match，内容就是上次style.css的MD5码，判断if-none-match与A是否相等，相等说明该文件没有发生变化，直接从本地缓存获取即可，不相等就说明发生更改，重新下载
服务器代码：
else if (path ==='/style.css'){
var string = fs.readFileSync('./style.css')
var etag='A'（32位码，实际每改一次文件都是自动生成的）
}
if(request.headers['if-none-match']===etag){
response.statusCode=304（本地缓存资源就是最新的）
response.end()
}else{
response.setHeader('content-Type','text/css')
response.setHeader('ETag','etag')
response.end(string)
}
{cat style.css | MD5(生成MD5码)
echo 'h5{color:green;}' >> style.css（改写style.css文件）}
ETag与Cache-control的区别：
ETag请求每次都会发，所以只省下载时间
Cache-control，除主页面发送请求，其他不发送请求，省的是请求和下载的时间

cookie

cookie是服务器发给浏览器的信息，下一次访问时在请求里把这些信息带上。用于登录，比如用户名存入cookie，下次访问带上，自动识别相关信息
设置cookie代码如下：
if(path === '/'){
var string = fs.readFileSync('./index.html')
cookies.set('frank','hi')
response.setHeader('Content-Type','text/html;charset = utf-8')
response.end(string)
}
之后所有的请求都会把frank= hi这个cookie带上
具体有什么作用，请看如下代码：
if(path === '/'){
var string = fs.readFileSync('./index.html')
let(username,password) =query(拿到查询参数)
response.setHeader('Content-Type','text/html;charset = utf-8')
if(cookies.get('admin')==='yes'){
response.end('你好管理员！')
}(二次访问带上cookie：下一次登录获取cookie，如果admin=yes，就是管理员)
if(username==='frank'&&password==='xxx'){
cookies.set('admin','yes')
response.end('你好管理员！')(设置cookie及输出内容：如果查询参数是这些内容，就设置cookie为admin=yes，同时输出你好管理员！)
}else{
response.end('你好普通人！')
}

session

有一个问题就是用户是可以自己写cookie的，通过document.cookie ='admin=yes'
这样的话我就成了管理员了，所以这样看cookie是不安全的
session的原理：
1、用户首次登录某页面时，服务器为该用户创建一个session并生成一个与此session相关联的session id（开辟一块内存，用session id唯一标识，里面存放数据）
2、这个session id以cookie的形式响应给用浏览器
3、用户下次登录时把这个session id带上发给服务器，服务器验证后响应session id内存里的数据
例：
if(path === '/'){
response.setHeader('Content-Type','text/html;charset = utf-8')
let id = cookies.get('id')
if(!id){
let id = parseInt(Math.random()10000000000,10)
cookies.set('id',id)
}(保证每个用户有id)
let(username,password) =query(拿到查询参数)
if(sessions[id]&&sessions[id].admin===true){
sessions[id] = {admin:true}
response.end('你好管理员！')(多了一块内存存“你是管理员”的信息)
}else{
response.end('你好普通人！')
}
但是会存在一个问题：黑客通过遍历来找出管理员的sessions[id]是多少，然后获取数据，所以建议将sessions[id]转换为MD5值

form构造get和post请求

get请求：
代码如下：

(action定义URL里的路径)

(username、password定义URL里的查询参数前半部分)

备注：
1、提交发出一个get请求，默认刷新整个页面
2、button、input如果写了type="submit" 则回车键可提交。但是如果写type="button"，则无法提交

post请求：

method="post">(action定义URL里的路径)

post和get的区别
1、字面意思不一样：post是传递信息出去，而get是获取信息
2、get无消息体，有查询参数
3、post有消息体，一般没有查询参数
4、get的URL有长度限制（查询字符串太长报414错误）
5、安全性来讲，post要比get安全，因为post很难构造
备注：请求里有个referer，作用是记录那个URL推荐你过来的访问的
一般可以发出get请求的标签：link、script、image、form

---

*parseInt()函数
parseInt(string, radix),函数解析一个字符串参数，并返回一个指定基数的整数 (数学系统的基础)。

string
要被解析的值。如果参数不是一个字符串，则将其转换为字符串(使用 ToString
抽象操作)。字符串开头的空白符将会被忽略。

radix
一个介于2和36之间的整数(数学系统的基础)，表示上述字符串的基数。比如参数"10"表示使用我们通常使用的十进制数值系统。始终指定此参数可以消除阅读该代码时的困惑并且保证转换结果可预测。当未指定基数时，不同的实现会产生不同的结果，通常将值默认为10。

返回值
返回解析后的整数值。 如果被解析参数的第一个字符无法被转化成数值类型，则返回 [NaN]*