060_http模块_网页URL之绝对路径
hello,大家好,这一个小题的话我们来补充一个之前学习过的内容,就是网页当中的URL,咱们这个小题的话主要是来说一下绝对路径,有同学可能会说,这这这,不对劲,是吧?这个咱们上一个小节还在讲这个服务端的内容,怎么这个小节又跑到浏览器端呢?
首先我来说一下,就是咱们这个内容是一个补充的内容,但是这个内容还是比较重要的,把它掌握之后能够帮助你更好地去理解前后端的交互。
那么在网页当中所使用的URL,它主要是分为两大类,第一大类是绝对路径,第二大类是相对路径,这个咱们之前是学过的。
那绝对路径这一块主要有三种形式,
第一种形式是完整体,那就是包含了所有的部分,有协议、有域名、有路径、有端口等等这种形式,
第二种形式是省略协议,
第三种形式是省略协议,域名,端口只保留一个路径(默认端口)。
那么首先的话咱们先来看看第一种形式,这第一种形式它比较简单,是一个完整体,在发送请求的时候会向这个 URL 直接去发送请求。
我们来举个例子,咱们新建一个文件,这个 13 是咱们新建的,是新建的啊。好,然后咱写一个注释,这是绝对路径。
这哥以 a 链接来举个例子,我这写一个a,这儿我写一个百度,但如果说想点击访问百度的话,这里就得去写百度的完整URL,咱来一个 https,然后 3W 点儿百度,点儿 com 保存
好,我们打开网页来看一看,网页有了,这个百度链接也有了,我们一点击这个链接,浏览器就会向百度那个服务器去发送请求,然后百度服务器会给浏览器返回结果。然后就可以看到百度的网页内容了,我们点击看一看,点击发请求,结果回来被呈现搞定。
那么这种形式的 URL 咱们平常也会用在哪呢?用在一些网页的外部链接上。比如说我给大家演示一下子,以强哥经常画出这个 processon 这个网站来为例,那么这个网站的下边就有一些外部链接,看这有什么签聊在线设计这些都属于网站的外链。我们审核一下,你会发现这些链接都是完整形式,点击就可以跳转。
好,那么下边的话咱们来看看第二种形式,大家了解即可。咱们平时用的比较少这种形式它省略了协议,而这种 URL 在发送请求的时候会与页面 URL 的协议做一个拼接,形成完整 URL 之后再去发送请求。
那么下边强哥也是一样,给大家演示一下子,我们再次回来这里我再写一个 a 链接,咱访问谁啊?咱访问京东,然后这呢写一个斜线斜线开头,然后jd. com 保存。
我们再次打开浏览器看看咱这个网页,刷新界面,这个链接已经有了,
之后的话咱们点击链接看一下,点击大家可以看一下它已经跳到了京东这个网站。
当然这个时候同学可能会有一个困惑,说不对劲,哪不对劲呢?你看咱们当前这个网页的URL,他怎么没有协议的话,咱这个 URL 跟谁去拼接啊?
别急,我给你解释一下,它其实是有协议的,只不过地址栏没有给它呈现,
你看给你复制一份,
点开它 control v,你瞅一眼有没有它这个协议,就是http。
好,那这里这时候同学可能会有另外一个问题,强哥,不对劲啊,您看看咱那个网页的 URL 协议是HTTP,但是跳转过来之后你发现人家这是个HTTPS。
这个你也别急,看着我们打开网络控制台,往上走走走,你会发现在最上边它其实发了两个请求。第一个请求是咱们点下之后发送的
这个请求确实是一个 HTTP 协议的一个请求。
那为什么界面显示是一个 HTTPS 呢?是因为这第一个请求发送过去之后,不单给浏览器返回了一个 301 的重定向,
就告诉他这个资源在这没有,那到另外一个 URL 去获取哪个,就是这个 HTTPS 三 w 点 jd . com,
于是乎浏览器又向它发送了一个请求,所以咱们就看到了这样的一个效果。
好,当然这种 URL 咱用的并不是特别的多,大家了解一下就可以了。
那么下边咱们来看看第三种形式,这种形式咱用的可是比较多,以斜线开头的路径,它也被称之为是绝对路径,那么这种 URL 它有一个特点,就是在发送请求时,它会与当前网页 URL 的协议、主机名、端口,去做一个拼接,形成完整 URL 之后再去发送请求。
还是一样给大家做个演示,这里我写一个 a 标签,然后来一个斜杠的search,这里他们来一个搜索保存,
我们再次打开这个网页刷新界面,你看这多了一个搜索,那么审核一下,你看它的 HREF 长这个样子,那当我们在点击搜索时,它一定会向服务端发送请求。
那给谁发送请求呢?他发送的请求其实就是用自己跟当前网页 URL 的协议,还有主机名以及端口做一个拼接,就会形成完成URL。
有了完整 URL 之后就可以向服务端发送请求了,来咱们验证一下,点击搜索来看一看,是不是这么一回事。
没有问题,大家同学可能会说,强哥,你看这这这不对啊,这这 404 了,获取不到资源,你可以看一下。
哎,我说一下,这个并不是我们关注的重点,我们关注的重点是它这个 URL 到底是不是按照我们的规则来去进行一个拼接?好,事实证明是没有问题的,那么这种 URL 咱用的是比较多的,大家可以看一看。
强哥经常用这个网站,哎。这个 process on 右键,咱们打开瞅一眼,你可以发现这些外部资源它都是以斜线开头的,为什么这种 URL 它用的比较多啊?原因比较简单,
就这个网站将来可能会换这个主机名,可能会换域名,可能会换IP。
你想一想,如果说,你如果说把它写成完整的形式,咱举个例子,你把它写成 a . com,对吧?写死了,将来一旦变成 b . com,你每一个链接它都得改,那样的话会比较麻烦。
但是一旦写成这种斜杠开头的绝对路径之后,你将来说我要变这个域名,我要变IP,兄弟你随便变,我这块一点影响都没有,所以说这种 URL 用的比较多。大家同学可能会有一个困惑说强哥,那我这点杠呢?它属于相对路径,咱们下一小节去讨论这种路径。
061_http模块_网页URL之相对路径
hello,大家好,这个里的话我们来介绍一下网页 URL 的相对路径,这个相对路径的话咱们平时用的比较多。
好,下面的话咱们来看一下相应对应路径的形式呢。有这么几种,那咱们有这么几种,
一个是点杠开头的,
还有是直接路径开头的,
还有是点点杠开头的,
诶,有这么三种形式,
那其中这个和这个他们两个其实是同一个意思,都是表示当前文件夹下的资源。
那么这里咱们需要说一下这个相对路径,它与绝对路径不太一样,它在发送请求时需要跟当前页面 URL 的路径做一个计算,它得做一个计算,计算得到完整的 URL 之后再去发送请求。
咱们来举个例子,你比方说当前网页 URL 长成这个样子,
然后我们有一个请求,它的这个 URL 是点杠 CSS 下边的 APP 点CSS,那么这个时候咱要分析一下这个点杠什么意思呢?点杠表示的是当前层级,当然你也可以理解为是当前文件夹,那咱们分析分析,以这个路径来看当前文件夹是谁?你看当前文件夹应该是course,而这个 H5 点 html 它是当前的文件,是 course 下边的一个文件,所以所在目录应该是course。
那既然所在目录是 course 的话,当前文件夹咔一弄一截,最后的结果就会形成 course CSS app 点 css。
那同理 js 这个也是一样,它表示是当前文件夹下的 js 下边的 APP 点 js,当前文件夹是course ,所以说最后形成的完整 URL 就应该长成这个样子,哎, course 下边的。
那其次咱们再来看这个点点杠image。点点杠,咱们说过是上一级目录,当前目录是course ,上一级目录是谁啊?上级目录就是这个根目录就是最外层目录,所以说最后形成的 URL 就是这个样子,哎, image 下边的 logo 点吸引进。
好,其次还有一个,大家看这点点杠,再来一个点点杠什么意思啊?上一级的上一级,这个时候同学可能会说,那肯定是往这走了,其实不对啊。那么这个斜线呢其实已经到了最外层了,你这个点点杠已经到最外层了,你说我再来一个点点杠,对不起,这个孙悟空,他逃不出如来福的这个手掌心,是吧?你已经在最外层了,你就不能再往外逃了,所以即使你这再加了一个点点杠,你依然是在最外层这个斜线下边,所以最终的 URL 它是长成这个样子的。
好,那么下边的话,强哥来给大家演示一下子,咱们接过来再写一个注释,来一个相对路径。这里我还是以 a 标签来为例给大家演示,咱们先不演示别的,因为这个 a 链接它好理解一些。
好,我这写一个点杠 CSS 下边的APP点CSS,这是访问CSS。
大家同学可能会说,强哥,我怎么感觉这个怪怪的,没怎么写过哎。其实这也是一个资源,咱们点击也可以给他发请求的啊。
没事,行,咱们点开瞅一眼,打开它。打开它之后我这里还是加一根横线,咱分割开。
刷新界面,你看当前咱的URL,它是长成这个样子的代码下边的 13 URL 点html,
那所在目录是谁啊?是代码,也就是当前目录是代码,
然后咱这个点杠 CSS 下边的 APP 点CSS, APP 点 CSS 其实是代码下的 CSS 下的 APP 点CSS,所以最后的结果应该长成这个样子。
贴个图,哎,把它放过来,它最终应该长成这个样子。
我们来验证一下,看看是不是这么一回事啊。
点击好,然后往下拉,对照一下子,你可以看一下,没有问题,这个 404 你不用管它,这个不是咱们考虑的一个重点。
好, URL 拼接这个第一个没有问题,下边的话咱们来看第二个,这是 JS 那个,哎,咱这写一个JS ,把前面这个点杠去掉,后边写一个 APP 点 JS 保存。
咱们来验证一下子退回来刷新界面,然后这个审核一下子看这,这是当前文件夹下的JS 下边的 APP 点JS ,最后的结果应该长成这个样子,
咱们点击试一试,走,往下拉看一下,没有问题啊。
好,其次咱们再来看下边一个点点杠,哎,我这里把它嘎掉,来个点点杠,下边的image,下边的logo点png,往上边走一走,访问图片。
好,咱们切过来看一下,往回退。刷新界面,然后注意观察它是点点杠往上走一级目录,所以最后的结果应该是这个样子的。它俩一综合一运算,所以最终结果应该长成这个样子,最后应该长成这个样子。
好,我们来验证一下子,点击图片走起,往下拉,看看是不是这么回事?没有问题。
好,其次咱们再来一个,往下再来一份儿,我再写一个点儿点儿杠,好保存,咱们看看它能不能掏出手掌心,是吧?
结果来,退回来刷新界面,然后点击(第二个)访问图片,你看这个结果跟刚才那个结果其实是一样子的,
那么相对路径我来补充一下子,咱们平时在学习阶段,在练习阶段其实用的是比较多的。但是在项目阶段,在项目运行阶段用的是比较少。同学可能会比较困惑,为什么呀?我觉得这个挺好使的,
这里我得说一下,就是相对路径它其实不可靠。
相对路径它不可靠,不可靠体现在哪呢?不可靠体现在于它与页面儿 URL 的路径相关,它是参照当前页面儿 URL 的,所以说当页面儿 URL 的路径它不正常的时候,我们使用相对路径去获取资源就会出现一些异常,
大家所以说我怎么没感觉呢?我这会跟你说,你可能感知不到了,后边你学习到了路由,咱们指的是前端路由那块,你就能有所感觉。所以相对路径咱们学习阶段用的多,但是在项目的阶段用的还是比较少的好。关于相对路径这块内容我们就补充这么多。
062_http模块_页面URL的使用场景
hello,大家好,这小节的话,我们来对网页当中 URL 的使用场景来做一个小结,总结了一下,大概有这么几个场景,当然是包括但不限于
第一个,就是 a 标签的HREF,这个的话我们用的比较多,去点击做跳转的。
其次是 link 标签里边的HREF,这个用来引入外部的 c s。
然后 script 标签 src 属性,
还有 image src, video audio src
form 的 action
以及阿卡克斯请求当中所使用的URL,
那么这些场景当中他们都用到了URL,并且在这些 URL 的使用当中,他们既可以使用相对路径,也可以使用绝对路径,并且相对路径和绝对路径的特点都是吻合的。
好,那么下面的话,我们对之前所做那个练习再做一个改进。切过来,大家可以看一下,这是我们之前写那个服务。然后现在的话我们打算给大家调整一下子,首先把服务启动起来,一个 NODE Server 点 js 启动起来
之后我想访问一下 index 点 h t m l 应该怎么办呢?我们打开浏览器,在这里去输入 127.0.0.1 冒号 9, 000 斜线 index 点 h t m l 敲回车。
好,大家可以看一下这个网页,已经是出来了,
网页出来之后,这里我有一个问题,有一个需求就是我想去引入这个 CSS 下边的 APP 点CSS,那这个时候的代码应该怎么写呢?此时同学可能会说,强哥这个很难啊?这个来个link,然后里边去写点杠 css 下边的APP点 CSS 这个写法对不对呢?
这个写法其实是正确的,我们切过来可以来看一下刷新界面,你可以看是好使的。
下面的话我们具体的把这个请求的过程给剖析一下子。首先第一个请求,他先去请求 h t m l,请求在过去之后服务端把 index 点 html 的文件内容返回给浏览器,之后浏览器开始解析 html 内容,解析到另一个标签儿,发现这是一个外部的 CSS 文件,并且还是一个相对路径。
所以它会跟咱们页面 URL 的路径去做一个计算,那么当前 URL 路径它的所在目录是在根目录下边,也就是在最外层文件夹下,然后咱们这个是一个点儿杠,在当前文件夹下,所以它们两个一拼接就形成了这样的一个效果。
好,那么咱们可以来看看这个请求是不是长成这个样子,点击它看看请求的报文,点击可以看看请求路径,是没有问题的,
那么当这个 CSS 请求在到达 9, 000 端口之后,我们的回调函数它就会执行,也就是这个
它一执行就会根据请求的路径到网站的根目录下边去寻找文件。网站根目录是谁呢?是这个page,然后去找CSS,去找APP点CSS,找到之后再把文件内容响应给浏览器,这样一来样式就回来了。
好,那么下面的话咱们回过头来再去分析一下,除了这样子写之外,还有没有别的办法能够去将那个 CSS 导入呢?
其实是有的,那就是不加点儿,没有错,就是不加点儿,直接斜杠开头儿
这种形式它也是好使的,这是一个绝对路径,在发送请求时会直接跟页面儿 URL 的协议 、IP 还有端口去做一个拼接,也会形成这样的一个请求报文。
然后到服务端那个文件夹里边一找CSS,就会把结果返回给浏览器。
那么其实除了这种方式之外,还有另外一种方式,那就是写完整的 URL 形式
来个 http 127.0.0.1,冒号 9, 000,这个它也是好使的,
咱们可以来先看看效果,然后刷新界面瞅一眼,没有问题。
那么下面的话咱们再来说一下,在实际项目当中这种形式咱们是不会用的,为什么呢?你想这样做就把端口还有 it 全都固定死了,将来如果我的服务端口发生了变化,比如说不是 9, 000 了,我换成了80,那么网页当中 URL 的端口得变,不仅如此,将来我们这个 IP 地址也可能会发生变化。而你这里把它固定死之后,到时候我们还需要对它作为更新,明显它是不方便的。
那不用,这个咱们应该选择哪个呢?应该选择第二个,也就是这个斜线开头的路径,当时我们说过这种形式的绝对路径在发送请求时,它会跟页面 URL 的协议,还有这个 IP 以及端口去做一个拼接。所以将来即使你更换了端口,更换了 IP 对他都没有影响,他还是能够把这个请求发送到咱们这个服务当中,然后获得对应的资源。
当大家可能会说,那为什么第一种不行呢?第一种他有些不可靠,它会随着页面 URL 路径的变化而变化,所以说的话会出现一些意外的情况,大家同学可能会说,那我就想看这个意外,你先别着急,等到后边我们讲到那个模板引擎的时候,我会给你演示为什么这个相对路径它不可靠。
063_http模块_设置mime类型
hello,大家好,这一个小节我们来完善一下之前所做的那个静态资源服务,来设置一下响应资源的 MIME 类型。那首先咱们先来看看什么是这个 MIME 类型?它是四个单词的首字母的拼写,叫做 Multi purpose Internet mail extensions,直译过来的意思就是多用途的互联网邮件扩展。
不过我们一般不用这个直译的内容,而是会把它称之为是媒体类型,有些时候也称之为是资源类型,那 MIME 类型它是一种标准,用来表示文档文字或者字节流的性质和格式。
这个 MIME 类型的结构长成这个样子,它有两部分组成,第一部分是主类型,而后边这个内容是一个子类型,中间用一个斜线分割。
我们之前设置过 html 的类型,设置为 text 的斜线 h t m l,还设置过那个 CSS 的类型,用的是 text/ CSS。当然还有图片的类型,比如说 JPG 的类型是 image 斜线JPEG,前边是一个主类型,表明它是一个图片,后边JPEG 表明它是一个JPEG 的图片。
那么在 HTTP 服务当中,我们可以通过设置响应头 content-type 来表明响应体资源的 MIME 类型,那有了这个信息之后,浏览器就会根据这个类型来处理响应体的这个资源。
好,下面这些的话是列了一下常见资源,它所对应的 MIME 类型,html 对应这个, CSS 对应这个。
好,接下来的话我们在代码当中去做一个实现,打开编辑器,首先的话我们先打开Server,点JS,就是我们之前所编写那个静态资源的服务,那我们在哪去设置响应头?其实应该在这个位置,就是当我们在读取文件内容之后再去设置这个响应头,但是我们这有一个问题,就是这个响应头 content type 咱们应该给成什么样的值呢?这个位置显然它不能写死,写死的话就会造成类型的混乱,因为有些时候它获取的是html,有些时候获取 CSS 获取JS,所以这个值显然是不能定死的。
那不能定死咱们怎么做活呢?咱们可以这样做,就是根据请求文件的后缀来去决定这个类型。比如说你是html,我就给你设置 html 对应的那个 type 值, c s s 的,给你设置 c s s 的。
好,那么下面的话咱们开始做一下,首先第一步要做的就是要获取文件的后缀名,那文件后缀名咱们怎么获取呢?简单,之前咱们讲过有一个模块,那个模块的名字叫做path,等于一个 required path,把它先弄进来,
弄进来之后咱们要获取后缀名 let ext,等于一个 path点儿 ext name,咱们把它拿过来,拿过来之后咱们先看看能不能获得这个 ext。
当然了,需要把那个文件的路径给传进来,光有这个不行, filepath是那个文件路径,把这个setHeader咱们先注掉,
把这个服务咱们跑起来,右键终端来一个 NODE Server点 JS 敲回车。好,打开浏览器,打开之后咱们就访问一下这个 9, 000,然后下边的 index 点 h t m l 走起,那么咱们去看一看能不能获得这个请求的后缀。
切过来可以看一下,诶,这有HTML,这有CSS,哎,为什么有两个?因为咱发了两次请求,你这个 html 里边有一个 link 就获取 CSS 的好,那么获取完后缀之后还有一个小瑕疵,就是在前边多了一个点儿,
所以我们打算把这个点儿再卡掉。
怎么看呢?可以来一个截断,来一个slice,从下标1开始截取。
来,再来试一次,切过来发请求,走起,看一下后缀,后缀就有了。
有了后缀之后咱们接下来就可以把这块内容拿过来用一用。
当然了,说一下咱们在项目里边不会这么去做,不需要这么去做,因为有现成的模块帮咱们去实现这个 MIME 类型的一个设置。
好,在这里的话我们声明一个变量,来声明一个变量, let MIMES 等于一个对象,然后把那个类型拿过来
之后的话,咱们就可以去获取这个后缀它所对应的类型了。获取对应的类型 let type 就等于一个 MIMES 下标的 e x t。
好,获取完类型之后咱们就可以去设置了。但是这里还有一个情况,就是它可能获取到,也可能获取不到,因为你想可能后缀不在这里边,比方说我有个 ABC 后缀,是吧?不在这里边,那怎么办呢?
所以咱们这儿给做一个判断,如果说 type 这个值有,表明匹配到了,这是匹配到了,然后 else 这是没有匹配到,匹配到了怎么办呢?咱们应该这么去做,就是 response 点儿 set header content type 这个值应该是这个 type 值。
好,然后如果说要是没有匹配到,大家注意看这个文档。这里做了一个说明。
对于未知的资源类型,我们可以选择这一个类型,当浏览器在遇到该类型的响应时,它会对响应体内容做一个独立的存储,保存到文件当中,这就是我们常见的下载效果。
好,我们把这个类型 copy 一份儿,然后切回来。在这里我们去做一个设置,来一个 set header,然后呢 content type 把它往这一放,搞定好了。
到这的话我们这个 MIME 类型就已经设置好了,咱们来看看效果怎么样?按上敲回车,然后打开浏览器去访问一下子。
好,没有问题,咱们打开F12,看看网络响应头对不对?先看 HTML 的 contain type 是 HTML
CSS 的,点开看看是CSS,
当然还有 JS 的 JS 也可以,那咱们这写一个 JS 下边的 APP 点JS,你可以看一下,这个响应头也是没有问题的。
不仅如此,图片也OK,诶,咱们这里来一个 images 下边的 logo 点png也是可以的。咱们可以看看这个响应头,打开瞅一眼,没有问题。
大家同学可能会说,强哥,我怎么感觉这代码加和不加没什么区别啊。你小子真聪明,是吧啊?真被你发现了啊。确实,咱们加上这个代码跟没加没什么区别,但是我们加上这样去做会更为规范一些,
为什么咱们不加?它也好使呢?就是浏览器它有一个 MIME 嗅探这样一个功能,就它会根据响应回来的内容来去判定这个资源的类型,所以说咱们不加类型也是可以的,但是加上更为规范一些。好了,那么关于MIME类型的一个设置的话,我们就先说这么多。
064_http模块_解决乱码问题
hello,大家好,这一小节我们来解决一下上一课节遗留的乱码问题。
在上一个节,在加完这个 map 类型之后,我们的 js 文件响应时,它出现了乱码,
那其实不光 js 会乱码,如果说咱这 CSS 的文件里边要是有中文的话,它其实也会乱码。
我来给大家演示一下子,我补一个中文,我是个注释,保存,写完之后咱们重新启动一下子,来看看效果。
切过来把它复制一份儿放到这儿,然后这儿来一个CSS, APP 点儿CSS,大家可以看一下这个文件它也会乱码儿,
那么该如何解决这个乱码儿问题呢?其实比较简单,我们只需要在设置类型的后边儿,再加上 UTF-8的字符集就可以了。
好,为了方便演示,强哥先把之前固定的那个内容咱们先写,先写出来 text html 然后 charset 等于一个 utF 杠 8 保存。这个 type 变量所保存的是这个类型的值,所以我们只需要把后半部分加到 type 的后边就可以了。
好,加完之后咱们重新启动一下子,看效果怎么样?切过来刷新界面,不乱码了,
再切过来刷新不乱码了。
好,到这这个乱码问题就解决了。
那么解决完乱码问题之后,强哥想再做一点补充。我首先把代码先还原回来之后咱们可以看一看,他还是会乱码,哎,这个也会乱码,但是有一个哥们儿他不会乱码儿。
是谁呢?就是这个 index 点儿 h t m l。这哥们他是不会乱码的,哎,你看很奇怪,对不对?哎,你看这个乱,这个就不乱。
为什么这个它没有乱码呢?主要原因是因为 index 点 html 当中它有一个 Meta 标签儿, Meta 标签儿把这个字符集设置为了 UTF 杠8,所以才使得这个 html 文件它没有乱码儿。
由此可以看出,针对于网页字符集的设置方式有两个,第一个是设置响应头,第二个是meta标签,这个时候就会衍生出来一个小问题,就是他们两个谁的优先级会更高一些。
好,下面的话强哥来给大家做一个测验,我们在这里再加上这个字符集,然后我把字符集故意写错,我就不写成 UT F 杠8,我写成 GBK 之后就形成了一个差异,这儿给成GBK,而 Meta 标签改成了UTF 杠 8
咱们去看看哪个会生效?重新启动一下服务,咱们切过来刷新界面瞅一眼,你会发现此时这个响应头它这个字符集生效了,因为它确实页面乱码了,
为了让这个实验更有说服力,我们把这个切换过来,这来个 UTF 杠8。然后这我们写成一个GBK,
好,再次重新启动,咱们来看看最后的结果怎么样?结果来刷新界面瞅一眼,那么你会发现这个页面它就没有乱码。
由此就可以得出一个结论,哪个优先级更高呢?其实是设置响应头,这一个优先级会更高一些。好了,
这给大家做一个补充了解即可。不过咱们在绝大多数情况下,对于这个字符集都是不会搞差异化的,他们两个会保持一个统一。
那么下边的话再来做一个补充,什么呢?就是对于网页的一些外部资源,
比如说CSS,比如说JS,比如说图片。
那么对于这些资源他们在设置响应时,其实是没有必要去设置这个字符集的,这些资源在进到网页当中之后,都会根据网页的字符集来对响应结果去做一个处理。
我们可以打开京东去看看它的一个响应的效果。打开京东之后,我们打开网络控制台,把它拎起来,然后咱们点击全部刷新界面瞅一眼。
先看第一个请求,是获取html 的,它是有字符集的,
然后咱们点击CS,你发现这里没有字符集,
咱们再去看看 JS 文件响应,点开 JS 的,它在这里响应时也是没有字符集的。
那么这些资源在进到网页当中之后,都是按照这个网页的字符集,也就是这个 UTF-8 的字符集来对这个结果做一个处理,所以说是不会产生问题的。
大家有同学可能会说,那强哥会不会是因为它这里没有中文,所以说没有必要设置字符集呢?
还真不是这样子,我们可以打开其中某一个 JS 文件,比如说这个咱们打开可以看一下,它其实是有中文的,而且这中文它也乱码了,
但是即使这样子它都不影响在网页当中的一个执行,为什么呢?就是因为当这个资源再回到网页当中之后,它会以网页的字符集去做一个解析,所以说的话它是不会出现问题的。
那么下边的话,咱们把这个代码稍微调整一下,做的跟这个京东表现一样切过来。怎么来做呢?我们只需要去检测一下这个文件到底是不是 h t m l 就可以了。你看如果说 ext 它是一个 h t m l,那好,我去给你加上这个 UT F 杠 8 的字符集,那如果说你要不是 h t m l,我就不需要再加字符集了,直接把后边这一块给它咔掉,这事就齐活了。
好,我们重新启动一下,来看看效果怎么样?切过来打开它,刷新界面,打开网络控制台,咱们去看看这个响应有没有字符集,可以看一下。有。
而 CSS 的这块它有没有字符集呢?没有,所以说这样一来的话,我们这个效果就跟京东它那个字符集的一个设置效果就一样了。
好了,那么关于字符集这一块的一个内容补充呢?我们就先说这么多。