ASP.NET ashx实现无刷新页面生成验证码

现在大部分网站登陆时都会要求输入验证码，在网上也看了一些范例，现在总结一下如何实现无刷新页面生成验证码。

效果图：

 

实现方式：

前台：

<div>
 <span>identifying code:</span>
 <asp:textbox id="txtvalidationcode" runat="server" width="130px" maxlength="4"></asp:textbox>
 <img id="imgyz" class="code" style=" height:23px; width:65px;" 
  src="img.ashx" onclick="this.src=this.src+'?'"/ />
 <img src="../images/btn_change.gif" title="change" class="btn_change" style="cursor: hand"
  onclick="imgchange()" />
</div>

js：

<script language="javascript" type="text/javascript">
 function imgchange() 
 { 
  var img=document.getelementbyid("imgyz");
  img.click();
 } 
</script>

ashx:

using system;
using system.web;
using claims.bll;
using system.data;
using system.configuration;
using system.web.sessionstate;
using system.drawing;

public class img : ihttphandler, irequiressessionstate
{
 
 public void processrequest (httpcontext context) 
 {
  context.response.contenttype = "image/jpeg";
  
  string s_random = "";
  system.io.memorystream ms = new system.io.memorystream();
  s_random = rndnum(4);
  context.session["random"] = s_random;
  s_random = s_random.substring(0, 1) + " " + s_random.substring(1, 1) + " " + s_random.substring(2, 1) + " " + s_random.substring(3, 1);
  
  createimage(s_random, ref ms);
  context.response.clearcontent();
  context.response.binarywrite(ms.toarray());

  context.response.flush();
  context.response.end();
 }

 private void createimage(string checkcode,ref system.io.memorystream ms)
 {
  int iwidth = (int)(checkcode.length * 18);
  system.drawing.bitmap image = new system.drawing.bitmap(iwidth, 45);
  graphics g = graphics.fromimage(image);
  g.clear(color.white);
  //定义颜色
  color[] c = { color.black, color.red, color.darkblue, color.green, color.orange, color.brown, color.darkcyan, color.purple };
  //定义字体   
  //string[] font = {"verdana","microsoft sans serif","comic sans ms","arial","宋体"};
  random rand = new random();
  //随机输出噪点
  for (int i = 0; i < 50; i++)
  {
   int x = rand.next(image.width);
   int y = rand.next(image.height);
   g.drawrectangle(new pen(color.lightgray, 0), x, y, 1, 1);
  }

  //输出不同字体和颜色的验证码字符

  for (int i = 0; i < checkcode.length; i++)
  {
   int cindex = rand.next(7);
   int findex = rand.next(5);
   font font = new system.drawing.font("arial", 24, (system.drawing.fontstyle.bold | system.drawing.fontstyle.italic));
   brush b = new system.drawing.solidbrush(c[cindex]);
   int ii = 4;
   if ((i + 1) % 2 == 0)
   {
    ii = 2;
   }
   g.drawstring(checkcode.substring(i, 1), font, b, 3 + (i * 12), ii);
  }
  //画一个边框

  g.drawrectangle(new pen(color.black, 0), 0, 0, image.width - 1, image.height - 1);

  //输出到浏览器
  image.save(ms, system.drawing.imaging.imageformat.jpeg);
  
  g.dispose();
  image.dispose();
 }

 public static string rndnum(int vcodenum)
 {
  string vchar = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,w,x,y,z";
  string[] vcarray = vchar.split(',');
  string vnum = "";
  random random = new random();
  for (int i = 1; i <= vcodenum; i++)
  {
   int inum = 0;
   while ((inum = convert.toint32(vcarray.length * random.nextdouble())) == vcarray.length)
   {
    inum = convert.toint32(vcarray.length * random.nextdouble());
   }
   vnum += vcarray[inum];
  }
  return vnum;
 }
 
 public bool isreusable {
  get {
   return false;
  }
 }

}

备注：

onclick="this.src=this.src+'?'"

之前一直不明白为什么要加一个？号，于是去网上搜索，参考一下前辈们的见解：

【这是表示当前图片链接，在当前链接值的基础上添加了一个问号
譬如当前src="check.aspx",点击后就变成了"check.aspx?"，继续点就会变成"check.aspx?????"
这个问号是没有实际意义的,它唯一的作用是向ie表明: 图片链接发生了变化,图片需要刷新.】

【get：当客户端要从服务器中读取文档时，使用get方法。get方法要求服务器将url定位的资源放在响应报文的数据部分，回送给客户端。使用get方法时，请求参数和对应的值附加在url后面，利用一个问号（“?”）代表url的结尾与请求参数的开始，传递参数长度受限制。例如，/index.jsp?id=100&op=bind。
post：当客户端给服务器提供信息较多时可以使用post方法。post方法将请求参数封装在http请求数据中，以名称/值的形式出现，可以传输大量数据。
this.src=this.src+'?'是将this.src原值后加上？，以便向服务器发送一个新的get方法，从而获取新的验证码】

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。