温馨提示:文本由机器自动转译,部分词句存在误差,以视频为准
00:00
哈喽,大家好,这一个小节呢,我们来讲一下阿贾克斯的取消请求。就在请求的过程当中,在结果还没有回来之前,我们可以通过代码来把请求手动取消。刚才呢,我们演示那个超时是时间到了之后,它自动呢就把请求取消了。而这一个小节,我们讲的是手动可以将这个请求取消。来演示一下。现在我们做两个按钮。点开先看一下。点击第一个按钮呢,我们发送请求,点击第二个按钮呢,我们取消请客请求,取消请求就当我们请求还没有回来之前,就结果还没有回来之前。可以通过这个按钮来取消请求。好了,我们来演示一下,首先呢,先来获取这两个元素对象。然后BTN等于一个,咱们加个S。等一个document query select2。
01:00
把button呢放进去。然后呢,给第一个按钮呢,绑定事件第7ns下标0.onclick。然后等于一个。然后在里边的发送请求好。啊,X X new xmlht request第一步。然后呢,X点这。Open给谁发?发什么类型,咱们还是发get URL咱们还是给类举啊。HTTP。然后127.0.0.1冒号8000斜杠来一个D类。好,然后呢,下边呢,来一个X做一个发送,下边来一个事件绑定,这样的话事件绑定咱们可以不加。是上,咱们可以不加,为什么?因为咱们这不需要看到结果。我们只要在控制台看到这个请求,取消就可以了。好了,先看效果怎么样。
02:00
然后点开浏览器,打开网络控制台在这儿。点击大家可以看一下,请求已经发送过去了。这会说一个pending pending是未决定的,意思就是它依然在请求的过程当中,啊,200回来之后啊,两百一显示就表示我们这个请求已经是完成了。好,请求已经成功。下边呢,我们想取消。怎么取消呢?需要记住一个方法,叫做about。这个abroad方法呢,它是属于aja对象的,就是这个啊。X对象。那么咱们这儿呢,想要去点击这个按钮取消请求,那我们首先肯定是要给他绑定事件。然后呢,在里边我们要调一下x.about。但是呢,有一个问题,就是它们两个呢,处在不同的函数内部。是不能够呢,直接在这个函数里边用X变量的。
03:00
那么我们该怎么办呢?我们就需要把这个X放到外侧。Let X等于no。我们这儿不能使用cost,为什么呢?因为使用cost的话呢,它的值一变更,变更的话就会报错。所以咱们需要使用let。好了,咱们看效果怎么样,切过来刷新页面,点击请求发送。然后结果回来好,点击取消,点击取消点击取消,你可以看到我们就可以手动来取消这个请求了。这就是当前呢,我们给大家演示了一下啊,Jack请求的一个手动取消,只要调用aboard方法就可以完成这个目标。好,那么这一个小节我们就先到这儿。
我来说两句