ajax异步验证效果展示,AJAX(二)-实现验证码异步验证功能(示例代码)

Created by IntelliJ IDEA.

User: cxspace

Date: 16-8-18

Time: 下午7:45

To change this template use File | Settings | File Templates.

--%>

验证码检查

//去掉两边空格

function trim(str) {

//正则表达式去掉左边空格

str = str.replace(/^\\s*/,""); //换掉左边空格

str = str.replace(/\\s*$/,""); //换掉右边空格

return str;

}

document.getElementById("checkcodeID").onkeyup = function () {

var checkcode = this.value;

var checkcode = trim(checkcode);

if (checkcode.length == 4){

var ajax = createAJAX();

var method = "POST";

var url = "${pageContext.request.contextPath}/checkRequest?time="+new Date().getTime();

ajax.open(method,url);

ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");

var content = "checkcode="+checkcode;

ajax.send(content);

ajax.onreadystatechange = function () {

if(ajax.readyState == 4){

if (ajax.status == 200){

var tip = ajax.responseText;

var img = document.createElement("img");

img.src = tip;

img.style.width = "14px";

img.style.height = "14px";

var td = document.getElementById("res");

td.innerHTML="";

td.appendChild(img)

}

}

}

}else {

var td = document.getElementById("res");

td.innerHTML = "";

}

}