脚本宝典收集整理的这篇文章主要介绍了

【芝士整理】网络请求相关

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

计算机网络结构

物理层

定义物理设备标准,起到传输比特流的作用。

数据链路层

提供可靠的通过物理介质传输数据的方法。

通过差错控制、流量控制方法将有差错的物理链路(物理链路容易受到干扰)变为无差错的数据链路

将物理层的比特流数据封装成数据帧传递给上层,将上层的数据帧转换为比特流给物理层。

提供MAC地址(物理地址),可作为局域网内一个网卡的唯一标识。

网络层

解决不同子网间的通信问题:逻辑寻址,规定不同的信息交换方式,路由算法,连接服务。

IP协议

网络上每一个节点都有一个独立的逻辑地址——IP地址

IP协议负责将数据包传送到目的地,没有提供一种数据未传达以后的处理机制(这被认为是上层协议需要做的事情),是不可靠的协议。

传输层

提供可靠的端到端的差错和流量控制,保证报文的正确传输

UDP协议

没有建立连接,直接向对象发包,不可靠但快速高效。应用:ping命令、实时音视频通信

TCP协议

  • 三次握手建立连接
  • 发送方给接受方TCP数据报,然后等待对方的确认TCP数据报,如果没有,就重新发,如果有,就发送下一个数据报。
  • 接受方等待发送方的数据报,如果得到数据报并检验无误,就发送ACK(确认)数据报,并等待下一个TCP数据报的到来。直到接收到FIN(发送完成数据报)
  • 四次挥手中止连接

会话层

建立和管理应用程序之间的通信,保证应用程序自动收发包和寻址

表示层

解释不同系统之间的通信语法

应用层

直接面向用户的程序或服务

HTTP协议

什么是HTTP协议?

基于TCP/IP协议基础的一个应用层协议,用于从Web服务器传输超文本到本地浏览器的传送协议,由请求和响应构成。

HTTP协议的特点

无状态:请求相互独立,通信状态不被保存

HTTP报文的组成

HTTP报文包括请求报文和响应报文两大部分,其中请求报文由请求行(request line)、请求头(header)、空行和请求体四个部分组成。而响应报文由状态行、响应头部、空行和响应体四个部分组成。

HTTP请求方式

GET, HEAD, POST, PUT, DELETE,OPTIONS

HEAD:获取报头。

OPTIONS:获取请求资源的选项、需求或服务器支持,并非资源请求。ajax请求跨域资源时,使用OPTIONS方法发送嗅探请求,以判断是否有对指定资源的访问权限。

GET和POST的区别

  • GET安全性低,会被缓存
  • GET请求在URL中显示参数,POST请求在send中传递参数

状态码

1xx:表示请求已接收,继续处理

2xx:成功,操作被成功接收并处理

3xx:重定向,需要进一步的操作以完成请求

4xx:客户端错误,请求有语法错误或请求无法实现

5xx:服务端错误,服务器端错误--服务器未能实现合法的请求

  • 200 请求正常处理
  • 204 请求正常处理但没有资源返回
  • 301永久性重定向
  • 302 临时性重定向
  • 304 指采用GET方法的请求报文中包含if-matched,if-modified-since,if-none-match,if-range,if-unmodified-since任一个首部)服务器端允许请求访问资源,但因发生请求未满足条件的情况后,直接返回304Modified
  • 400 请求报文中有语法错误
  • 401 表示未授权
  • 403 请求被服务器拒绝
  • 404 服务器上无法找到请求的资源
  • 500 服务器在执行时发生错误
  • 503 服务器暂时处于超负载或正在进行停机维护

请求API

Ajax

var xhr = null;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
    xhr.open("POST","test.html",true);  
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
    xhr.send("fname=Henry&lname=Ford"); 
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText);
        }
    }
    xhr.onerror = function (e) {
        console.log(e)
    }
}

readyState

  • 0:未初始化,尚未调用open
  • 1:已经调用open,尚未调用send
  • 2:已经send,但尚未收到响应
  • 3:已接收到部分响应
  • 4:已收到所有响应

error事件

Network error,只有发生网络层的错误才会出发error事件, 应用层的错误不会进入error

onload事件

当请求成功完成时触发,此时xhr.readyState=4

