- 阅读本文前应阅读完成(1).PHP:注册信息存储/登录信息验证基本原理 以及 (2).用 php 及 SQL 实现简单的注册及登录效果，多处重复内容不再赘述。
- 本文只为达到简单效果以及了解基本原理，不可实际使用。
Ajax是一项使局部网页请求服务器信息，而不需整体刷新网页内容的异步更新技术。这使得向服务器请求的数据量大大减少，而且不会因局部的请求失败而影响到整体网页的加载。
一. Ajax 请求数据的基本操作
假设使用 Ajax 从某个已知文档“test.txt”获取文件。
1. 基本操作
// 1. 得到做 ajax 操作的对象
// 系统提供的一个构造函数，可以进行网络请求
var ajaxObj = new XMLHttpRequest();
// 2. 给对象，指定请求方式，请求的地址
// 五个参数
// ①. GET 方式
// ②. 访问地址
// ③. true 就是异步请求（现代浏览器已经不支持同步请求了）
// ④. 账户名
// ⑤. 账户密码
ajaxObj.open("GET", "test.txt", true);
// ajaxObj.open("GET", "test.php", true); //别的文件也是可以的
// 3. 发送请求给服务器做处理
ajaxObj.send();
// 4. 当接收到服务器发回的相应信息，如何处理数据
// onreadystatechange 准备状态的改变
ajaxObj.onreadystatechange = function() {
if (ajaxObj.readyState == 4) {
// 判断 http 的响应状态码，这个范围内都算有相应
if (ajaxObj.status >= 200 && ajaxObj.status <= 300) {
// 提示响应内容，包含但不限于 php 的 echo 内容
alert(ajaxObj.responseText);
};
};
};
此时我们执行文件，即可获取 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”
// 封装 Ajax 基本代码
function ajaxFn(url,succFn) { // succFn 表示数据处理成功后如何处理这个函数
var ajaxObj = new XMLHttpRequest();
ajaxObj.open("GET", url, true);
ajaxObj.send();
ajaxObj.onreadystatechange = function() {
if (ajaxObj.readyState == 4) {
if (ajaxObj.status >= 200 && ajaxObj.status <= 300) {
// 利用参数中处理数据的函数
succFn(ajaxObj.responseText);
};
};
};
};
// 这是一个回调函数
ajaxFn("test.txt",function (data) {
alert(data);
});
二. 验证登录成功与否实例
1.HTML 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
用户名:<input type="text" id="user"/><br>
密__码:<input type="password" id="pass"/><br>
<button id="getTxt">验证</button>
<div id="div1">
</div>
</body>
<script src="Ajax_封装.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var user = document.getElementById("user"),
pass = document.getElementById("pass"),
btn = document.getElementById("getTxt"),
div = document.getElementById("div1");
btn.onclick = function () {
// 按钮点击 连接到了 login.php 文件
// 队请求内容进行字符串的拼接
var url1 = "login.php?user="+user.value+"&pass="+pass.value;
ajaxFn(url1,function (data) {
div.innerHTML = data; // 显示是否登录成功
})
}
</script>
</html>
注意：我们在向 login.php 请求数据的时候，对参数 url1进行了拼接，拼接完成后在 login.php 内查询对应值。
2. php 文件
这一部分完整参考了(1).PHP:注册信息存储/登录信息验证基本原理 以及 (2).用 php 及 SQL 实现简单的注册及登录效果中的登录验证内容，如有不明之处可进行参考。
<?php
// 登录验证
$user = $_GET["user"];
$pass = $_GET["pass"];
$link = mysql_connect("localhost", "root");
mysql_select_db("N_&_P", $link);
$re = mysql_query("select * from `N_&_P` where username = '{$user}' and password = '{$pass}'");
$obj = mysql_fetch_object($re);
if ($obj) echo "登录成功了！";
else echo "登录失败了！";
?>
网友评论