ajax实现异步操作实例1

时间：2024-06-05 09:04:44
 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

 <script type="text/javascript">

 //ajax引擎对象

     var xmlHttpRequest=null;

     try {

         xmlHttpRequest=new ActiveXObject("Msxml2.XMLHTTP");

     } catch (e) {

         //alert("非IE浏览器");

         try {

             xmlHttpRequest = new XMLHttpRequest();

         } catch (e) {

             xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");

         }

     }

     function checkUserName(t){

         var userName=t.value;

         var reqUrl="data.do?userName="+userName;

         //监听第二步   绑定ajax引擎的监听对象

         var passwd="passwd="+userName;

         alert("test");

         xmlHttpRequest.onreadystatechange=function(){

             alert(xmlHttpRequest.readyState);

             if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){

                 //alert(xmlHttpRequest.responseText);

             }

         }

         //3，绑定提交地址open(method,url,isAsynchronous)

         xmlHttpRequest.open("post",reqUrl,true);

         //如果使用POST请求发送数据，需要设置请求头

         xmlHttpRequest.setRequestHeader('Content-typ','application/x-www-form-urlencoded');

         //4,发送请求

         xmlHttpRequest.send(passwd);

     }

 </script>

 </head>

 <body>

     用户名<input type="text" id="userName" onchange="checkUserName(this)" >

     密码<input type="password" id="passwd" onchange="checkUserName(this)" >

 </body>

 </html>

相关文章