您的位置:首页 > 理论基础 > 计算机网络

AJAX示例一(注册页面用户名验证)

2012-10-14 15:35 288 查看
页面展示代码:

<tr>
<td class="altbg1" width="21%">用户名:</td>
<td class="altbg2"><input id="userid" name="username" size="25" maxlength="25" type="text" onBlur="validate()">
<span id="usermsg"></span>
<script type="text/javascript">
var req;
function validate(){
var username=document.getElementById("userid");
var url="Validate.jsp?id="+escape(username.value);//escape用于对字符串进行编码,可以对其中的字符任意值进行解析
if(window.XMLHttpRequest) {
//根据浏览器不同创建不同的req
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.open("GET", url, true);//true为异步
req.onreadystatechange = callback;
req.send(null);
}
function callback() {
if(req.readyState == 4) {
if(req.status == 200) {
//alert(req.responseText);
var msg = req.responseXML.getElementsByTagName("msg")[0];//返回页面是一个XML文件,解析该文件得到msg对象
//alert(msg);
setMsg(msg.childNodes[0].nodeValue);//xml文本中第一个msg对象的值
}
}
}

function setMsg(msg) {
//alert(msg);
mdiv = document.getElementById("usermsg");
if(msg == "invalid") {
mdiv.innerHTML = "<font color='red'>username exists</font>";
} else {
mdiv.innerHTML = "<font color='green'>congratulations! you can use this username!</font>";
}
}
</script>


Validate.jsp页面:

<%
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-store"); //HTTP1.1
response.setHeader("Pragma", "no-cache"); //HTTP1.0
response.setDateHeader("Expires", 0); //prevents catching at proxy server
System.out.println(request.getParameter("id"));
//check the database
response.getWriter().write("<msg>valid</msg>");
%>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息