ajax基础入门—登录验证

1 <form >
2       用户名：<input type="text" name="username" id="username"/><br />
3       密码：<input type="password" name="password" id="password"/><span id="loginInfor"></span><br>
4       <input type="button" value="登录" id="btn"/>
5 </form>

1 window.onload = function(){
2     var btn = document.getElementById("btn");
3     var loginInfor = document.getElementById("loginInfor");
4     btn.onclick = function(){
5         var userName = document.getElementById("username").value;
6         var passWord = document.getElementById("password").value;
7         ajax(); // 这里，我们将ajax封装在一个函数里面
8     }
9 }

1 <?php
2 $username = $_GET['username'];
3 $password = $_GET['password'];
4 if($username == 'admin' && $password == 'admin'){
5     echo 1;
6 }else{
7     echo 0;
8 }
9 ?>

 1 // 1.创建HttpReuqest对象
 2 var xhr = null;
3 if(window.XMLHttpRequest){
4     xhr = new XMLHttpRequest();
5 }else {
6     xhr = new ActiveXObject("Microsoft.XMLHTTP"); // ie浏览器下兼容
7 }
8
 9 // 2.open方法初始化url：准备向服务器发送请求，但是还没有发送！
10 var url = './data.php?username='+encodeURIComponent(userName)+'&password='+passWord; // 将字符串作为url进行编码，防止出现中文乱码问题
11 xhr.open("GET",url); // 采用get方式请求
12
13 // 4.onreadystatechange回调函数：发送完请求后，需要做的事情
14 xhr.onreadystatechange = function(){
15     if(xhr.readyState == 4){ // 表示收到了来自服务器返回的数据
16         if(xhr.status == 200){ // 表示成功接收
17             var data = xhr.responseText; // 获取接收到的数据，这里是后台返回的0或1
18             console.log(data);
19             if(data == 1){
20                 loginInfor.innerHTML = "登录成功！用户名："+userName+" 密码"+passWord;
21             }else if(data == 0){
22                 loginInfor.innerHTML = "密码或用户名错误.请重新登录!用户名："+userName+" 密码"+passWord;
23             }
24         }
25     };
26 }
27 // 3.向服务器发送请求
28 xhr.send(null);

1 var url = './data.php?username='+encodeURIComponent(userName)
　　　　　　　　+'&password='+passWord;
2 xhr.open("GET",url);

3 xhr.send(null);

1 var data = "username=" + encodeURIComponent(userName)+ "&age=" + age;
2 xhr.open("post", "data.php", true);
3 //必须设置,否则服务器端收不到参数
4 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
5 xhr.send(data);