浏览器默认的http请求方式是什么？

Question

截图中，我是用URL请求了一个自己部署的网络服务器。大家可以看到，请求方式是 document 304

但是在前后端分离的项目中，比如我用axios,发送请求是走的Fetch/XHR,而截图中走的All。

我想请问大佬为什么会出现这样的差别呢？浏览器的默认网络请求方式不是ajax形式的吗？只有用fetch/axios才会发送ajax请求吗？

感谢

Answer 1

虽然说两次发起的请求都是 GET 类型的，但是直接在浏览器地址栏中键入API地址的形式，会期望返回并展示响应结果，所以在 network 面板中 接口响应的内容类型 会是 document 的形式。
而直接使用 axios 或者 fetch 来发起网络请求，返回的结果并不会是以文档的形式渲染，所以在 network 面板中接口响应的内容类型会是 xhr。

其实如果你更换一个浏览器，比如说 Firefox 那么你直接在浏览器中键入API地址打开接口，内容类型就又会变成 vnd.mozilla.json.view。
但实际上，接口返回的响应头中 content-type 其实一直都是 application/json。你看的“类型”不同的现象，其实浏览器的行为导致的。

Answer 2

根据下面请求类型列表document 其实就是下载html的请求:

ALL：显示所有请求

XHR：显示AJAX异步请求

JS：显示js文件

CSS：显示css文件

Img：显示图片

Media：显示媒体文件，音频、视频等

Font：显示Web字体

Doc：显示html

WS：显示websocket请求

Other：显示其他请求

Answer 3

浏览器默认从地址栏输入地址打开一个网页的网络请求方式是GET
当你从一个设置method为post的页面表单元素填写数据发送请求的时候，网络请求方式就是POST
当你要实现在不刷新整个页面的情况下只实现部分网页元素的更新(数据更新也是网页元素的更新)的时候，网络请求方式就是ajax(fetch/XHR)

首先要清楚浏览器为什么要发送ajax请求(fetch/XHR)?
因为它能实现在不刷新页面的情况下请求特定URL获取数据，这允许网页在不影响用户操作的情况下，更新页面的局部内容。在之前前后端不分离的项目中，每次请求都要经过后端服务器解析路由和数据处理后返回整个页面，效率慢(我只需要页面部分更新，却要等整个页面返回)而且用户体验感不好(因为在等待服务器返回的页面过程中什么也做不了)
在现在流行的前后端分离的项目中，路由一般是由前端分担实现了，切换页面往往只涉及组件（也就是页面的部分元素）的创建与销毁，这部分也是由前端引擎来实现的。这样一来前端和后端的交互一般只剩下数据了，fetch/XHR这个时候就能发挥它们的作用，请求后端特定的URL来获取数据而且对于用户来说请求数据的过程中页面不至于会变得一片空白或者元素直接卡顿住。
事实上当你打开一个元素比较丰富的页面时，往往是先通过GET方式从服务器获得了一个页面的HTML，浏览器引擎再解析这个HTML文件，如果里面有引入服务器的js等其他能解析执行的文件就解析执行，如果里面有要针对页面初始化做的数据初始化处理(并非服务器已经渲染好呈现在HTML里了)，往往就要通过fetch/XHR的方式发送AJAX请求来实现