基于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.