第107天：Ajax 实现简单的登录效果
使用 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对象的相应属性取得数据。 |
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 ?>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-12-07 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录