ajax实现异步操作实例1

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <script type="text/javascript">
 7 //ajax引擎对象
 8     var xmlHttpRequest=null;
 9     try {
10         xmlHttpRequest=new ActiveXObject("Msxml2.XMLHTTP");
11     } catch (e) {
12         //alert("非IE浏览器");
13         try {
14             
15             xmlHttpRequest = new XMLHttpRequest();
16         } catch (e) {
17             xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
18         }
19         
20     }
21 
22 
23     function checkUserName(t){
24         var userName=t.value;
25         var reqUrl="data.do?userName="+userName;
26         //监听第二步   绑定ajax引擎的监听对象
27         var passwd="passwd="+userName;
28         
29         
30         alert("test");
31         xmlHttpRequest.onreadystatechange=function(){
32             alert(xmlHttpRequest.readyState);
33             if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
34                 //alert(xmlHttpRequest.responseText);
35             }
36         }
37         //3，绑定提交地址open(method,url,isAsynchronous)
38         xmlHttpRequest.open("post",reqUrl,true);
39         
40         //如果使用POST请求发送数据，需要设置请求头
41         xmlHttpRequest.setRequestHeader('Content-typ','application/x-www-form-urlencoded');
42         
43         //4,发送请求
44         xmlHttpRequest.send(passwd);
45     }
46 </script>
47 </head>
48 <body>
49     用户名<input type="text" id="userName" onchange="checkUserName(this)" > 
50     密码<input type="password" id="passwd" onchange="checkUserName(this)" >
51 </body>
52 </html>