java验证码之MD5加密和ajax实现无刷新
首先我想说,大家都知道加密是怎么回事吧,像密码的话,不加密的话登陆时被黑客拦截就很容易被盗号啦。。。
验证码加密在我看来也就防止被暴力注册神马的。。。个人还是在sso的单点登陆(日后会做个总结)用加密比较多。
废话不多说,给代码就是了。。。
package com.util;
import java.security.MessageDigest;
public class Encode {
public String encode(String str, String algorithm) {
if (str == null) {
return null;
}
StringBuilder sb = new StringBuilder();//声明并实例化StringBuilder类的对象
try {
MessageDigest code = MessageDigest.getInstance(algorithm);//创建使用MD5加密算法的对象
code.update(str.getBytes());//将要加密信息中的所有字节提供给该对象
byte[] bs = code.digest();//调用digest方法完成消息摘要的计算,并以字节数组的形式返回消息摘要
//将加密后的字节数组转换成十六进制的字符串,形成最终的密文
for (int i = 0; i < bs.length; i++) {
int v = bs[i] & 0xFF;
if (v < 16) {
sb.append(0);
}
sb.append(Integer.toHexString(v));
}
} catch (Exception e) {
e.printStackTrace();
}
return sb.toString().toUpperCase();//将加密后的字符串中的英文字母转换为大写
}
public String encodeByMD5(String str){
return encode(str,"MD5");
}
}
神马是ajax实现验证码的无刷新验证呢?对ajax了解的都知道,就是不用加载整个页面,只需对验证码那块进行局部的刷新,就是我们常看到的“看不清?换一个”的效果。
我这里想实现的呢,是只有一个文本框,点击文本框后才出现验证码(当然出现的验证码也有“看不清可以换一个”及其效果),在输入验证码后呢,还有一个对比,如果输入正确,文本框后出现打钩字样,否则打叉(或者类似功能)。
?在生成隐藏的验证码时,首先应该控制验证码不显示,当用户单击验证码输入框时,才生成并显示验证码,然后还需要提供重新生成验证码的功能,接下来还需要在用户将光标移出验证码输入框时,控制验证码不显示,并应用Ajax实现无刷新判断输入的验证码是否正确,最后根据判断结果确定提交按钮是否可用。
恩,上面基本上是我能想到的最高级的实现了。由于代码量较多,我只说明一下技术要点。
1、css定位属性对验证码的显示位置进行确定,CSS样式的定位属性用于对html对像进行定位。在CSS样式中提供了position、z-index、top、right、bottom、left等7种定位属性。
使用div把验证码框分层分模块。下一段代码就是jsp里面验证码部分的代码
<div style="position:absolute">
<div id="showCheckCode" style="display:none; padding:3px" align="center" >
<img ?src="images/checkCodePicture.jpg" id="createCheckCode" width="200" height="60">
<a href="#" style="color:#EEEEEE" onClick="getCheckCode1(showCheckCode,checkCode)">
看不清?换一个</a></div>
?<input name="checkCode" type="text" id="checkCode" size="6" value="" title="单击验证码输入框,获取验证码" onClick="getCheckCodeFun(showCheckCode,checkCode);" ?onBlur="checkCheckCode(this.value)">
? </div>
2、应用JavaScript中的style元素对象。JavaScript中的style元素对象是html对象的一个属性。style元素对象提供了一组应用于浏览器所支持的CSS属性(如background、fontsize和display)使用style对象可以直接获取或设置单个html元素的CSS样式。设置
CSS样式表中的属性值的基本语法如下:
object.style.display=属性值
以下是生成验证码部分的js代码:
//生成并显示验证码
function getCheckCodeFun(showCheckCode,checkCode){
showCheckCode.style.display='';
if(document.getElementById("resultMessage").innerHTML=="温馨提示:单击验证码输入框,获取验证码!验证码区分大小写"){
getCheckCode1(showCheckCode,checkCode);//生成验证码
}
checkCode.focus();
}
//生成验证码
function getCheckCode1(showCheckCode,checkCode){
var loader1=new net.AjaxRequest("getPictureCheckCode.jsp?nocache="+new Date().getTime(),deal_getCheckCode,onerror,"GET");
showCheckCode.style.display='';
checkCode.focus();
}
function deal_getCheckCode(){
document.getElementById("showCheckCode").innerHTML=this.req.responseText;
}
//隐藏验证码显示框
function showCheckCodeClear(){
showCheckCode.style.display='none';
}
3、用ajax进行验证是否输入正确及改变在验证码输入框后面的验证结果显示
/***********验证验证码是否正确*******************************/
function checkCheckCode(inCheckCode){
if(inCheckCode!=""){
var loader=new net.AjaxRequest("checkCheckCode.jsp?inCheckCode="+inCheckCode+"&nocache="+new Date().getTime(),deal_checkCheckCode,onerror,"GET");
}
}
function deal_checkCheckCode(){
var h=this.req.responseText;
h=h.replace(/\s/g,"");//去除字符串中的Unicode空白符
if(h==1){
document.getElementById("resultMessage").removeChild(document.getElementById("resultMessage").childNodes[0]);
document.getElementById("resultMessage").appendChild(document.createTextNode(" "));
document.getElementById("messageImg").src="images/dui2.gif";
document.getElementById("resultMessage").removeChild(document.getElementById("resultMessage").childNodes[0]);
document.getElementById("resultMessage").appendChild(document.createTextNode("恭喜您,验证码正确!"));
document.getElementById("btn_Submit").disabled=false;
}else{
document.getElementById("messageImg").src="images/cuo2.gif";
document.getElementById("resultMessage").removeChild(document.getElementById("resultMessage").childNodes[0]);
document.getElementById("resultMessage").appendChild(document.createTextNode("您输入的验证码不正确!"));
}
}
jsp文本框后:
<td width="74%" valign="bottom" id="resultCheckCode" onClick="showCheckCodeClear()">
? ? ? ? ? ? ? <div id="resultMessage">温馨提示:单击验证码输入框,获取验证码!验证码区分大小写</div>
好了,大概这么多了,看不懂请留言。