- 閱讀本文前應閱讀完成(1).PHP:注冊信息存儲/登錄信息驗證基本原理 以及 (2).用 php 及 SQL 實現(xiàn)簡單的注冊及登錄效果，多處重復內(nèi)容不再贅述。
- 本文只為達到簡單效果以及了解基本原理，不可實際使用。
Ajax是一項使局部網(wǎng)頁請求服務器信息，而不需整體刷新網(wǎng)頁內(nèi)容的異步更新技術。這使得向服務器請求的數(shù)據(jù)量大大減少，而且不會因局部的請求失敗而影響到整體網(wǎng)頁的加載。
一. Ajax 請求數(shù)據(jù)的基本操作
假設使用 Ajax 從某個已知文檔“test.txt”獲取文件。
1. 基本操作
// 1. 得到做 ajax 操作的對象
// 系統(tǒng)提供的一個構造函數(shù)，可以進行網(wǎng)絡請求
var ajaxObj = new XMLHttpRequest();
// 2. 給對象，指定請求方式，請求的地址
// 五個參數(shù)
// ①. GET 方式
// ②. 訪問地址
// ③. true 就是異步請求（現(xiàn)代瀏覽器已經(jīng)不支持同步請求了）
// ④. 賬戶名
// ⑤. 賬戶密碼
ajaxObj.open("GET", "test.txt", true);
// ajaxObj.open("GET", "test.php", true); //別的文件也是可以的
// 3. 發(fā)送請求給服務器做處理
ajaxObj.send();
// 4. 當接收到服務器發(fā)回的相應信息，如何處理數(shù)據(jù)
// onreadystatechange 準備狀態(tài)的改變
ajaxObj.onreadystatechange = function() {
if (ajaxObj.readyState == 4) {
// 判斷 http 的響應狀態(tài)碼，這個范圍內(nèi)都算有相應
if (ajaxObj.status >= 200 && ajaxObj.status <= 300) {
// 提示響應內(nèi)容，包含但不限于 php 的 echo 內(nèi)容
alert(ajaxObj.responseText);
};
};
};
此時我們執(zhí)行文件，即可獲取 test.txt 文件中已經(jīng)被寫入的內(nèi)容。
2. readyState 說明
在此有需要說明問題：ajaxObj.readyState == 4指的是什么？
在這里其實一共有物種狀態(tài)：0，1，2，3，4
| 狀態(tài) | 說明 |
|---|---|
| 0 | 未初始化狀態(tài)：這個階段確認 XMLHttpRequest 對象是否創(chuàng)建,為了使用 open 方法做準備,當值為0的時候，表示對象已經(jīng)存在了，否則會報錯 |
| 1 | 載入狀態(tài)：對 XMLHttpRequest 對象進行初始化，就是調用 open 方法，為請求做設置，并且調用 send() 方法向服務器發(fā)送請求，1 就代表正在向服務器發(fā)送請求 |
| 2 | 載入完成：這個階段代表剛接受到服務器發(fā)來的數(shù)據(jù)，這個數(shù)據(jù)是原始數(shù)據(jù)，還不能直接給客戶端使用，為下一階段做準備 |
| 3 | 解析（數(shù)據(jù)交互）：此階段解析接收到的服務器端響應數(shù)據(jù)。即根據(jù)服務器端響應頭部返回的MIME類型，把數(shù)據(jù)轉換成能通過responseBody、responseText或responseXML屬性存取的格式，為在客戶端調用作好準備。狀態(tài)3表示正在解析數(shù)據(jù)。 |
| 4 | 完成：此階段確認全部數(shù)據(jù)都已經(jīng)解析為客戶端可用的格式，解析已經(jīng)完成，值為4表示數(shù)據(jù)解析完畢，可以通過XMLHttpRequest對象的相應屬性取得數(shù)據(jù)。 |
在這幾種情況下，只有4是客戶端可以進行操作的，其余均為計算機自行處理。
3. 封裝
但是這樣使用是很不方便的，因此我們將這段 js 代碼封裝在 JS 文件中，每次調用即可。命名為 “Ajax_封裝.js”
// 封裝 Ajax 基本代碼
function ajaxFn(url,succFn) { // succFn 表示數(shù)據(jù)處理成功后如何處理這個函數(shù)
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) {
// 利用參數(shù)中處理數(shù)據(jù)的函數(shù)
succFn(ajaxObj.responseText);
};
};
};
};
// 這是一個回調函數(shù)
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 文件
// 隊請求內(nèi)容進行字符串的拼接
var url1 = "login.php?user="+user.value+"&pass="+pass.value;
ajaxFn(url1,function (data) {
div.innerHTML = data; // 顯示是否登錄成功
})
}
</script>
</html>
注意：我們在向 login.php 請求數(shù)據(jù)的時候，對參數(shù) url1進行了拼接，拼接完成后在 login.php 內(nèi)查詢對應值。
2. php 文件
這一部分完整參考了(1).PHP:注冊信息存儲/登錄信息驗證基本原理 以及 (2).用 php 及 SQL 實現(xiàn)簡單的注冊及登錄效果中的登錄驗證內(nèi)容，如有不明之處可進行參考。
<?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 "登錄失敗了！";
?>
