AJAX 用户注册时的应用实例

S猫咪爱上鱼S

S猫咪爱上鱼S

2016-02-19 11:30

下面图老师小编跟大家分享AJAX 用户注册时的应用实例,一起来学习下过程究竟如何进行吧!喜欢就赶紧收藏起来哦~
如果我们用AJAX技术来实现以上的操作则不必等待服务器返回信息,用户输入用户名或企业名称的时候,当输入文本框失去焦点的时候,则会自动向服务器发出请求,用户继续做下面的操作,不必点击“检查”,也不必等待服务器返回信息,检查与用户操作是异步的,可同时进行。当服务器信息返回的时候,会自动在面页相应位置显示返回信息,不必刷新页面,相当于局部刷新的效果。 下面我们来看代码吧。
HTML页面的完整代码如下:
程序代码
%@page language="java" contentType="text/html;charset=GBK"%
script language="javascript" type="text/javascript"
!--
/**//**Ajax 开始 by Alpha 2005-12-31*/
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%"
trtd style="text-align:center" H2Ajax 演示程序/H1/td/tr
trtd style="text-align:center" ------ 企业注册 By Alpha/td/tr
/table
HR
table width="400" cellpadding="1" cellspacing="1" style="text-align:center"
tr
  tdfont 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
  tdfont 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
  tdfont color="red"*/font/td
  td用户密码:/td
  tdinput type="password" name="password" maxlength="20" style="background:#FFFFFF" onBlur="chkpassword()"/
   div id="passwordStr" style="background-color:#FF9900;display:none"/div
  /td
/tr
tr
  tdfont color="red"*/font/td
  td确认密码:/td
  tdinput type="password" name="confirmPassword" maxlength="20" style="background:#FFFFFF" onBlur="chkconfirmPassword()"/
   div id="confirmPasswordStr" style="background-color:#FF9900;display:none"/div
  /td
/tr
/table
div style="text-align:center"
  input type="button" name="ok" value=" 确 定 " onclick="checkfield()" input type="reset" name="reset" value=" 取 消 "
/div
/form
/body
/html
  用JavaScript来创建XmlHttpRequest 类向服务器发送一个HTTP请求后,接下来要决定当收到服务器的响应后,需要做什么。这需要告诉HTTP请求对象用哪一个JavaScript函数处理这个响应。可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名,如下所示:Xmlhttp_request.onreadystatechange =FunctionName;
  FunctionName是用JavaScript创建的函数名,注意不要写成FunctionName(),当然我们也可以直接将JavaScript代码创建在onreadystatechange之后。
  我们调用request.open()-它用服务器打开套接字频道,使用一个HTTP动词(GET或POST)作为第一个参数并且以数据提供者的URL作为第二个参数。request.open()的最后一个参数被设置为true-它指示该请求的异步特性。注意,该请求还没有被提交。随着对request.send()的调用,开始提交-这可以为POST提供任何必要的有效载荷。在使用异步请求时,我们必须使用request.onreadystatechanged属性来分配请求的回调函数。(如果请求是同步的话,我们应该能够在调用request.send之后立即处理结果,但是我们也有可能阻断用户,直到该请求完成为止。)
  再看看数据提供者的URL,url = "/chkUserAndCom",servlet如下:
程序代码
/**//*
* Created on 2005-12-31
*
* TODO To change the template for this generated file go to
* Window - Preferences - Java - Code Style - Code Templates
*/
package com.event;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.beans.EBaseInfo;
/** *//**
* @author Alpha 2005-12-31
*
* <P>Ajax 演示---企业注册时检查企业用户名和企业名称</P>
*
* TODO To change the template for this generated type comment go to
* Window - Preferences - Java - Code Style - Code Templates
*/
public class CheckUserAndComNm {
private String msgStr = "";
protected void doGet(HttpServletRequest request,HttpServletResponse response)
throws ServletException
{
 EComBaseInfo info=new EComBaseInfo();
 String oprate=request.getParameter("oprate")).trim();
 String userName=request.getParameter("userName");
 String passWord=request.getParameter("password");
 String comName=request.getParameter("comName");
 try
 {
  if(oprate.equals("chkUser"))
  {
   response.setContentType("text/html;charset=GB2312");
   if(userName.length()<5||userName.length()>20)
   {
    msgStr = "对不起,用户名必须为字母、数字或下划线,长度为5-20个字符!";
   }
   else
   {
    boolean bTmp=info.findUser(userName); //找查数据库中有无该用户名
    if(bTmp)
     msgStr ="对不起,此用户名已经存在,请更换用户名注册!";
    else
     msgStr ="";
   }
   response.getWriter().write(msgStr);
  }
  else if(oprate.equals("chkCom"))
  {
   response.setContentType("text/html;charset=GB2312");
   if(comName.length()<6||comName.length()>100)
   {
    msgStr = "对不起,公司名称长度为6-100个字符(不包括字符内的空格)!";
   }
   else
   {
    boolean bTmp=info.findCom(comName); //找查数据库中有无该企业名
    if(bTmp)
     msgStr ="对不起,此企业名称已经存在,请更换企业名称注册!";
    else
     msgStr ="";
   }
   response.getWriter().write(msgStr);
  
  }
 }
 catch(Exception ex)
 {
 }
 finally
 {
  request.setAttribute("url",url);
 }
}
protected void doPost(HttpServletRequest request,HttpServletResponse response)
throws ServletException
{
 doGet(request,response);
}
}
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是个好东西。
展开更多 50%)
分享

猜你喜欢

AJAX 用户注册时的应用实例

Web开发
AJAX 用户注册时的应用实例

用AJAX编写用户注册时的应用实例

Web开发
用AJAX编写用户注册时的应用实例

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

AJAX应用之注册用户即时检测

Web开发
AJAX应用之注册用户即时检测

Ajax 无刷新在注册用户名时的应用的代码

Web开发
Ajax 无刷新在注册用户名时的应用的代码

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

AJAX编写用户注册实例及技术小结

Web开发
AJAX编写用户注册实例及技术小结

jquery ajax 检测用户注册时用户名是否存在

Web开发
jquery ajax 检测用户注册时用户名是否存在

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

略施小法 让电脑不再自动关机

略施小法 让电脑不再自动关机

DVI线导致黑屏故障处理全攻略

DVI线导致黑屏故障处理全攻略
下拉加载更多内容 ↓