使用 Ajax 实现简单的登录效果
Ajax是一项使局部网页请求服务器信息，而不需整体刷新网页内容的异步更新技术。这使得向服务器请求的数据量大大减少，而且不会因局部的请求失败而影响到整体网页的加载。
一、 Ajax 请求数据的基本操作
假设使用 Ajax 从某个已知文档“test.txt”获取文件。
1、基本操作
1 // 1. 得到做 ajax 操作的对象 2 // 系统提供的一个构造函数，可以进行网络请求 3 var ajaxObj = new XMLHttpRequest(); 4 5 // 2. 给对象，指定请求方式，请求的地址 6 // 五个参数 7 // ①. GET 方式 8 // ②. 访问地址 9 // ③. true 就是异步请求（现代浏览器已经不支持同步请求了） 10 // ④. 账户名 11 // ⑤. 账户密码 12 ajaxObj.open("GET", "test.txt", true); 13 // ajaxObj.open("GET", "test.php", true); //别的文件也是可以的 14 15 // 3. 发送请求给服务器做处理 16 ajaxObj.send(); 17 18 // 4. 当接收到服务器发回的相应信息，如何处理数据 19 // onreadystatechange 准备状态的改变 20 ajaxObj.onreadystatechange = function() { 21 if (ajaxObj.readyState == 4) { 22 // 判断 http 的响应状态码，这个范围内都算有相应 23 if (ajaxObj.status >= 200 && ajaxObj.status <= 300) { 24 // 提示响应内容，包含但不限于 php 的 echo 内容 25 alert(ajaxObj.responseText); 26 }; 27 }; 28 }; 29
此时我们执行文件，即可获取 test.txt 文件中已经被写入的内容。
2、 readyState 说明
在此有需要说明问题：ajaxObj.readyState == 4指的是什么？
在这里其实一共有物种状态：0，1，2，3，4
| 状态 | 说明 |
|---|---|
| 0 | 未初始化状态：这个阶段确认 XMLHttpRequest 对象是否创建,为了使用 open 方法做准备,当值为0的时候，表示对象已经存在了，否则会报错 |
| 1 | 载入状态：对 XMLHttpRequest 对象进行初始化，就是调用 open 方法，为请求做设置，并且调用 send() 方法向服务器发送请求，1 就代表正在向服务器发送请求 |
| 2 | 载入完成：这个阶段代表刚接受到服务器发来的数据，这个数据是原始数据，还不能直接给客户端使用，为下一阶段做准备 |
| 3 | 解析（数据交互）：此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型，把数据转换成能通过responseBody、responseText或responseXML属性存取的格式，为在客户端调用作好准备。状态3表示正在解析数据。 |
| 4 | 完成：此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成，值为4表示数据解析完毕，可以通过XMLHttpRequest对象的相应属性取得数据。 |
在这几种情况下，只有4是客户端可以进行操作的，其余均为计算机自行处理。
3、封装
但是这样使用是很不方便的，因此我们将这段 js 代码封装在 JS 文件中，每次调用即可。命名为 “Ajax_封装.js”
1 // 封装 Ajax 基本代码 2 function ajaxFn(url,succFn) { // succFn 表示数据处理成功后如何处理这个函数 3 var ajaxObj = new XMLHttpRequest(); 4 ajaxObj.open("GET", url, true); 5 ajaxObj.send(); 6 ajaxObj.onreadystatechange = function() { 7 if (ajaxObj.readyState == 4) { 8 if (ajaxObj.status >= 200 && ajaxObj.status <= 300) { 9 // 利用参数中处理数据的函数 10 succFn(ajaxObj.responseText); 11 }; 12 }; 13 }; 14 }; 15 // 这是一个回调函数 16 ajaxFn("test.txt",function (data) { 17 alert(data); 18 });
二、验证登录成功与否实例
1、HTML 文件
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 用户名:<input type="text" id="user"/><br> 9 密__码:<input type="password" id="pass"/><br> 10 <button id="getTxt">验证</button> 11 <div id="div1"> 12 13 </div> 14 </body> 15 <script src="Ajax_封装.js" type="text/javascript" charset="utf-8"></script> 16 <script type="text/javascript"> 17 var user = document.getElementById("user"), 18 pass = document.getElementById("pass"), 19 btn = document.getElementById("getTxt"), 20 div = document.getElementById("div1"); 21 btn.onclick = function () { 22 // 按钮点击 连接到了 login.php 文件 23 // 队请求内容进行字符串的拼接 24 var url1 = "login.php?user="+user.value+"&pass="+pass.value; 25 ajaxFn(url1,function (data) { 26 div.innerHTML = data; // 显示是否登录成功 27 }) 28 } 29 </script> 30 </html>
注意：我们在向 login.php 请求数据的时候，对参数 url1进行了拼接，拼接完成后在 login.php 内查询对应值。
2、 php 文件
1 <?php 2 3 // 登录验证 4 $user = $_GET["user"]; 5 $pass = $_GET["pass"]; 6 7 $link = mysql_connect("localhost", "root"); 8 mysql_select_db("N_&_P", $link); 9 $re = mysql_query("select * from `N_&_P` where username = '{$user}' and password = '{$pass}'"); 10 $obj = mysql_fetch_object($re); 11 if ($obj) echo "登录成功了！"; 12 else echo "登录失败了！"; 13 ?>