学步园

我们在做验证码的时候往往由于要反作弊，验证有时故意加入多的干扰因素，这时验证码显示不很清楚，用户经常输入错误。这样不但要重新刷新页面，导致用户没有看清楚验证码而重填而不是修改，而且如果没有用session保存下用户输入的其它数据的话(如姓名)，用户刚刚输入的内容也不存在了，这样给用户造成不好的体验。　　　本例在原有验证方式基础之上增加一段js，通过xmlhttp来获取返回值，以此来验证是否有效，这样即使用户浏览器不支持js，也不会影响他的正常使用了。　　　为了防止作弊，当用户连接3次输入错误时则重载一下图片，这样也利于用户因为图片上的验证码辨认不清而使终无法输入正确。　　　本例还特别适合检验用户名是否有效，只要从后台做个sql查询，返回一个值或是xml即可。(这种例子太多，就在此不赘述了)。　　　本例的优点在于非常方便用户输入，而且减少对服务器端的请求，可以说既改善用户体验而且略会节省带宽成本，但相应地要在页面上增加一段JavaScript代码，在目前网速越来越快人们要求便捷舒适的　今天，似乎我们更应注意提供给用户良好的使用感受。　　　代码如下，　　4,net.js,封装好的xmlhttp对象，可以很方便的调用/*namespacingobject*/
varnet=newObject();
　
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;
/*---contentloaderobjectforcross-browserrequests---*/
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)
　{
method="GET";
　}
　if(!contentType&&method=="POST")
　{
contentType='application/x-www-form-urlencoded';
　}
　if(window.XMLHttpRequest)
　{
this.req=newXMLHttpRequest();
　}
　elseif(window.ActiveXObject)
　{
　//addtrycatch;
　try{
　　　this.req=newActiveXObject("Msxml2.XMLHTTP");
　}catch(e1){
　　try{
　　　this.req=newActiveXObject("Microsoft.XMLHTTP");　　　
　　　}catch(e2){
　　}
　}
　　//
//this.req=newActiveXObject("Microsoft.XMLHTTP");
　}
　if(this.req)
　{
try
{
　varloader=this;
　this.req.onreadystatechange=function()
　{
　net.ContentLoader.onReadyState.call(loader);
　}
　this.req.open(method,url,true);
　if(contentType)
　{
　　this.req.setRequestHeader('Content-Type',contentType);
　}
　this.req.send(params);
}
catch(err)
{
　this.on_error.call(this);
}
　}
}
net.ContentLoader.onReadyState=function(){
　varreq=this.req;
　varready=req.readyState;
　if(ready==net.READY_STATE_COMPLETE){
varhttpStatus=req.status;
if(httpStatus==200||httpStatus==0){
　this.on_load.call(this);
}else{
　this.on_error.call(this);
}
　}
}
net.ContentLoader.prototype.defaultError=function(){
　alert("errorfetchingdata!"
+"nnreadyState:"+this.req.readyState
+"nstatus:"+this.req.status
+"nheaders:"+this.req.getAllResponseHeaders());
}

        out.clear();
        response.setContentType("image/jpeg");
        response.addHeader("pragma","NO-cache");
        response.addHeader("Cache-Control","no-cache");
        response.addDateHeader("Expries",0);
        int width=80, height=30;
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        Graphics g = image.getGraphics();
        //以下填充背景颜色
        g.setColor(Color.GREEN);
        g.fillRect(0, 0, width, height);
       //设置字体颜色
        g.setColor(Color.RED);
        Font font=new Font("Arial",Font.PLAIN,20);
        g.setFont(font);
        //g.drawString(random,5,14);
        g.drawString(random,5,20);
        g.dispose();
        ServletOutputStream outStream = response.getOutputStream();
        JPEGImageEncoder encoder =JPEGCodec.createJPEGEncoder(outStream);
        encoder.encode(image);
        outStream.close();
   %>

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)
  {
 method="GET";
  }
  if (!contentType && method=="POST")
  {
 contentType='application/x-www-form-urlencoded';
  }
  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()
   {
  net.ContentLoader.onReadyState.call(loader);
   }
   this.req.open(method,url,true);
   if (contentType)
   {
    this.req.setRequestHeader('Content-Type', contentType);
   }
   this.req.send(params);
 }
 catch (err)
 {
   this.on_error.call(this);
 }
  }
}
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){
   this.on_load.call(this);
 }else{
   this.on_error.call(this);
 }
  }
}
net.ContentLoader.prototype.defaultError=function(){
  alert("error fetching data!"
 +"/n/nreadyState:"+this.req.readyState
 +"/nstatus: "+this.req.status
 +"/nheaders: "+this.req.getAllResponseHeaders());
}