ajax学习之1-登录验证之-xml

xml传递验证后的数据，核心代码：

1 //取出xml格式数据,myXmlHttpRequest.responseXML是个xml dom对象
2  var mes=myXmlHttpRequest.responseXML.getElementsByTagName("mes");
3 //mes是个list类型    mes[0]代表取出第一个节点，认为mes下面还有其他节点，所有需要用childNodes[0]
4   var mes_val=mes[0].childNodes[0].nodeValue;
5  $("myres").value=mes_val;

1 out.print("<res><mes>用户名不可以用，对不起</mes></res>");

完整代码如下：

 1 <%@ page language="java" import="java.util.*" 
 2 pageEncoding="utf-8"%>
 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 4 <html>
 5   <head>  
 6     <title>My JSP 'register.jsp' starting page</title>
 7     <script type="text/javascript">
 8     function $(id)
 9     {
10       return document.getElementById(id);
11     }    
12     function getXmlHttpObject(){
13     var xmlHttpRequest;
14     //不同浏览器获取对象xmlHttpRequest对象方法不同
15     if(window.ActiveXObject)
16     {
17         //是ie内核
18         xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");    
19     }
20     else{
21         xmlHttpRequest=new XMLHttpRequest();        
22     }
23     return xmlHttpRequest;    
24     }
25     var myXmlHttpRequest="";
26     function chuli()
27     {
28         if(myXmlHttpRequest.readyState==4)
29         {
30             //取出xml格式数据,myXmlHttpRequest.responseXML是个xml dom对象
31              var mes=myXmlHttpRequest.responseXML.getElementsByTagName("mes");
32             //mes是个list类型    mes[0]代表取出第一个节点，认为mes下面还有其他节点，所有需要用childNodes[0]
33             var mes_val=mes[0].childNodes[0].nodeValue;
34             $("myres").value=mes_val;
35         }
36     }
37     function checkName()
38     {
39         
40         myXmlHttpRequest=getXmlHttpObject();
41         if(myXmlHttpRequest)
42         {
43             /*
44             var url="./registerPro.jsp?mytime="+Date()+"&username="+$("username").value;                        
45             //****************使用get方式提交*****************************
46             //使用true代表使用异步机制,打开请求
47             myXmlHttpRequest.open("get",url,true);
48             //指定回调函数
49             myXmlHttpRequest.onreadystatechange=chuli;
50             //真的发送请求，如果是get，则send null,如果是post，则填入实际的数据
51             myXmlHttpRequest.send(null);
52             */
53             //****************使用post方式提交*****************************
54             var url="./registerProXml.jsp";
55             var data="username="+$("username").value;
56             //打开请求,使用true代表使用异步机制
57             myXmlHttpRequest.open("post",url,true);
58             //此处有一句话，必须
59             myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");            
60             //指定回调函数
61             myXmlHttpRequest.onreadystatechange=chuli;
62             //真的发送请求，如果是get，则send null,如果是post，则填入实际的数据
63             myXmlHttpRequest.send(data);                                    
64         }
65         else
66         {
67         }
68     }
69     //写一个函数
70     
71     </script>
72   </head>
73   
74   <body>
75   <form action=# method="post"> 
76     用户名:<input type="text" onkeyup="checkName();" name="username" id="username"></input>
77      <input type="button" value="验证用户名" onclick="checkName();"/>
78   <input type="text" id="myres" style="color:red;border:0"></input>   
79      密码:<input type="password" name="pass"></input>
80      <input type="submit" value="register"/>
81   </form>
82   
83   
84    <form  action=# method="post">
85     用户名:<input type="text" name="username"></input>
86      密码:<input type="text" name="pass"></input>
87      <input type="submit" value="register"/>
88   </form>
89   
90   </body>
91 </html>

View Code

ajax学习之1-登录验证之-xml

相关推荐