JS 常见知识点(数据交互)

get post区别

1、url可见性：

get，参数url可见；
post，url参数不可见

2、数据传输上：

get，通过拼接url进行传递参数；
post，通过body体传输参数

3、缓存性：

get请求是可以缓存的
post请求不可以缓存

4、后退页面的反应

get请求页面后退时，不产生影响
post请求页面后退时，会重新提交请求

5、传输数据的大小

get一般传输数据大小不超过2k-4k（根据浏览器不同，限制不一样，但相差不大）
post请求传输数据的大小根据php.ini 配置文件设定，也可以无限大。

6、安全性

原则上post肯定要比get安全，毕竟传输参数时url不可见，

7、数据包

GET产生一个TCP数据包；POST产生两个TCP数据包。
对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；

而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。
在网络环境好的情况下，发一次包的时间和发两次包的时间差别基本可以无视。
而在网络环境差的情况下，两次包的TCP在验证数据包完整性上，有非常大的优点。并不是所有浏览器都会在POST中发送两次包，Firefox就只发送一次。

补充：

http服务过程

1.进行域名解析，得到对应的ip地址(DNS找域名，将url换成ip)
2.浏览器跟服务器建立一个tcp连接(三次握手)
3.发起http请求
4.服务器响应http请求，浏览器得到HTML代码
5.解析HTML代码，并请求HTML代码中(js,css,图片)
6.渲染给用户
7.服务器关闭tcp连接，

浏览器运行机制

1.构建DOM树
	解析HTML文档,DOM节点，生成内容树
2.构建渲染树
	解析css JS 图片 等文件
3.布局渲染树
	把所有节点找出来，计算每一个大小位置及坐标等
4，绘制渲染树
	遍历渲染树，使用UI层来绘制每个节点(放到页面中)

浏览器缓存

浏览器可能会把你上一次的代码存起来，你再次访问，没有去拿新代码，而是直接拿的缓存

强缓存

不会向服务器发送请求，直接从缓存中读取资源

协商缓存

发送缓存到服务器，服务器告诉你去拿缓存你就拿，不拿缓存就拿新的代码

axios

fetch更友好，直接就是promise和then调用，更符合现在的编程思想

axios是基于promise用于浏览器 和node,js的http客户端，是对ajax的进一步封装，支持拦截请求和响应

特征：

1，从浏览器中创建XMLHttpRequest
2.支持Promise API
3.客户端支持防止CSRF
4.提供一些并发请求的接口 (promise.all) 
5.从node.js创建http请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据 (fetch api需要手动处理返回的数据)

工作中的代码

1get

axios({
    url:'https://',
    method:'get',
}).then(response=>{
    console.log(response)
}).catch(error=>{
    console.log(error)
})

2 post

  axios({
        url:'http://localhost:3003/yunzhangbenlogin',
        method:'post',
        data:{
            username:values.username,
            password:values.password
        }
    }).then(response=>{
        console.log(response)
    }).catch(error=>{
        console.log(error)
    })

axios拦截器

 请求拦截器
instance.interceptors.request.use(req=>{}, err=>{});
 响应拦截器
instance.interceptors.reponse.use(req=>{}, err=>{});

请求拦截器

// use(两个参数)
axios.interceptors.request.use(req => {
    // 在发送请求前要做的事儿
    ...
    return req
}, err => {
    // 在请求错误时要做的事儿
    ...
    // 该返回的数据则是axios.catch(err)中接收的数据
    return Promise.reject(err)
})

响应拦截器

// use(两个参数)
axios.interceptors.reponse.use(res => {
    // 请求成功对响应数据做处理
    ...
    // 该返回的数据则是axios.then(res)中接收的数据
    return res
}, err => {
    // 在请求错误时要做的事儿
    ...
    // 该返回的数据则是axios.catch(err)中接收的数据
    return Promise.reject(err)
})

ajax

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，
从服务器获得数据，然后用javascript来操作DOM而更新页面。 

XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。
简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

1. 创建XMLHttpRequest
2. 设置请求方式
3. 调用回调函数
4. 发送请求

    function ajax(url, data, method='POST', async=true) {
        return new Promise((resolve, reject) {
	// 第一步，创建xmlHttpRequest
	let xhr = null
	if (window.XMLHttpRequest) {
	        // 支持XMLHttpRequest
	        xhr = new XMLHttpRequest()
	} else {
	        // IE5或者IE6
	        xhr = new ActiveXObject('Microsoft.XMLHTTP')
	}

	// 第二步，设置请求方式
	xhr.open(method, url, async)

	// 第三步， 调用回调函数
	xhr.onreadyStateChange = function() {
	        if (xhr.readyState === 4) {
		if (xhr.status === 200) {
		        resolve(xhr.responseText)
		} else {
		        reject(xhr.statusText)
		}
	        } else {
	            reject(xhr.statusText)
	       }
	}

	// 第四步， 发送请求
	xhr.send(data)
         })
    }

本地存储

异同
cookie:

