基于jQuery框架的Ajax應用開發

趙增敏，李惠敏

（河南信息工程學校，鄭州 450008）

通過對jQuery框架的Ajax功能的分析，使用PHP作為Web開發技術并以MySQL作為后臺數據庫，提出了一種基于jQuery框架實現Ajax異步請求和頁面局部刷新的方法，并實現了用戶名即時驗證和表單數據的檢測功能，還給出了防止產生亂碼的解決方案。本文介紹了上述功能的詳細實現步驟并給出了關鍵代碼。

jQuery；Ajax；異步請求

0 引言

Ajax是使用客戶端腳本與Web服務器交換數據的Web應用開發技術。近年來該技術在Web應用開發中得到越來越多的應用。實際上Ajax是一組現有技術的無縫整合。XMLHttpRequest對象（簡稱為XHR）是Ajax技術的核心，在JavaScript腳本中可使用該對象來實現對服務器的異步請求，即在后臺發送請求并接收服務器響應，并使用響應的數據來更新局部頁面，以改進用戶體驗。使用傳統方法進行Ajax應用開發包括一系列步驟，整個編程過程頗為煩瑣。jQuery是一個輕量級的Ajax框架，它對XMLHttpRequest對象進行了良好的封裝，提供了一套完整的Ajax功能，極大地簡化了Ajax應用開發過程。本文結合常用的用戶注冊模塊探討了jQuery框架在Ajax開發的應用，以簡潔方式實現了Ajax異步請求并實現用戶名即時驗證和表單數據檢測等功能。

1 創建后臺數據庫

選擇MySQL作為后臺數據庫服務器。為了存儲用戶信息，可在MySQL服務器上創建一個web數據庫并在其中添加一個users表，為此可運行mysql命令行工具輸入并執行以下SQL語句：

CREATE DATABASE web;

USE web;

DROP TABLE IF EXISTS users;

CREATE TABLE users(

username varchar(10) NOT NULL,

password varchar(12) NOT NULL,

PRIMARY KEY(username)

)ENGINE=InnoDB DEFAULT CHARSET=gb2312;

2 創建用戶注冊頁面

創建一個PHP頁并命名為reg.php。該頁面的功能是注冊新用戶。在輸入用戶名的過程中，一旦光標離開相應的文本框，便通過jQuery腳本請求服務器上的驗證用戶頁面checkuser.php，并即時顯示所輸入的用戶名是否可用。如果在提示用戶名不可用的情況仍然提交表單數據，則通過PHP服務器代碼進行處理。

2.1 創建注冊表單

在reg.php頁中創建一個注冊表單，HTML代碼如下：

其中id為msg1和msg2的兩個span元素用于顯示驗證文本信息。

2.2 通過PHP服務器代碼驗證和創建用戶

當用戶提交注冊表單時，數據將提交到當前頁。在該頁開頭編寫PHP代碼，以創建數據庫連接，然后查詢提交的用戶名是否存在于users表中，對新用戶名進行驗證。若已存在于users表中，則顯示出錯信息并結束運行。若未存在于users表中，則使用所提交的數據添加一個新用戶。源代碼如下：

if((isset($_POST["username"])) &&

(isset($_POST["password"]))){

$users=mysql_pconnect("localhost","root","12 3") or trigger_error(mysql_error(),E_USER_ERROR);

mysql_select_db("web",$users);

$sql=sprintf("SELECT * FROM users WHERE username='%s'",$_POST['username']);

$rs=mysql_query($sql,$users) or die(mysql_error());

$totalRows_rs=mysql_num_rows($rs);

if($totalRows_rs>0){

echo sprintf("用戶名%s已被注冊。",

$_POST['username']);

exit;

}

$sql=sprintf("INSERT INTO users (username,password) VALUES ('%s','%s')",

$_POST['username'],$_POST['password']);

$result=mysql_query($sql, $users) or die(mysql_error());

if($result==1)echo "新用戶注冊成功。";

}

?>

2.3 通過jQuery腳本實現Ajax異步請求

為了引用jQuery庫，首先在reg.php頁中使用script標簽引入相應的.js庫文件：

接著通過jQuery腳本注冊兩個事件處理程序：一個是當光標離開文本框username時執行的blur事件處理程序，通過它向服務器上的PHP頁checkuser.php提交用戶名和密碼并將響應的信息顯示在id為msg1的span元素中；另一個是提交表單時執行的submit事件處理程序，其功能是對表單數據進行檢驗。源代碼如下：

需要強調指出的是，通過對span元素msg1調用jQuery load方法，可從服務器上加載一個PHP頁；由于傳入的附加參數是以映射形式指定的，因此會向服務器異步發送一個POST請求。若要通過普通的JavaScript腳本來實現同樣的功能，則需要編寫大量的代碼，從創建跨瀏覽器的XHR對象到初始化請求，從發送異步請求、接受服務器響應到更新頁面，都需要自己編程來實現。

3 在服務器上通過PHP代碼檢查用戶

為了在光標離開“用戶名”文本框即時檢查所輸入的用戶名，通過jQuery腳本加載服務器上的checkuser.php頁。在該頁上連接到后臺數據庫并創建一個記錄集，并根據記錄集是否為空向客戶端返回不同信息。源代碼如下：

header("Content-Type:text/html;charset=gb2312");

$username=mb_convert_encoding($_POST['username'],

"GB2312","UTF-8");

$users=mysql_pconnect("localhost","root","123")or trigger_error(mysql_error(),E_USER_ERROR);

mysql_select_db("web", $users);

$sql=sprintf("SELECT * FROM users WHERE username='%s'",$username);

$rs=mysql_query($sql, $users) or die(mysql_error());

$row_rs= ysql_fetch_assoc($rs);

$totalRows_rs= mysql_num_rows($rs);

if ($totalRows_rs==0){

echo sprintf("",$username);

}else{

echo sprintf("",$username);

}

mysql_free_result($rs);

?>

在上述代碼中，第1行代碼將該頁的字符集設置為簡體中文；第2行代碼將提交的用戶名轉換為簡體中文。這兩行代碼對于防止出現亂碼起頭非常重要的作用。如果沒有這些代碼，就可能無法得到預期的結果。

4 結束語

本文通過引入jQuery框架大大簡化了Ajax應用開發的過程，既實現了用戶名的即時驗證，也實現了表單數據的檢測，還通過PHP代碼對Ajax提交的數據進行了正確的解碼。雖然在服務器端使用了PHP技術，但本文中所提出的方法同樣適應于ASP、JSP等其他服務器技術。

[1] 趙增敏. jQuery全面提速[M]. 北京: 機械工業出版社,2010.

[2] 趙增敏. PHP動態網站開發[M]. 北京: 電子工業出版社,2011.