前端进行网络请求的方式

一、一般我们关注的前端网络请求点

1.请求的地址和方式

2.请求所传递的参数

3.请求头的设置，（主要是文件上传和普通上传差别）

4.获取响应的方式

5.获取响应头、响应状态、响应结果

6.携带的cookie和session

二、前端进行请求的方式一般有

1.form，ifream，刷新页面

2.ajax----异步请求的鼻祖

3.jQuery----$.ajax

4.fetch--- Ajax的替代者

5.axios、request等众多开源库

三、Ajax的出现解决了什么问题

    ajax出现之前，每次获取后台的数据都需要整体的刷新页面，这样带来了用户体验非常差。ajax的出现就解决了这个问题，ajax可以局部的刷新页面。ajax的全称AsynchronousJavaScript+XML。Ajax本身不是一种新技术，而是用来描述一种使用现有技术集合实现的一个技术方案，浏览器的 XMLHttpRequest是实现 Ajax最重要的对象（ IE6以下使用 ActiveXObject）。尽管 X在 Ajax中代表 XML, 但由于 JSON的许多优势，比如更加轻量以及作为 Javascript的一部分，目前 JSON的使用比 XML更加普遍。

四、原生的ajax的使用方式

open方法：

    xhr.open(method, url, async, username, password)

    method:请求的方式Get,Post。url:请求的地址。 async:是否同步

send方法：

    xhr.send(param)，无参和get请求的时候传null.

abort方法：

    xhr.abort()；终止一个 ajax请求，调用此方法后 readyState将被设置为 0。

setRequestHeader方法：

   xhr.setRequestHeader(header, value) 设置 HTTP请求头，此方法必须在 open()方法和 send()之间调用。

getResponseHeader方法：

    var  responseHeader = xhr.getResponseHeader(name);用于获取 http返回头，如果在返回头中有多个一样的名称，那么返回的值就会是用逗号和空格将值分隔的字符串。

readyState方法：

    0：代理被创建未调用open方法。

    1：open的方法被调用。

    2：send方法被发送，头部和状态已经可获取。

    3：下载中responseText属性已经包含部分数据。

    4：下载操作已完成。

status方法：

    表示 http请求的状态, 初始值为 0。如果服务器没有显式地指定状态码, 那么 status将被设置为默认值, 即 200。https://blog.csdn.net/shshjj/article/details/81132392

responseType方法：

    | "" | 将 responseType设为空字符串与设置为 "text"相同， 是默认类型 （实际上是 DOMString）。| "arraybuffer"| response 是一个包含二进制数据的 JavaScriptArrayBuffer 。| "blob"| response是一个包含二进制数据的 Blob对象 。| "document"| response 是一个 HTMLDocument或 XMLXMLDocument，这取决于接收到的数据的 MIME 类型。| "json"| response 是一个 JavaScript 对象。这个对象是通过将接收到的数据类型视为 JSON解析得到的。| "text"| response是包含在 DOMString对象中的文本。

response方法：

    返回响应的正文，返回的类型由上面的 responseType决定。

withCredentials方法：

    ajax请求默认会携带同源请求的 cookie，而跨域请求则不会携带 cookie，设置 xhr的 withCredentials的属性为 true将允许携带跨域 cookie。

onreadystatechange方法：

    xhr.onreadystatechange = fnction(){};当 readyState属性发生变化时，callback会被触发。

onloadstart方法：

    xhr.onloadstart = function(){};在 ajax请求发送之前（ readyState==1后, readyState==2前）， callback会被。

onprogress方法：

    xhr.onprogress = function(event){

          console.log(event.loaded / event.total);

    }

回调函数可以获取资源总大小 total，已经加载的资源大小 loaded，用这两个值可以计算加载进度。

onload方法：

当一个资源及其依赖资源已完成加载时触发 ，通常我们会在 onload事件中处理返回值。

onerror方法：

当一个资源加载失败时候触发。

ontimeout

当进度由于预定时间到期而终止时触发

五、jquery的ajax

六、fetch出现的原因和实现

    随着越来越多的MV*发展的状态，对jquery的使用越来越少，我们不能为了使用jquery的ajax而单独的引用jquery。

    尤雨溪在他的文档中推荐大家用 axios进行网络请求。axios基于 Promise对原生的XHR进行了非常全面的封装，使用方式也非常的优雅。另外， axios同样提供了在 node环境下的支持，可谓是网络请求的首选方案。这里我们不多做考究，我们把关注的重点放在更底层的API fetch。

七、跨域总结

    说道请求，就存在跨域的问题，浏览器的同源策略限制了从同一个源加载的文档或者脚本如何与另外一个源的资源进行交互，这是一个用于隔离潜在恶意文件的重要安全机制。通常不允许不同源间的读操作。

跨域条件：协议，域名，端口，有一个不同就算跨域。

实现跨域的几种方式：

nginx:

使用 nginx反向代理实现跨域

cors:

CORS是一个 W3C标准，全称是"跨域资源共享" （Cross-origin resource sharing）。

jsonp:

    

微信