LOADING

加载过慢请开启缓存 浏览器默认开启

浏览器通信能力

用户代理

用户代理:浏览器主要是帮助用户完成http请求,接收响应,并且将响应变成更容易理解返回给用户。
浏览器只有通过绝对路径才能发送请求。

绝对路径

绝对路径.png

最后一个只有path,加上当前页面部分构成完整url;第二个省略了协议,加上当前页面部分构成完整url,总的来说,绝对路径就是完整url。

相对路径

相对路径相对的是path。一定要有前提条件,就是当前路径。

相对路径1.png
相对路径2.png

自动发出请求的能力

自动发出请求1.png
自动发出请求2.png

post和get区别

在htpp协议层面,没有实质的区别,就是语义的区别,照成实质的差异的原因是浏览器和很多软件达成共识,尽管官方没有这个要求,get拿东西,通过path加query,id就可以知道,因此开发软件的时候不会在get放请求
当发送get请求时,不会附带请求体。

点击历史记录和页面等于重复上一次操作,就是重新发送请求。
get浏览器不会附带请求体.png

自动解析响应的能力

自动解析响应能力.png

页面渲染的基本流程

当在浏览器输入url地址之后怎么办?

页面渲染的基本流程.png

响应什么取决于content-type

AJAX

含义:js可以在程序中应用js代码调用浏览器给的网络通信能力发送请求并且拿到响应结果。相当于用js构建.http文件,然后把请求发出去,在js代码可以收到服务器响应的东西。

主要通XHR和Fetch端口来完成。

AJAX.png

js语言环境所有IO均为异步, IO是读取文件,写入文件,跟磁盘和网卡打交道,网络请求都属于IO. Js代码是运行在渲染的主线程上的,如果同步卡住了,后面就无法运行,所以网络请求时异步的,返回promise,promise完成之后表示网络传输可以了。后面进行下一步,拿到结果之后,主线程运行回调函数

实战

请求并获取响应数据

  • 例子一:用fetch

    实战例子1.png

    • 上传文件并监控进度
    • 准备工作:启动本地文件上传服务器
    • 上传接口
  • 例子二:用XHR

    http上传文件

    实战例子2.1.png

    用js上传文件

    实战例子2.2.png

    dataurl是一个特殊的url,直接把资源的数据写进url。一般url是用来寻找资源的。

    实战例子2.3.png

网络接口

告诉你请求方法,请求什么地址,请求头传什么,请求体传什么

http接口

实战例子3.png

js写使用fetch,如果用响应的结果就用await.