00:00
哈喽,大家好,这个小节的话,我们来演示一下阿贾克斯操作的基本步骤。我们还是以这个案例为支撑去往下进行。我们接下来的话呢,就按照需求往下推进。要点击这个按钮,然后发请求。既然点击按钮去发请求的话呢,我们现在势必呢,就要获取元素,并且给他绑定一个事件。啊,获取八层元素。然后BTN等于一个document.get elements by name。啊,把这个button呢放进来。后边需要补一个下标零。这是第一步啊,第二步的话呢,咱们需要绑定一个事件。Bet on click。我们这里呢,借助于盗墓零的方式去绑定。接下来的话呢,我们先做个测试。Log test。
01:01
好帅。点开浏览器,刷新页面。点击。点击没有问题,正常的输出。那下边的话我们就可以呢,去进行阿贾克斯操作了。那么阿贾克斯操作这块呢,分为四个步骤。第一步呢,是创建对象。啊,XHR等于一个new的xmlhttp request。注意这个名字,你可以变化。啊,你可以写A,可以写B,可以写ABC。这里为什么选择使用XHR呢?是因为它呢,是后边。这一个单词首字母的一个缩写。它是三个单词拼接起来的。这是一个方面啊,另外一方面大家注意。在网络控制台这块有一个XHR。他这块呢,是对阿贾克斯请求的做一个筛选。所以说以后呢,看到XHR之后呢,你要想到是阿贾克斯。
02:06
好,这是第一步啊,创建对象。第二步呢,是做一个初始化。设置请求的方法和这个。UL。X h2点啊,这个方法名字叫做open。里边呢,接收两个参数啊,第一个参数是发送什么类型的请求。第二个参数呢,是给谁发。咱们这呢,发送一个get请求,给谁发呢?给他发。给他发他的URL是什么呢?他的URL是HTTP。啊127.0.0.1冒号8000啊斜杠来个。注意,前边这块内容不能省略。啊,必须要写上,什么时候可以省呢?后边咱们再说,目前这个阶段大家一定要写全。好,这是第二步,那么下边第三步是做一个发送。
03:01
然后XR点。啊,然后下边第四步,第四步呢,是做一个事件绑定。然后这个事件保定的一个作用呢,是处理。啊,服务端。返回的这个结果啊,返回的结果。好,来绑定一下X h2点,On ready state change。这个事件名称啊,应该是目前为止我们所见过的事件当中最长的一个名字。然后呢,这个单词呢,咱们来需要简单的给大家拆分的讲解一下。On这个单词本身有win的意思,就是当什么什么的时候。那咱们当时讲的学过的那个on click是吧?On d BL click on mouseover,就当点击的时候,当双击的时候,当鼠标移入的时候。这是on,然后另外一个呢,是ready state。这个reading它是。这个XHR对象中的一个属性。
04:04
啊,表示这个状态。表示状态啊,那么它的这个他这个状态呢啊表示。那么这个属性呢,它有五个值,分别是零,一,二,三,四。零呢表示是未初始化,它最开始这个属性的值就是零。而一呢,表示这个open方法已经调用完毕。二呢,表示是sin的方法已经调用完毕。三呢,表示服务端返回了部分的结果,而四呢,表示服务端返回了所有的结果。这是ready state这个属性对应的一个值,总共有五个。然后下边呢,还有一个是change。Change,单词本身是改变的意思。改变呢,咱们之前也接触过,在哪呢?就在那个下拉框。
05:02
那个元素有一个unchanged事件。就是当改变的时候呢,出发。改变的时候。有所改变,这是改变的意思啊,好了,那么在这的话呢,咱们想一想这个readyt,它总共有五个值。那么在这儿呢,它会触发几次呢?他应该会触发四次。啊,改一次触发一次,改一次触发一次啊改一次触发一次是这么一个效果。就零到一一次,一到二一次,二到三一次,三到四一次。总共四次。然后在里边呢,我们要处理服务端返回的结果,但是要注意。啊,我们在状态为零的时候可以处理吗?不能,为什么?因为服务端没有反馈结果。啊,我呢,还没法请求呢,一呢可不可以呢,也不行,二呢也不行,三呢。不合适。不能说三不行,因为三的话已经返回来部分结果了。那么所以说呢,咱们应该在哪,应该在四。来去做服务器返回结果的一个处理,因为当四的时候呢,就是所有结果全部返回。
06:06
所以咱们这儿呢,会做一个判断。如果XHR.ready state是等于一个四。这个呢,就表明。啊,服务端。服务端返回了所有的结果。啊,返回来所有结果,这是状态V4的时候。然后咱们在做处理的时候呢,还会在里边再做一个判断。判断什么呢?判断这个响应的状态码。啊,咱们提过,哎,有200是吧,有这个404啊,有这个403,有什么401有500这样的响应状态码。那么什么时候咱们才能够正确的去出拿到啊,正确拿到这个服务端返回的这个结果呢。就当他为成功的时候。所以说在这咱们还会再去做一个判断,哎,ifx2.status老师。
07:01
等于多少,等于个200。其实在这儿呢,我们多说一句。响应状态码当中二开头的。都是表示成功。并非只有200表示成功啊,二开头的都是表示成功,什么201206啊都是成功,所以说在判断的时候呢,我们可以这样来判断,换一种方式。大于等于一个200。并且呢。并且。小于一个300。那么只要你这个状态码落在了200~300之间,我都认定你是一个成功的。那么成功以后呢,咱们就要处理。服务端响应的结果啊,处理这个结果。好了,这是当前的话,咱们做了两个判断啊,一个是判断呢,这个对象它的一个状态是不是到最后一步了。顺便还要判断一下服务端返回的响应状态码到底是不是200~300之间。
08:03
那如果是。怎么办?如果是的话,咱们就处理服务端返回的一个结果。那么这个结果咱们当时讲过啊,它包括四部分行。头。空行和体,对于空行来说,它并没有实际的一个意义,对于我们来说啊,在应用层来说并没有什么实际意义。因为我们想要拿数据。啊,想要拿数据啊,好了,咱们一点一点的对这个行头体里边的结果来做一个。获取,并且做一个打印。首先第一个是响应行。前一行不知道大家记不记得啊,咱点开HTTP协议看一下。前一行呢,包括三段。这个协议版本咱们不需要,咱们需要后边两个东西。状态码和状态字符串。来看一下log xr.status这个status里边保存的就是显应行。
09:02
里边的啊,所以是响应行里边的响应状态码。状态嘛。好,再来log。XR.status text。这个是什么呢?这个是响应的状态字符串。状态字符串。然后再来还有log,来个XHR.get all response headers。这个是响应头。是所有的响应头。啊,这是服务端返回的啊,所有的响应头在这儿呢,那么响应体在哪呢?响应体在这呢。Response。好了。这是这个啊,我们的响应体显著是响应题。现在的话,你想一下,我们就拿到了服务端给我们返回的所有结果。行里边包括的状态码。以及状态字符串。
10:02
显烟头以及响应体。阿贾克斯。在这块。是能够拿到所有的响应的。好了,我们一起来看效果怎么样。点开浏览器,刷新页面。把这个卡掉啊,然后点击。然后呢,你看啊,这个请求已经发送成功了。然后点开它。点开它之后呢,咱们看一下这个谁呢?看先看这吧,先看O吧。这是状态码。状态字符串,这是响应头,这个呢是响应题。啊,这个是响应题,好了,看一看network里边具体的交换啊,具体的一个啊请求和响应结果。首先先来看一看这个请求头。点击view source看整个的请求报文。啊,这是启牛行。House的主机名。OK,没有问题,然后先来看看这响应头点开。就是这个。哎,然后看下应题在这儿,Hello,阿贾克斯。
11:03
所以说现在的话,我们就可以呢,拿到。这个应的结果,那么应果后呢?我们需是要把应的结果div当做呈现。在这。那这个的话也就比较简单了啊,等于一个document。点get element by ID,把result放进来。然后result in HTML。把这个去一下。是设置result的文本。result.html等于一个谁呢?等于一个HTML等于XHR.response。哎,看看效果怎么样。刷新点击这。我们并没有呢,进行页面刷新,就从服务器,然后拿回来最新的一个结果。
12:04
好,那么这个小节的话,关于啊价格请求的一个基本操作,我们就先到这儿。
我来说两句