一般由服务器生成，可设置失效时间，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。
如果在浏览器端生成Cookie，默认是关闭浏览器后失效

不安全(请求头能看见)

存的量少

存在跨域问题(不是同端口，同域名，同协议不能传)

会话跟踪技术，用来记录http发起请求及接收响应时产生的相关信息，方便下回随着http继续发往服务器

localStorage

除非被清除，否则永久保存

sessionStorage

仅在当前会话下有效，关闭页面或浏览器后被清除

localStorage和sessionStorage 不会随着http发送到服务器，真正意义的本地存储

http、https

简单来说，
http是超文本传输协议，不安全，速度快
https是加密的http。安全，传输蛮，需要申请证书和备案

详细解释：

HTTP超文本传输协议，是一个基于请求与响应，无状态的，应用层的协议，常基于TCP/IP协议传输数据，互联网上应用最为广泛的一种网络协议,所有的WWW文件都必须遵守这个标准。设计HTTP的初衷是为了提供一种发布和接收HTML页面的方法。

HTTPS是一种通过计算机网络进行安全通信的传输协议，经由HTTP进行通信，利用SSL/TLS建立全信道，加密数据包。HTTPS使用的主要目的是提供对网站服务器的身份认证，同时保护交换数据的隐私与完整性。

常见状态码

状态码是浏览器向服务器发送请求时，服务器返回的一种状态标识。

2XX——表明请求被正常处理了

200（请求成功）
204 (服务器处理了。但是没有返回内容)

3XX——表明浏览器需要执行某些特殊的处理以正确处理请求

301（资源重定向，永久性）
302 （资源的URI已临时定位到其他位置了。临时性重定向）
304 （资源已找到，但未符合条件请求）

4XX——表明客户端是发生错误的原因所在。

400 （服务器端无法理解客户端发送的请求，请求报文中可能存在语法错误。）
403 （不允许访问那个资源。该状态码表明对请求资源的访问被服务器拒绝了。（权限，未授权IP等）
404 （服务器上没有请求的资源。路径错误等。）

5XX——服务器本身发生错误

500（服务器内部错误）
503 （抱歉，我现在正在忙着。该状态码表明服务器暂时处于超负载或正在停机维护，现在无法处理请求。）

跨域

当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域，不同域之间相互请求资源，就算作“跨域”

jsonp

利用 `标签没有跨域限制的漏洞。`

通过<script>标签引入一个js文件，这个js文件载成功后会执行我们在url参数中指定的函数，
并且会把我们需要的json数据作为参数传入,jsonp是需要服务器端配合的。

缺点：

JSONP 使用简单且兼容性不错，但是只限于 `get` 请求。
它只支持跨域 HTTP 请求这种情况，不能解决不同域的两个页面或 iframe 之间进行数据通信的问题。
JSONP从其他域中加载代码执行，如果该域不安全并且夹带一些恶意代码，会存在安全隐患 要确定JSONP请求是否失败并不容易

CORS

CORS 需要浏览器和后端同时支持。
 浏览器会自动进行 `CORS` 通信，实现 `CORS` 通信的关键是后端。只要后端实现了 `CORS`，就实现了跨域。
 服务端设置 `Access-Control-Allow-Origin` 就可以开启 `CORS`。

缺点：

支持 POST 请求方式，
CORS是一种新型的跨域问题的解决方案，存在兼容问题，仅支持IE 10以上

proxy 代理

开发阶段使用

在 vue.config.js 里面配置proxy代理，

nginx 反向代理

最常用的

不需要编译额外的模块，默认自带proxy_pass和fastcgi_pass指令，通过在location配置块中增加指令就可以实现反向代理功能。

CSRF攻击

CSRF(Cross site request forgery)，即跨站请求伪造。我们知道XSS是跨站脚本攻击，就是在用户的浏览器中执行攻击者的脚本，来获得其cookie等信息。而CSRF确是借用用户的身份，向web server发送请求，因为该请求不是用户本意，所以称为“跨站请求伪造”。

CSRF一般的攻击过程是，攻击者向目标网站注入一个恶意的CSRF攻击URL地址(跨站url)，当(登录)用户访问某特定网页时，如果用户点击了该URL，那么攻击就触发了，我们可以在该恶意的url对应的网页中，利用 来向目标网站发生一个get请求，该请求会携带cookie信息，所以也就借用了用户的身份，也就是伪造了一个请求，该请求可以是目标网站中的用户有权限访问的任意请求。也可以使用javascript构造一个提交表单的post请求。比如构造一个转账的post请求。
所以CSRF的攻击分为了两步，首先要注入恶意URL地址，然后在该地址中写入攻击代码，利用 等标签或者使用Javascript脚本

CSRF防御

对前端性能优化

1. webpack打包体积优化
     删除冗余代码
     按需加载 vue项目可以用require.ensure来实现\
      图片
   gzip 本来是服务端的工作，webpack也有gzip可以帮助服务端减轻压力
2. 规避回流与重绘
3. lazy-load(懒加载)
4. 事件的节流（throttle）与防抖（debounce）
5. js 的加载方式