基于jQuery框架的Ajax應(yīng)用開發(fā)

趙增敏，李惠敏

（河南信息工程學(xué)校，鄭州 450008）

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

jQuery；Ajax；異步請求

0 引言

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

1 創(chuàng)建后臺數(shù)據(jù)庫

選擇MySQL作為后臺數(shù)據(jù)庫服務(wù)器。為了存儲用戶信息，可在MySQL服務(wù)器上創(chuàng)建一個web數(shù)據(jù)庫并在其中添加一個users表，為此可運行mysql命令行工具輸入并執(zhí)行以下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 創(chuàng)建用戶注冊頁面

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

2.1 創(chuàng)建注冊表單

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

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

2.2 通過PHP服務(wù)器代碼驗證和創(chuàng)建用戶

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

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腳本實現(xiàn)Ajax異步請求

為了引用jQuery庫，首先在reg.php頁中使用script標(biāo)簽引入相應(yīng)的.js庫文件：

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

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

3 在服務(wù)器上通過PHP代碼檢查用戶

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

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行代碼將該頁的字符集設(shè)置為簡體中文；第2行代碼將提交的用戶名轉(zhuǎn)換為簡體中文。這兩行代碼對于防止出現(xiàn)亂碼起頭非常重要的作用。如果沒有這些代碼，就可能無法得到預(yù)期的結(jié)果。

4 結(jié)束語

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

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

[2] 趙增敏. PHP動態(tài)網(wǎng)站開發(fā)[M]. 北京: 電子工業(yè)出版社,2011.