00:00
Hello,大家好,这一个小节我们来讲一下呢,阿贾克斯当中的IE缓存问题。好了,那么大家注意观察,我这新建了一个文件,这个serve GS呢,依然还是咱们那个服务端脚本。横左边这个地方,我就把它折起来了啊,扣起来。这个是前端的代码,这个呢是后端的服务。那咱们这块的话,依然是采用点击的方式发送阿贾克斯请求来做一个演示。咱们要做一个获取。Constant b dn等于个document.get elements by name。然后这里边儿呢,写一个button。下边来一个零。然后顺便呢,把result也做一个获取啊,Result等于一个document query select。然后把井号的result放进来。啊,现在开始绑定事件Btn.a listener。我写。绑定事件还是一样啊,先做测试。
01:02
来个test。保存。了,那么浏览器打开把别都关一下。然后双膝不是打开控制台。然后刷新页面,点击没有问题。什么是IE缓存问题啊,咱们先说一下啊,就是IE浏览器呢,它会对阿贾克斯这个请求结果呢去做一个缓存。啊,把这结果呢缓存起来,那么这样就会导致一个问题,那么下一次再去发送请求时呢。它呢,这个时候走的是本地的缓存,而并不是服务器返回的最新数据。这样一代的话呢,对于时效性比较强的一些场景,阿贾克斯的这个缓存会影响我们这个结果。啊,它不能够正常去显示。所以咱们要把这个问题呢解决一下。呃,接下来的话呢,我们开始向服务端发送请求啊,Com X HR等于一个new的xml http request,这是第一步,然后呢,咱们第二步的话是XHR.open get给谁发HTTP啊127.0.0.1斜杠,所以应该是冒号8000。
02:09
斜杠。咱们给谁发呢?咱们这样子啊,把它复制一份。然后在下边儿这个位置呢,咱们再来加一个规则是。是专门针对啊IE缓存的一个规则。咱们这写一个IE。然后呢,在下边这个位置的话,我们就写一个hello IE。就是给他发请求。好,那这样的话呢,路径就是一个IE。搞定下边的话,x2.3的发送以及事件绑定。Function。里边做判断啊,If X点啊,所以应该是XHR.ready state等于一个四。并且XHR点要大于等于一个200,并且。
03:01
然后呢,小于一个300。好了,然后呢,现在的话,这个结果呢,咱们还是放到div当中去做一个呈现啊,HTML等于一个x2.response。保存,接下来咱们点开浏览器啊,刷新点击你看结果,Hello IE就来了,点开network,你再看一下结果。Response,没有问题。那么成功以后呢,咱们接下来呢,在服务端对这个返回结果呢,做一个变化,比如说我这来一个二。保存。切过来我再点,你看这个Chrome浏览器,就是谷歌浏览器,它能够正常的识别到。注意啊,我再说一下,因为咱们现在这块呢,我已经使用note mon来启动脚本了,我只要一保存它就会重新启动服务。啊,这个大家解释一下。下面我们开始点开IE浏览器是吧,一个神奇的浏览器。我把它复制一份,然后IEIIE个。
04:01
然后呢,接下来我把路径呢放过来,CTRLV敲回车。他说呢,无法找到这个文件,那么这个时候咱们该怎么办呢?别慌啊,找不到的话,咱们就换一种方式来启动。看看一下,我右键来一个live server打开。Live server打开。咱们还是要先测试一下Chrome好使不好使。点击。二然后我来换一个三。保存切过来再点击啊看三会变化。有好这块呢,稍微的有点。稍微有点这个。小的影响啊,不过影响不大啊,来,我把这个呢复制一份拿过来往这儿放一下,CTRLV走起。看好了兄弟们,我点击结果是三对吧,结果是三以后呢,我把这个结果呢,改一改,改成一个四保存点开IE,你再点你看它还是三。啊,它还是三,因为因为什么它走的是缓存,你看看Chrome对吧,然后点击它是四。
05:02
这样的话呢,这个IE呢。他把缓存呢,1111加,加完之后,我们这个返回结果就不能够啊,及时的返回给客户端浏览器的。那么针对这个问题的话,咱们需要做一个解决啊,因为数据一缓存就会导致呢,最新结果不能够正常呈现,那怎么办呢?我们可以这样来做重点啊,咱们整个案例当中最重要的一个点出现了,其他的都是为他在做啊。铺垫好,然后里边咱们来个T。等于一个加。点no。首先data now的意思呢,是获取当前的一个时间戳。获取当前的一个时间戳,那么咱们知道啊,这次点和下次点这个时间戳一定不一样。啊,那不一样的话呢,浏览器,浏览器就会认为你这是两次不同的请求。啊,因为你的URL呢,它是不一样的。那么这个时候他就会重新去发一个新的请求,而不会走本地缓存来看一下,然后呢,我打开控制台。
06:04
然后呢,点击你看这儿点击,然后点击每一次都不一样。啊,咱们再点开IE看一下啊,然后点击是四对不对,然后我切过来。把它呢,变成一个五。保存,点开IE浏览器看这点击65。这个时候的话就不会走缓存了,而是会向服务器再发请求,获取新的结果,这就是IE缓存,就是阿贾克斯IE缓存的一个解决的方法,就是我们可以在这加一个参数,而且参数每一次的值都是不一样的。这样一来,就可以把缓存问题解决。那么在实际工作当中的话,这个参数其实我们是不需要自己去加的,因为工具都会把这些事情都做好。啊,所以我跟大家说一下,你也知道有这么一个问题。这一个小节,我们就先到这儿。
我来说两句