13-cookie和session/20-尚硅谷-书城项目-验证码的切换

那么这个验证码呀，讲到这里其实就差不多了，呃，咱们验证码还差着什么东西，我不知道大家网上有没有注意观察过，一般这个验证码呢，用的时候是不是有可能会出现你看不清的情况啊，那这个时候怎么办呢？这个时候你是需要去刷新这个验证码的，怎么办？一般我们点击这个图片的时候，他就要刷新一下。哎，所以现在我们来实现了这个功能，切换验证码啊，切换验证码怎么办？我们首先得给这个图片把上单击事件。来我们看一下哈，哎，咱们都关了，这东西有点多了，有点乱啊。Close啊，然后呢，找到这个usual的，找到验证码JSP这个哈，完了咱们给这个验证码的图片加一个ID值，叫做code image，然后呢，给它绑上单击事件。来，我们写写。

点click。好，走上啊，咱们说这干嘛给验证码的图片绑定，单击事件，绑定好了以后大家注意看啊，我们先试试看这个单机行不行。我先试试看啊，刷新刷新回来刷新刷新点击这个是不是出来了，那么怎么样让这个验证码刷新呢？其实很简单，大家注意看，只需要第4.src等于大家注意等于什么东西呢。叫做base pass，然后后面跟着这个验证码的地址，就这一段。就完事了。就完事了啊好，把它变成字符串。

但是这里我要解释一下，咱们先看看效果吧，看效果之后我再解释啊。来走走，大家看我点我点我点是不是换了，诶为啥呀，咱们先来看看哈。首先这个Dis是怎么回事？这个src又是怎么回事？咱们先说明一下，咱们说在事件响应的function函数中有一个Dis对象，这个Dis对象是当前正在响应事件的什么动对象，那这个Dis是谁？这个Dis其实就是大家注意每个响应事件呢？哪个响应事件，是不是这个验证码图片响应事件，所以这个diss就表示这个image标签。那么src表示什么？S7，你看SR7表示S7这个属性看见了吗？

看见了吗？就是它，哎，那src属性表示什么？来看看啊，SC属性表示验证码image标签的什么图片路径，它可读可写，我给你演示一下，就比如说第4.src，我把下面这个先住了，这样是干嘛，这是获取啊，这是获取啊，来走，我先获取这个验证码的图片路径，来看是不是得到了。诶，这是获取，那么我们说这些东西它可读可写，可写是什么？可写是可以赋值，诶就把下面这个打开，你看这就是可写，那就是重新对它进行腐蚀，腐蚀之后它就会重新发起一次请求。来看一下啊，我嗲啊屌屌嗲嗲没问题吧，诶没问题，但是那你就要小心了，一般咱们说，但是就肯定还有些什么问题，注意看啊，我用这个火狐来试试看啊，我用那火狐。

走。你看我屌屌，诶我就变了一次之后，它是不是再也不变了，诶有问题哈，我拿这个IE也来试试看。点点，诶，看见了没有，也是只变一次，为啥呀。咋就咋就不能用了呢。大家注意这个是因为什么？因为浏览器做了缓存，我们把这个缓存呢说明一下。首先这是。客户端就是浏览器了啊，那么大家注意看一下，那么。浏览器先先说一下原因啊，浏览器为了让什么呢，请求。速度更快，就把什么呢？每次请求的内容缓存到了浏览器端啊，这个缓存到哪，就是要么磁盘硬盘上，要么内存重，要么内存中，它缓存起来了，它是怎么做的缓存大家注意看你每次请求的时候啊F12。

看这个网络里面。刷新一下啊呃，我先清了。大家看这个点，大家看这里是不是发一次请求，看见了吗？这里就会发一次请求，然后啊，这里多了一个斜杠是吧，多了个斜杠，来，我把这个斜杠拿掉。呃，把这个斜杠拿掉。啊，没多呀。嗯，没多的话，那就是哪多了。啊，应该是这里多了，好，我们刷新一下哈，重新清一次。

点击把鼠标移上来，大家看好，这有了哈，他请求的地址是这个，我给它复制一下。大家注意，他每次请求的时候注意啊，我把这个地址拿过来，他发了这个请求。然后这个请求呢，就到了服务器这边，服务器在哪，就是这边我截个截这个快，哎不行，这跟他太太什么了。啊，这是服务器。服务器就是咱们的这个同盟cat啊，大家注意看一下。这就什么生成？验证码的程序，注意看这个地址啊，就是访问它的。然后呢，他给你什么返回验证码图片。哎，浏览器呢，为了让这个请求下次能够快一点，所以它缓存怎么缓存注意看啊，他拿你请求的最后的这个资源路径和参数做了一个文件名，就是car.jpg，然后就等于返回的图片内容，它就等于了。

它就等于了，好，那么下次你再发这个一模一样的请求的时候。注意。注啊。再发请求。一样地址和参数的请求时，直接从缓存中找，直接从缓存中找，注意我把这个视频跟你说明白一下哈，大家看你再发这个请求的时候怎么办？他来这里面找，他一看，诶，你这个地址跟我这个地方的内容完全一样啊，那你请求东西肯定一样啊。

是吧，那怎么办，注意看啊，直接从。哎呀，直接从浏览器。的缓存中获取原来的图片返回，这就是为什么大家看一下啊，这就是为什么IE你在点的时候就只有一次你看见吗？因为你请求的内容跟刚才一样啊，火狐也是，那这个时候怎么办呢？大家注意看，你只需要你看啊，问题就是如何跳过浏览器的缓存，呃，发起请求给服务器获取先图片或者是先验证码呢？

啊，这时怎么做，大家注意看啊，首先你得明白一下啊，这一部分是由什么组成，咱们先说一下缓存的名称，由。哎，由什么东西啊，这个最后的资源名和参数组成。这个有点太解是吧，好。就这样子，就这样子啊，那么缓存的名称由最后的资源名和参数组成，那么很简单了，只要你在这个请求上面加一个参数，那么它就来这边一看哦，没有匹配上，它就会跳过去，也就是说大家注意看，你在请求这个后面加个问号，随便给一个什么呢？随机就是每次都不同的值，它就会跳过这个检查了。他就会跳过来诶。这个时候我把这个拿过来哈。

就这个。就这个好，那么我们怎么给他辅一个每次都不同的值呢？实现错就可以了，咱们看看怎么办。在这个地方我来个问号，给个D，我后面等于注意看啊，New date大家看，这是一个时间，你看见吗？这是一个时间，好了，那么每次的时间就不同，那么我们来。在这个地方刷新一下。刷新一下走，我们点击走。大家看一下后面是不是就跟了一个时间，这个时间每次都不同，那么这个时候你看点点点谷歌没问题是吧？火狐呢，咱们刷新一下点点，哎呀，等一会点，等时间长一点啊，再点这时候没问题了，那IE呢来看。也是刷新。是吧，点。

点看见了吗？错开这个时间，你看是不是每次都没问题，好这个就是验证码的切换。