实现验证码功能遇到的两个问题

最近在开发一个小项目的过程中遇到了一些问题，在这里做个小小的总结，做个记录，同时也是分享给需要的人。

在JS文件中是否能够获取到session的内容？

我们知道，通过单独的JS编写JavaScript代码有利于代码的可读性和可维护性。因此，本人很不习惯地把JavaScript代码写在Jsp页面中，而是通过单独的JS文件编写然后通过导入资源的方法来使用js方法。但是在前台实现验证码验证功能时却遇到了第一个问题，无法在js文件中通过EL获取到session里面的值（本人把验证码在后台产生并值存在session中）。在网上找到了些相关的资料，为了更好的了解其中的机制，在此将几种版本的说法罗列一下，它们本质是一样。

版本一

JSP是由服务端执行的，EL表达式自然也由服务端解析执行，因此，如果EL所在的脚本在JSP页面内，它是可以获取到值的，这个值在服务器端返回到浏览器端时已经解析完毕，浏览器端只是呈现而已，如果在单独的JS文件中写EL是无法获取的，因为javascript是客户端执行，单独的JS文件不在服务器的解析执行之中，EL是不起任何作用的，这个时候它就等同于普通的字符串

版本二

所有的jsp文件在响应给用户时都会编译成servlet，执行其中所有的JSP脚本或EL表达式，并由java输出流转化成HTML文本代码response响应给客户端，所以浏览器接收到的只是html页面。而外部js文件与HTML一起响应给客户端，并在本地组装在一起，所以< script src=”xxx.js”>这样的外部引用JS，是无法执行服务端脚本的。

版本三

javascript是客户端执行,EL是在服务端执行,而服务端比客户端先执行,所以取不到值

那如何在JS中获取session的属性值呢？

第一种方法是，将JS代码写在JSP页面中，直接获取并使用session的属性值；或者在JSP页面中定义一个全局变量，把获取到的session的属性值传过去。

第二种方法是，使用隐藏标签（如iframe），将session的属性值传过去，再通过JS获取到相关属性值。

第三种方法是，将JS文件改成JSP文件，再直接引入该文件，就可以直接获取到session的属性值。

在前台验证验证码时JSP中获取到session的值总是比后台的session值慢了一拍，导致无法成功匹配？

在解决了无法获取到session属性值之后，却出现了另外一个问题，验证码始终匹配不成功。通过打印出来的结果发现，每一次打印出来的结果都是上一次显示的结果。在短期内这个问题始终没有解决，最后放弃了在前台匹配验证码的方法，而是通过Ajax直接在后台匹配，并将结果及时反馈到页面上。

之后，在网上找了好多资料都没法解决这个疑问，但是捋顺了JSP执行过程，我们可以通过结果来猜想整个过程应该是这样的。我们知道在加载JSP页面时,JSP页面会被编译成servlet，并执行jsp脚本和EL表达式，EL表达式应该是被赋值之后再执行后台请求生成了验证码，并把验证码设置到session属性当中。所以我们在前端获取到的验证码属性值都是上一次的值，第一次得到的为空值。最后得出结论是不能通过前端获取到后台验证码属性值的方法来匹配验证码。解决这一问题，我们可以用Ajax技术把验证码传到后台进行验证并即时地把反馈信息显示在页面上。