00:00
Hello,大家好,那么这个小节我们来演示一下,在Chrome浏览器,也就是在谷歌浏览器当中,应该如何去查看我们的请求报文以及响应报文。好了,那首先我们先先点开这个谷歌浏览器,我们就以呢搜索百度搜索鼓励学院这个请求来为例。看一看效果。首先先打开控制台,按一下F12。按完F12之后呢,点击这个位置。这是一个标签页,对不对?哎,这有一个network,点完之后呢,下边没有内容,你先别着急,接下来的话呢,我们来刷新一下页面。刷新完之后呢,会有很多请求出来啊,我们先说一下这个在这个network下边呢,会列出来当前网页在加载过程当中所有发送的一个请求。都会列在这个位置。好,那么我们这儿点哪个呢?点第一个。
01:01
啊,点击第一个啊,点完第一个之后呢,你就会发现这块呢,它有些内容。看着啊。点开先点一下啊,右边呢,会出现另外一个标签一。啊,有什么呢?有这个head,有preview response in timing和cookie,后边三个呢,咱们先不用管它,我们重点来关注是前边这三个。其实重点关注是谁呢?是两个啊,一个是headers,一个呢是response。这个view呢,是做一个响应的预览。预览就是做一个解析,看解析之后的一个结果。那我们首先先来看一下。He这块单词本身是头的意思。在这一个页面当中呢,它有这么几个内容,有general,有response,有request,还有query string parameters。那么我们重点来看中间这两个。啊,看中间这两个啊,那这里面包含的是response head和request head,那response呢是响应头,而request是请求头,我们先来看看这个请求头,也就是我想知道呢,刚才我刷新完页面之后啊,浏览器到底向服务器发的是什么内容?
02:18
发的是什么内容,我们想看一看。好,请点开这里。点开这里之后,你会发现,你会发现这里有好多东西,这些其实都是请求头内容。请求投你看格式。名字冒号空格后边一长串名字冒号空格后边是内容。那么同学可能说,哎,这里只有请求头,没有请求行,那你可以点击view source。看一下这。点完VO之后呢,你会发现咱们的请求行就出来了。看这请求类型。后边是跟的URL。
03:01
在URL的后边是HTTP的一个协议版本。这就是我们的请求,行。方法,然后外加URL以及协议版本,而下边是一个请求图的一些内容。那么在咱们这块呢,因为是一个get请求,所以说请求体内容是空的,我们这看不到请求体内容,你先别急,待会呢,我来给你演示一个post的请求,你就能看到这个结果了。那么在这呢,我们看完了这个请求头之后呢,先不要急,先看看下边这个query stream。查询字符串。后边这还有个单词叫parameters参数,意思就是查询字符串参数。那么这块内容是什么呢?这块内容是对URL当中的这个参数。注意是对URL当中的这个参数,就这一篇内容。这里边儿参数做一个解析,有IE是吧,有F是吧,这是啊,有WD鼓励学。
04:04
他对参数做了一个格式化。这个呢,对于我们以后调试一些参数啊,很方便,能很准确看到这个参数到底有没有发送过去。要不然的话,你去在这里边去看,很明显是不方便的。啊,这是请求这块内容。下边呢,我们来看一看响应,点开response。Response点开之后呢?这些内容都是什么呢?都是响应头信息。名字冒号空格名字冒号空格,每一个都是这样的格式。那么这里这里啊,注意你看啊,还有也有一个view source的一个小的按钮,点击一下。点完之后呢,你就可以看到原始的响应豹纹。这里只有响应行。和响应头。啊看一下啊,这些都是响应头上面这个是响应好。
05:03
显体在哪呢?显体在这呢?Response。大家可以看一下一大堆的HTML,还有呢,一些内联的这个CS,以及对应的一些GS代码,这个就是服务端返回的HTML内容。好了,回过头来看一下啊,咱们这是拿一个盖的请求做了个演示回来,如何来查看请求内容呢?这个是请求行和请求头的位置。Request headers,这是请求行和请求投的内容,请求体内容现在还没有,一会咱们再说,下边这个呢,是对请求的URL参数,就是对这块内容做了一个解析之后的一个结果。如果你要是有这个参数,它下边就会给你。解析出来,那如果说你要是没有参数这块就不会显示。这是请求,那下边响应怎么看呢?响应点击response headers。
06:03
然后这块内容是响应行和响应头。点击response呢,这个是响应题。啊,这个preview呢,你点开看一下,它是一个。预览就是对响应题内容的解析之后的一个查看界面。是这样的一个效果。好了,这是get请求的一个演示,下面的话我来给你演示一个post请求。我这边以一个某个网站呢,它的一个登录作为演示。啊,这些话可能会泄露我的账号密码,不过没有关系,回头我就把它改了。啊,稍等。然后呢,填充一下。先别急,还是要点开F12。然后点击立即登录,就会发请求走。再来看一看第一个啊,看第一个。然后点开这个logging啊,点开之后呢,你看这块也是head preview和response。
07:05
为空,先别着急,我们重点的来看这个请求的报文。拿过来看这request headers。点开它这个呢,是请求行。下边呢,这一片是请求头,注意观察这一块行,里边呢,方法变成了post。路径呢,是斜杠login。然后呢,协议版本1.1,这个没有问题。那么请求体什么样子呢?请求体来看一下这。Data。啊,点开这个啊,View source,这就是原始的请求体内容。啊,原始的请求体内容,也就是说我们的表单。啊,我们的表单,我们再点击提交按钮之后,浏览器呢,它会帮我们去把HTTP的这个报文呢封装好。他会帮我们去封装好,封装好之后呢,然后发到目标服务器的指定端口去做一个请求。
08:03
啊,表单如此,A链接也是如此啊。也是如此。好了,这是原始的请求体的内容,而这里边内容就是我的。邮箱以及我的密码。以及我的密码,好了,这是当前的一个请求体完了之后同学可能会说,哎,这块response怎么是为空呢?这主要是因为呢,响应的结果呢,它是一个跳转。看这啊,HTtb1.1303CR啊,这是是一个跳转,所以显示体这块内容的话就成了一个空的。我们看不到结果,这个没有影响。啊好了,这当前的话,我们在控制台给大家演示了一下,如何去查看请求报文和响应报文。再来看一下啊,请求报文看这。和下边内容。响应豹纹呢,响应豹纹啊,看这和这。啊,这块呢是响应的行头,然后这个呢,是响应的体。
09:02
下边这块内容是请求行头,这个呢是请求T,如果说你是一个get请求,Get请求有UR参数这块呢会变成。啊,Query string。它会对请求参数这块呢,做一个解析的显示。好了,那么这个内容对于我们来说很重要。啊,因为以后呢,我们在项目当中用到阿贾克斯呢,都要用到这个network去调试问题,去检查参数,去检查响应。啊,它是我们能够,呃,就是定位问题的一个非常重要的工具。好,这个小节我们就先到这儿。
我来说两句