19.尚硅谷_AJAX-AJAX取消请求

哈喽，大家好，这一个小节呢，我们来讲一下阿贾克斯的取消请求。就在请求的过程当中，在结果还没有回来之前，我们可以通过代码来把请求手动取消。刚才呢，我们演示那个超时是时间到了之后，它自动呢就把请求取消了。而这一个小节，我们讲的是手动可以将这个请求取消。来演示一下。现在我们做两个按钮。点开先看一下。点击第一个按钮呢，我们发送请求，点击第二个按钮呢，我们取消请客请求，取消请求就当我们请求还没有回来之前，就结果还没有回来之前。可以通过这个按钮来取消请求。好了，我们来演示一下，首先呢，先来获取这两个元素对象。然后BTN等于一个，咱们加个S。等一个document query select2。

把button呢放进去。然后呢，给第一个按钮呢，绑定事件第7ns下标0.onclick。然后等于一个。然后在里边的发送请求好。啊，X X new xmlht request第一步。然后呢，X点这。Open给谁发？发什么类型，咱们还是发get URL咱们还是给类举啊。HTTP。然后127.0.0.1冒号8000斜杠来一个D类。好，然后呢，下边呢，来一个X做一个发送，下边来一个事件绑定，这样的话事件绑定咱们可以不加。是上，咱们可以不加，为什么？因为咱们这不需要看到结果。我们只要在控制台看到这个请求，取消就可以了。好了，先看效果怎么样。

然后点开浏览器，打开网络控制台在这儿。点击大家可以看一下，请求已经发送过去了。这会说一个pending pending是未决定的，意思就是它依然在请求的过程当中，啊，200回来之后啊，两百一显示就表示我们这个请求已经是完成了。好，请求已经成功。下边呢，我们想取消。怎么取消呢？需要记住一个方法，叫做about。这个abroad方法呢，它是属于aja对象的，就是这个啊。X对象。那么咱们这儿呢，想要去点击这个按钮取消请求，那我们首先肯定是要给他绑定事件。然后呢，在里边我们要调一下x.about。但是呢，有一个问题，就是它们两个呢，处在不同的函数内部。是不能够呢，直接在这个函数里边用X变量的。

那么我们该怎么办呢？我们就需要把这个X放到外侧。Let X等于no。我们这儿不能使用cost，为什么呢？因为使用cost的话呢，它的值一变更，变更的话就会报错。所以咱们需要使用let。好了，咱们看效果怎么样，切过来刷新页面，点击请求发送。然后结果回来好，点击取消，点击取消点击取消，你可以看到我们就可以手动来取消这个请求了。这就是当前呢，我们给大家演示了一下啊，Jack请求的一个手动取消，只要调用aboard方法就可以完成这个目标。好，那么这一个小节我们就先到这儿。