思诚科技 seecen LOGO
咨询热线:0791-87557233
  首页 |   Java EE  
关于思诚
关注官方微信

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

来源:网络    更新时间:2014/12/16


  我所举的这个例子是一个企业用户注册时的一个应用,当用户注册时检查用户名和企业名是否可用,以前的做法是在旁边加一个按钮,点击“检查”,就向服务器发出请求,然后等待……服务器返回信息,继续操作。

  如果我们用AJAX技术来实现以上的操作则不必等待服务器返回信息,用户输入用户名或企业名称的时候,当输入文本框失去焦点的时候,则会自动向服务器发出请求,用户继续做下面的操作,不必点击“检查”,也不必等待服务器返回信息,检查与用户操作是异步的,可同时进行。当服务器信息返回的时候,会自动在面页相应位置显示返回信息,不必刷新页面,相当于局部刷新的效果。下面我们来看代码吧。

  HTML页面的完整代码如下:

以下是引用片段:
1<%@pagelanguage="Java"contentType="text/html;charset=GBK"%>
2<scriptlanguage="JavaScript"type="text/javascript">
3<!--
4/**//**Ajax开始byAlpha2005-12-31*/
5
6varhttp=getHTTPObject();
7
8functionhandleHttpResponse(){
9 if(http.readyState==4){
10 if(http.status==200){
11  varXMLDocument=http.responseXML;
12   if(http.responseText!=""){
13    document.getElementById("showStr").style.display="";
14     document.getElementById("userName").style.background="#FF0000";
15     document.getElementById("showStr").innerText=http.responseText;
16   }else{
17    document.getElementById("userName").style.background="#FFFFFF";
18    document.getElementById("showStr").style.display="none";
19   }
20
21  }
22  else{
23   alert("你所请求的页面发生异常,可能会影响你浏览该页的信息!");
24   alert(http.status);
25  }
26 }
27}
28
29functionhandleHttpResponse1(){
30 if(http.readyState==4){
31  if(http.status==200){
32   varxmlDocument=http.responseXML;
33   if(http.responseText!=""){
34    document.getElementById("comNmStr").style.display="";
35    document.getElementById("comNm").style.background="#FF0000";
36    document.getElementById("comNmStr").innerText=http.responseText;
37   }else{
38    document.getElementById("comNm").style.background="#FFFFFF";
39    document.getElementById("comNmStr").style.display="none";
40   }
41
42  }
43  else{
44   alert("你所请求的页面发生异常,可能会影响你浏览该页的信息!");
45   alert(http.status);
46  }
47 }
48}
49
50functionchkUser(){
51 varurl="/chkUserAndCom";
52 varname=document.getElementById("userName").value;
53 url =("&userName=" name "&oprate=chkUser");
54 http.open("GET",url,true);
55 http.onreadystatechange=handleHttpResponse;
56 http.send(null);
57 return;
58}
59functionchkComNm(){
60 varurl="/chkUserAndCom";
61 varname=document.getElementById("comNm").value;
62 url =("&comName=" name "&oprate=chkCom");
63 http.open("GET",url,true);
64 http.onreadystatechange=handleHttpResponse1;
65 http.send(null);
66 return;
67}
68
69//该函数可以创建我们需要的XMLHttpRequest对象
70functiongetHTTPObject(){
71 varxmlhttp=false;
72 if(window.XMLHttpRequest){

  • 上一篇文章:

  • 下一篇文章:
  •  

    0791-87557233

    重视每个来电 珍惜您的时间
    思诚者开发沙龙
    江西思诚科技有限公司  赣ICP备17006097号  CopyRight©2014 - 2018