AJAX+jsp无刷新验证码实例

　1、我们在做验证码的时候往往由于要反作弊，验证有时故意加入多的干扰因素，这时验证码显示不很清楚，用户经常输入错误。这样不但要重新刷新页面，导致用户没有看清楚验证码而重填而不是修改，而且如果没有用session保存下用户输入的其它数据的话(如姓名)，用户刚刚输入的内容也不存在了，这样给用户造成不好的体验。

　　2、本例在原有验证方式基础之上增加一段js，通过xmlhttp来获取返回值，以此来验证是否有效，这样即使用户浏览器不支持js，也不会影响他的正常使用了。

　　3、为了防止作弊，当用户连接3次输入错误时则重载一下图片，这样也利于用户因为图片上的验证码辨认不清而使其终无法输入正确。

　　4、本例还特别适合检验用户名是否有效，只要从后台做个sql查询，返回一个值或是xml即可。(这种例子太多 ，就在此不赘述了)。

　　5、本例的优点在于非常方便用户输入，而且减少对服务器端的请求，可以说既改善用户体验而且略会节省带宽成本，但相应地要在页面上增加一段JavaScript代码，在目前网速越来越快人们要求便捷舒适的今天，似乎我们更应注意提供给用户良好的使用感受。

　　代码如下：

　　1、img.jsp,输入主页面

　　AJAX(无刷新及时提示)验证码实例!cody by jarry

　　您的姓名： (为了更好地说明此例，特加姓名一项)

　　验 证 码：

　　验证码看不清

　　2、num.jsp,反馈xmlhttp请求的页面

　　3、random.jsp,生成验证码图片的页面

　　4、net.js,封装好的xmlhttp对象，可以很方便的调用

　　/* namespacing object */var net=new Object();net.READY_STATE_UNINITIALIZED=0;net.READY_STATE_LOADING=1;net.READY_STATE_LOADED=2;net.READY_STATE_INTERACTIVE=3;net.READY_STATE_COMPLETE=4;/*--- content loader object for cross-browser requests ---*/net.ContentLoader=function(url,on_load,on_error,method,params,contentType){this.req=null;this.on_load=on_load;this.on_error=(on_error) ? on_error : this.defaultError;this.loadXMLDoc(url,method,params,contentType);}net.ContentLoader.prototype.loadXMLDoc=function(url,method,params,contentType){if (!method)if (!contentType && method=="POST")if (window.XMLHttpRequest){this.req=new XMLHttpRequest();}else if (window.ActiveXObject){//add try catch;try {this.req = new ActiveXObject("Msxml2.XMLHTTP");}catch (e1){try {this.req = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2)}////this.req=new ActiveXObject("Microsoft.XMLHTTP");}if (this.req){try{var loader=this;this.req.onreadystatechange=function()this.req.open(method,url,true);if (contentType){this.req.setRequestHeader('Content-Type', contentType);}this.req.send(params);}catch (err)}}net.ContentLoader.onReadyState=function(){var req=this.req;var ready=req.readyState;if (ready==net.READY_STATE_COMPLETE){var httpStatus=req.status;if (httpStatus==200 || httpStatus==0)else}}net.ContentLoader.prototype.defaultError=function(){alert("error fetching data!"+"nnreadyState:"+this.req.readyState+"nstatus: "+this.req.status+"nheaders: "+this.req.getAllResponseHeaders());}