AJAX编写用户注册实例及技术小结
这个例子是一个企业用户注册时的一个应用，当用户注册时检查用户名和企业名是否可用，以前的做法是在旁边加一个按钮，点击“检查”，就向服务器发出请求，然后等待……服务器返回信息，继续操作。如果我们用Ajax技术来实现以上的操作则不必等待服务器返回信息，用户输入用户名或企业名称的时候，当输入文本框失去焦点的时候，则会自动向服务器发出请求，用户继续做下面的操作，不必点击“检查”，也不必等待服务器返回信息，检查与用户操作是异步的，可同时进行。当服务
＜%@page language="java" contentType="text/html;charset=GBK"%＞
＜script language="javascript" type="text/javascript"＞
var http = getHTTPObject();
function handleHttpResponse(){
if(http.readyState == 4){
if(http.status == 200){
var xmlDocument = http.responseXML;
if(http.responseText!=""){
document.getElementById("showStr").style.display = "";
document.getElementById("userName").style.background= "#FF0000";
document.getElementById("showStr").innerText = http.responseText;
}else{
document.getElementById("userName").style.background= "#FFFFFF";
document.getElementById("showStr").style.display = "none";
}
}
else{
alert("你所请求的页面发生异常，可能会影响你浏览该页的信息！");
alert(http.status);
}
}
}
function handleHttpResponse1(){
if(http.readyState == 4){
if(http.status == 200){
var xmlDocument = http.responseXML;
if(http.responseText!=""){
document.getElementById("comNmStr").style.display = "";
document.getElementById("comNm").style.background= "#FF0000";
document.getElementById("comNmStr").innerText = http.responseText;
}else{
document.getElementById("comNm").style.background= "#FFFFFF";
document.getElementById("comNmStr").style.display = "none";
}
} else{
alert("你所请求的页面发生异常，可能会影响你浏览该页的信息！");
alert(http.status);
}
}
}
function chkUser(){
var url = "/chkUserAndCom";
var name = document.getElementById("userName").value;
url += ("&userName="+name+"&oprate=chkUser");
http.open("GET",url,true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
return ;
}
function chkComNm(){
var url = "/chkUserAndCom";
var name = document.getElementById("comNm").value;
url += ("&comName="+name+"&oprate=chkCom");
http.open("GET",url,true);
http.onreadystatechange = handleHttpResponse1;
http.send(null);
return ;
}
//该函数可以创建我们需要的XMLHttpRequest对象
function getHTTPObject(){
var xmlhttp = false;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType('text/xml');
}
}else{
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(E){
xmlhttp = false;
}
}
}
return xmlhttp;
}
/**//**Ajax 结束*/
//检测表单
function chkpassword(){
var m=document.form1;
if(len(m.password.value) ＞ 20 || len(m.password.value) ＜ 5 || !isStr(m.password.value)) {
document.getElementById("passwordStr").style.display = "";
document.getElementById("password").style.background= "#FF0000";
document.getElementById("passwordStr").innerText = "对不起,密码必须为英文字母、数字或下划线，长度为5~20!";
}else {
document.getElementById("password").style.background= "#FFFFFF";
document.getElementById("passwordStr").style.display = "none";
}
}
function chkconfirmPassword(){
var m=document.form1;
if (m.password.value != m.confirmPassword.value) {
document.getElementById("confirmPasswordStr").style.display = "";
document.getElementById("confirmPassword").style.background= "#FF0000";
document.getElementById("confirmPasswordStr").innerText = "对不起,密码与重复密码不一致!";
} else{
document.getElementById("confirmPassword").style.background= "#FFFFFF";
document.getElementById("confirmPasswordStr").style.display = "none";
}
}
function checkfield(){
var m=document.form1;
if(m.userName.value.length==0){
alert("对不起,用户名必须为英文字母、数字或下划线，长度为5~20。");
m.userName.focus();
return false;
}
if(m.password.value.length==0) {
alert("对不起,密码必须为英文字母、数字或下划线，长度为5~20。");
m.password.focus();
return false;
}
if (m.password.value != m.confirmPassword.value){
alert("对不起,密码与重复密码不一致!");
m.confirmPassword.focus();
return false;
}
if(m.comNm.value.length==0){
alert("对不起,企业名称不能为空！！");
m.comNm.focus();
return false;
}
m.submit();
}
＜/script＞
＜body topmargin="0"＞
＜form name="form1" method="post" action="/Control?act=Register"＞
＜table width="100%"＞
＜tr＞＜td align="center"＞ ＜H2＞Ajax 演示程序＜/H1＞＜/td＞＜/tr＞
＜tr＞＜td align="center"＞ ------ 企业注册 By Alpha＜/td＞＜/tr＞
＜/table＞
＜HR＞
＜table width="400" border="0" cellpadding="1" cellspacing="1" align="center" ＞
＜tr＞
＜td＞＜font color="red"＞*＜/font＞＜/td＞
＜td＞用户帐号:＜/td＞
＜td＞
＜input type="text" name="userName" maxlength="20" style="background:#FFFFFF" onBlur="chkUser()" value=""/＞
＜div id="showStr" style="background-color:#FF9900;display:none"＞＜/div＞
＜/td＞
＜/tr＞
＜tr＞
＜td＞＜font color="red"＞*＜/font＞＜/td＞
＜td＞企业名称:＜/td＞
＜td＞
＜input type="text" name="comNm" maxlength="100" style="background:#FFFFFF" onBlur="chkComNm()" value=""/＞
＜div id="comNmStr" style="background-color:#FF9900;display:none"＞＜/div＞
＜/td＞
＜/tr＞
＜tr＞
＜td＞＜font color="red"＞*＜/font＞＜/td＞
＜td＞用户密码:＜/td＞
＜td＞
＜input type="password" name="password" maxlength="20" style="background:#FFFFFF" onBlur="chkpassword()"/＞
＜div id="passwordStr" style="background-color:#FF9900;display:none"＞＜/div＞
＜/td＞
＜/tr＞
＜tr＞
＜td＞＜font color="red"＞*＜/font＞＜/td＞
＜td＞ 器信息返回的时候，会自动在面页相应位置显示返回信息，不必刷新页面，相当于局部刷新的效果。
AJAX技术小结
1. Ajax（Asynchronous JavaScript and XML）是一个结合了Java技术、XML、以及JavaScript的编程技术，可以让你构建基于Java技术的Web应用，并打破了使用页面重载的惯例。
2. Ajax，异步JavaScript与XML，是使用客户端脚本与Web服务器交换数据的Web应用开发方法。这样，Web页面不用打断交互流程进行重新加裁，就可以动态地更新。使用Ajax，你可以创建接近本地桌面应用的，直接的、高可用的、更丰富的、更动态的Web用户接口界面。
3. 对于Mozilla﹑Netscape﹑Safari、Firefox等浏览器，创建XMLHttpRequest 方法如下：
xmlhttp_request = new XMLHttpRequest();
4. IE等创建XMLHttpRequest 方法如下：
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP") 或 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
5. xmlhttp_request.open('GET', URL, true); xmlhttp_request.send(null);
6. open()的第一个参数是HTTP请求方式—GET，POST或任何服务器所支持的您想调用的方式。 按照HTTP规范，该参数要大写;否则，某些浏览器(如Firefox)可能无法处理请求。第二个参数是请求页面的URL。第三个参数设置请求是否为异步模式。如果是TRUE，JavaScript函数将继续执行，而不等待服务器响应。这就是"AJAX"中的"A"。
Ajax技术运用的好的话，给我们的网页增添了许多友好的效果，给用户还来更好的感觉。Ajax是个好东西。