onabort事件

调用xhr.abort()后触发

withCredentials

在跨域请求中,客户端必须手动设置xhr.withCredentials=true,且服务器端也必须允许亲贵能携带认证信息(即响应头中包含Access-Control-Allow-Credentials:true),这样浏览器才会自动将cookie加在请求头中。

另外,要特别注意一点,一旦跨域请求能够携带认证信息,服务器端一定不能将Access-Control-Allow-Origin设置为*,而必须设置为请求页面的域名。

XMLHttpRequest的具体介绍

Fetch

Fetch API 基于Promise设计,fetch()返回一个Promise对象

fetch(url).then(response => response.json())
  .then(data => console.log(data))
  .catch(e => console.log("Oops, error", e))

Fetch原生支持率并不高,需要引入各种polyfill

  1. 由于 IE8 是 ES3,需要引入 ES5 的 polyfill: es5-shim, es5-sham
  2. 引入 Promise 的 polyfill: es6-promise
  3. 引入 fetch 探测库:fetch-detector
  4. 引入 fetch 的 polyfill: fetch-ie8
  5. 可选:如果你还使用了 jsonp,引入 fetch-jsonp
  6. 可选:开启 Babel 的 runtime 模式,现在就使用 async/await

Fetch polyfill 的基本原理是探测是否存在 window.fetch 方法,如果没有则用 XHR 实现。这也是 github/fetch 的做法,但是有些浏览器(Chrome 45)原生支持 Fetch,但响应中有中文时会乱码,老外又不太关心这种问题,所以我自己才封装了 fetch-detectorfetch-ie8 只在浏览器稳定支持 Fetch 情况下才使用原生 Fetch。这些库现在 每天有几千万个请求都在使用,绝对靠谱

Fetch 常见坑

  • Fetch 请求默认是不带 cookie 的,需要设置 fetch(url, {credentials: 'include'})
  • 服务器返回 400,500 错误码时并不会 reject,只有网络错误这些导致请求不能完成时,fetch 才会被 reject。

引用自传统 Ajax 已死,Fetch 永生

axios

基于Promise的HTTP封装库,可用于浏览器和node环境

  • 浏览器中使用XMLHttpRequest
  • node.js中使用http模块
  • 支持Promise API
  • 可拦截请求和响应
  • 转换请求和响应数据
  • 可取消请求
  • 自动转换JSON数据
  • 为客户端提供XSRF支持

axios项目仓库&文档

跨域

什么是跨域

跨域的解决方法

缓存

强缓存

不会发出请求,直接从缓存中读取数据

Expires

设置过期时间,缺点使用浏览器时间判断,浏览器时间会随客户端设置修改

Cache-Control

设置相对时间,以秒为单位

Cache-Control优先级大于Expires

协商缓存

发出请求,与服务端配合判断资源是否过期,需要与Cache-Control共同使用

如果命中协商缓存,服务端返回304并通知浏览器从本地缓存读取资源

Last-Modified和If-Modified-Since

记录和比较资源的修改时间,存在的问题:1. 时间误差 2. 资源修改和时间修改可能不一致

ETag和If-None-Match

服务端通过哈希算法根据文件内容计算出哈希值

记录和比较资源的哈希值

ETag优先级大于Last-Modified

用户行为对缓存的影响

  1. 地址栏访问,链接跳转是正常用户行为,将会触发浏览器缓存机制;
  2. F5刷新,浏览器会设置max-age=0,跳过强缓存判断,会进行协商缓存判断;
  3. ctrl+F5刷新,跳过强缓存和协商缓存,直接从服务器拉取资源。

其他响应头

no-cache

是否使用缓存需要经过协商缓存来验证决定

no-store

所有内容都不会被缓存,即不使用强制缓存,也不使用协商缓存

public

所有内容都将被缓存(客户端和代理服务器都可缓存)

private

所有内容只有客户端可以缓存

请求优化

  • 资源压缩合并
  • 非核心代码异步加载
  • 利用浏览器缓存
  • 使用CDN
  • 预解析DNS

页面性能优化办法有哪些

总结

以上是脚本宝典为你收集整理的

【芝士整理】网络请求相关

全部内容,希望文章能够帮你解决

【芝士整理】网络请求相关

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过