对于前端开发来说， 请求是日常工作必备的；前端主要通过请求与后端进行交互，特别在前后端分离的模式开发下，请求就更重要了。那么掌握前端发送请求的方式很重要的。那么前端请求常用的方式有哪些呢？具体做业务的时候我们选择什么样的请求方式呢？
from表单这属于最原始的http请求方式
12345678910111213141516171819202122232425262728
当我们点击提交的时候：
这种方式的请求的整个过程是什么呢？
这种交互方式的缺陷是显而易见的，任何和服务器的交互都是需要刷新页面的，造成的问题就是用户体验很差
这是最原始的一直请求方式， 现在几乎都不会采用这种方式了， 所以这里就不细讲了
Ajax由于之前的web交互方式是需要刷新页面的， 所以导致用户的体验很差；Ajax的出现解决了这个问题。Ajax全称 Asynchronous JavaScript + XML（异步JavaScript和XML）；
Ajax本身不是一种新技术，而是用来描述一种使用现有技术集合实现的一个技术方案，使用Ajax，网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。
那Ajax这个方案是如何实现的呢？其实Ajax的实现主要是浏览器的XMLHttpRequest（在IE6以下使用ActiveXObject）。 那我们来看看这个原生的XMLHttpRequest的api。
XMLHttpRequest对象XMLHttpRequest一开始只是微软浏览器提供的一个接口，但是后来各大浏览器也效仿提供了这个接口， 再后来W3C对它进行了标准化，按照标准的前后可以分为两个版本；
XMLHttpRequest 老版本123456789101112131415161718// 新建一个 XMLHttpRequest 对象const xhr = new XMLHttpRequest();// 进行请求xhr.open("GET", "https://www.fastmock.site/mock/d867c364f89208a7672e9e9d0a822417/qixiao/getFileDetail", true);xhr.send({ name: "shuliqi", age: 18 });// 等待服务器的响应xhr.onreadystatechange = function () { // 该函数会被调用四次， 因此需要判断状态是否是4 if (xhr.readyState === 4 ) { if ( xhr.status === 200 ) { console.log("请求数据成功：", JSON.parse(xhr.responseText) ) } else { console.log("请求数据失败：", xhr.statusText ); } }}
具体的属性说明如下：
readyState: 返回当前 XMLHttpRequest对象当前所处的状态， 有四个状态
0：表示代理已被创建，但是尚未调用 open方法
1：表示open已经被调用，在这个状态中可以通过 setRequestHeader()方法来设置请求的头部。
2：表示send()方法已经被调用，响应头也已经被接收
3：表示响应了部分结果，但是没有全部响应完
4：表示请求操作已经完成，以为着传输已经彻底的完成和失败
status：表示服务器返回的状态码， 等于200表示成功响应
responesText： 表示服务器返回的文本数据
responseXML：表示服务器返回的XML格式的数据
statusText：表示服务器返回的状态文本
由于老版本不是统一的标准，各大浏览器在实现上有一定的差异性，所以存在一些缺陷
只支持文本数据的传送，无法用来读取和上传二进制文件
传送和和接收数据时，没有进度信息，只能提示没有完成或者已完成
受到”同域限制“只能向同一域名的服务器请求数据
例子：
1234567891011121314151617181920212223242526272829
打开页面之后，可得到结果：
由以上方式， 我们web是这样工作的：
XMLHttpRequest 新版本为了更好的使用XMLHttpRequest，w3school发布了标准版本，该版本弥补了老版本的一些缺陷，也是被各大浏览器厂商接受和实现，具体的功能如下：
可以设置http请求的时限
可以上传文件
可以跨域请求
可以获取服务端的二进制数据
可以获取数据传输的进度信息
一般为了更加友好的进行兼容各个浏览器，会对浏览器进行判断并进行兼容性模式来获取XMLHttpRequest的对象
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253// 新建一个 XMLHttpRequest 对象let xhr;if (window.XMLHttpRequest) { // Mozilla, Safari... xhr = new XMLHttpRequest();} else if (window.ActiveXObject) { // IE try { xhr = new ActiveXObject('Msxml2.XMLHTTP'); } catch (e) { try { xhr = new ActiveXObject('Microsoft.XMLHTTP'); //IE5,6 } catch (e) {} }}// 请求成功回调函数xhr.onload = () => { console.log('请求成功', xhr.response);};// 请求结束xhr.onloadend = () => { console.log('请求失败', xhr.response);};// 请求出错xhr.onerror = e => { console.log('请求出错', e);};// 请求超时xhr.ontimeout = e => { console.log('请求超时', e);};// 请求取消触发xhr.onabort = (e) => { console.log('请求被取消了', e);} // 设置超时时间，0 表示永不超时xhr.timeout = 0;// 初始化请求xhr.open("GET", "https://www.fastmock.site/mock/d867c364f89208a7672e9e9da822417/qixiao/getFileDetail", true);// 设置期望的返回数据类型 'json' 'text' 'document' ...xhr.responseType = 'json';// 设置请求头// xhr.setRequestHeader('', '');// 发送请求xhr.send({ name: "shuliqi", age: 18 });// 取消请求xhr.abort();
例子：
1234567891011121314151617181920212223242526272829303132333435363738394041
结果：
最后总结的来说XMLHttpRequest的功能如下：
优点
不重新加载页面的情况下更新网页
在页面已加载后从服务器请求/接收数据
在后台向服务器发送数据
缺点：
使用起来也比较繁琐，需要设置很多值。
早期的IE浏览器有自己的实现，这样需要写兼容代码。
jQuery为了更快捷的操作DOM，并且规避了一些浏览器兼容问题，就产生了jQuery。它里面的AJAX请求也兼容了各浏览器，可以有简单易用的方法$.get，$.post。简单点说，就是对XMLHttpRequest对象的封装。
例子：1234567891011121314151617181920212223242526
结果：
这里也不细讲， 有兴趣或者需要的话可以点击学习jquery官方
优点：
对原生XHR的封装，做了兼容处理，简化了使用。
增加了对JSONP的支持，可以简单处理部分跨域。
缺点：
如果有多个请求，并且有依赖关系的话，容易形成回调地狱。
本身是针对MVC的编程，不符合现在前端MVVM的浪潮。
ajax是jQuery中的一个方法。如果只是要使用ajax却要引入整个jQuery非常的不合理。
fetchfetch提供了一个JavaScript接口，是window的一个函数对象，用于访问网络和操作HTTP管道的部分，例如请求和响应。提供了一个全局的fech（）方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。
fetch是底层的api， 替代了XMLHttpRequest。可以轻松的处理各种格式，非文本化格。而且可以很容易的被其他的技术使用。例如 Service Workers
fetch功能与XMLHttpRequest基本是相同的，但是有三哥主要的差异。
fetch()是使用的Promise，不使用回调函数，因此写法上就大大的简化了
fetch()采用模块化的设计，API分散在多个对象上（Response对象，Request对象，Header对象），比输入，输出，状态等API都在XMLHttpRequest对象上更合理一些。
fetch()是使用数据流处理数据，可以分开读取，有利于提高网站的性能，减少内存占用，对于请求大文件或者网速慢的场景相当有用。
基本用法fetch()接受两个参数，第一个参数是一个url，第二个参数是一个配置项。
1fetch(url, options)
url是一个字符串，默认向该网址发出get请求，返回一个Promise对象
options 是一个对象，用于定制 HTTP 请求
一个基本用法的例子：
123456789101112131415161718
结果：
这个例子说明 fetch()接收到Promise的一个Stream 对象，response.json()是一个异步操作，取出所有的内容，，并将其转化为JSON对象。
还可以使用 async/await的语法改写
1234567891011121314151617181920
使用async/await需要注意的是 await语句必须放在try...catch里面，这样才能捕获到异步操作中可能发生错误。
Response对象Response对象主要是处理 HTTP 响应。 fetch()请求成功之后，得到的是一个Response对象，它对应的是服务器HTTP回应。
Response 对象的同步属性1const response = await fetch(url);
Response 包含的数据通过 Stream 接口异步读取，但是它还包含一些同步属性，对应 HTTP 回应的标头信息（Headers），可以立即读取
1234567891011async function getData () { try { const response = await fetch("https://www.fastmock.site/mock/d867c364f89208a7672e9e9d0a822417/qixiao/getFileDetail"); console.log("数据请求成功：", response.status, response.statusText) } catch (error) { console.log("获取数据失败：", err) }}getData();
像这个例子，response.status,response.statusText就是Response的同步属性，是可以立即读取的。
全部的同步属性如下：
Response.ok：
Response.ok属性返回一个布尔值，表示请求是否成功，true对应 HTTP 请求的状态码 200 到 299，false对应其他的状态码。
Response.status
Response.status属性返回一个数字，表示 HTTP 回应的状态码（例如200，表示成功请求）。
Response.statusText
Response.statusText属性返回一个字符串，表示 HTTP 回应的状态信息（例如请求成功以后，服务器返回”OK”）
Response.url
Response.url属性返回请求的 URL。如果 URL 存在跳转，该属性返回的是最终 URL。
Response.type
Response.type属性返回请求的类型。可能的值如下：
类型
描述
basic
普通请求，即同源请求
cors
跨域请求
error
网络错误，主要用于 Service Worker
opaque
如果fetch()请求的type属性设为no-cors，就会返回这个值，详见请求部分。表示发出的是简单的跨域请求，类似