HTTP是互联网广泛应用的一种网络协议，如今更安全的HTTPS协议，通过安全套接层(Secure Sockets Layer,SSL)可对信息进行加密和身份验证等，能防止数据在传输过程中被篡改！对于HTTP的掌握关系到前端下面,我们来了解一下平时开发需要掌握的与HTTP相关的知识点，其中主要包括协议本身、缓存机制、表单的method方法、跨域和网络安全等。

image.png

1. HTTP请求状态码

状态码表示了客户端与服务端数据交互的状态，其中主要包括1xx（临时相应）、2xx（成功）、3xx（重定向）、4xx（错误）、5xx（服务器错误）等。

下边看具体的常用的状态码：

• 200（成功）：服务器成功处理了请求。
• 304（未修改）：自从上次请求后，请求的网页未修改过。
• 401（未授权）：请求要求身份验证。
• 403（禁止）：服务器拒绝请求
• 404（未找到）：服务器找不到请求的页面。
• 500（内部服务器错误）：IIS服务器无法解析ASP代码。

2. 请求头（HTTP header）

HTTP header通常包括通用头、请求头、响应头和实体头4部分，但是这个分类并不是很明确。如下面为浏览器一次请求的header截图，其中有些事浏览器自动会发送的，有些事需要人为设置的。

http-header.png

• 请求头
  其中经常用到的有Cache-Control（指定请求和相应遵循的缓存机制）、Connection（表示是否要持久连接）、Referer（标识从哪个链接跳转）、User-Agent（发出请求的用户信息）、Pragma(用来包含实现特定的指令)等
• 响应头
  Cache-Control（告诉所有的缓存机制是否可以缓存及哪种类型）、Content-Type（返回类型的MIME类型）、Last-Modified（其资源的最后修改时间）、Content-Length（响应体的长度）等。

3. Restfull API

表现层状态转化，所谓表现层即为资源在网络上的表现形式（Representation）,主要通过四个HTTP动作实现，即Put、Delete、Post和Get，分别对应增删改查。以及Options、Head、Trace、Connect等不常用的动作。

• Get请求与Post请求的差异
  1. 除了从名字含义上的差异以外，在实际应用也存在一些差异。Get和Post都可实现查询动作，差异在于传参的方式：Get是通过字符串拼接将参数作为URL的一部分，如百度搜索HTTP的URL：https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&tn=baidu&wd=HTTP,问号后面的部分便是相关参数；而Post是将参数通过XHR的send方法传递的，不会暴露在URL中。
  2. 在参数传输上，Post方式将更为隐蔽（安全？）,且适合大数据量的传输；Get是明文传输（只不过查询内容可能会被Base64编码），传送数据量有限，适合小数据量的参数传递。

4. Cookie、Session、Web Storage（傻傻分不清楚啊）

由于HTTP协议是无状态的，一次数据交换完毕后连接关闭，所以需要做一个可有保持回话状态的东西。典型的：剁手网登陆时可以根据之前的用户名密码直接登陆（这时候便是Cookie在发挥作用）；登陆后，剁完手放入购物车，在打开其他页面后购物车剁的手还在（这是Session在搞鬼）。哈哈哈

image.png

• Cookie
  1. 主要是以键值对的形式将一些信息(主要是用户信息)存储在本地计算机上
  2. 由于存储在本地可更改，并不安全
• Session
  • 1. 当用户登录后，服务器会创建一个管理当前登录用户会话的神秘人物，那就是Session
  • 2. 当浏览器关闭后，Session任务结束，清除
• Web Storage
  1. 同样为本地存储，相较于Cookie，容量更大一些
  2. 主要用来存储本不应该用Cookie存储的较大容量的内容
  3. 其包括sessionStorage（浏览器关闭后清除，相当于本地的 session，且是同源网站才能共享）、globalStorage（相当于本地存储的sessionStorage，可长久保存本地，同源共享）和localStorage（长久保存于本地，无视会话，所有共享）

5. XMLHttpRequest与Ajax

XMLHttpRequest为浏览器内置的数据异步请求对象，Ajax可以便是通过XHR实现不刷新页面完成Request请求。

请求主要过程如下：

• 创建XMLHttpRequest对象
• 通过open方法创建一个新的HTTP请求，并设置请求方法、url及验证消息
• 设置HTTP状态变化的回调函数，即onreadystatechange
• 通过send 方法发送请求
• 当HTTP状态变化时，获取response返回的信息
• 根据返回信息对页面进行相关刷新操作

XHR的readyState属性

该属性反映了请求所处的不同阶段，其取值及意义如下：

• 0：未初始化，未调用open方法
• 1： 启动，已调用open方法未调用send方法
• 2：发送，已调用send方法，未接收到返回信息
• 3：接收，已接收到部分返回信息
• 4：完成，已经接收全部返回信息

通过Promise简单封装XMLHttpRequest

function ajax(method, url) {
    return new Promise(function (resolve, reject) {
        let oXHR = new XMLHttpRequest()
        oXHR.open(method, url, true)
        oXHR.onreadystatechange = function () {
            // 成功完成请求
            if (oXHR.readyState == 4 && oXHR.status == 200) {
                resolve(oXHR.response Text)
            } else {
                reject(new Error( oXHR.status))
            }
        }
    })
}

6.网络安全

6.1 跨站脚本攻击（Corss Site Scripting，XSS）

什么？为什么缩写不是CSS？CSS不是层叠样式表吗？哈哈

• 允许用户将恶意代码植入到其他用户使用的界面
• 防范措施
  1. 对输入的数据进行转义保存，在输出时再进行还原
  2. 对输入的数据进行过滤，确保输入数据符合我们的期望（数据类型、长度、过滤空格/特殊字符、判断唯一性等）
  3. 尽量避免使用eval或者new Function等执行字符串方法

6.2 跨站请求伪造（Coross Site Request Forgery，CSRF）

• 在用户不知情的情况下，冒充用户发送一些违反用户意愿的请求。
• 方法措施
  1. 检查HTTP请求头referer是否为同源（Origin）
  2. 使用验证码或者token机制

主要参考：

• 《JavaScript高级程序设计》
• 《技术之瞳》
• Http Header
• cookie session webStorage 区别总结笔记

如果您感觉有所帮助，或者有问题需要交流，欢迎留言评论，非常感谢！
前端菜鸟，还请多多关照！

• Git： BuggMaker
• 博客：倒霉蛋儿_才才