一、引言

　　如今，有相当多的web应用程序，如backpack，blinksale和gmail，都把数据库技术与ajax集成到一起。通过提供与数据库通讯而不用刷新浏览器这种强有力的技术，这种集成对web应用程序和用户体验产生巨大的影响-这意味着，在用户继续其它交互的同时可以实现实时的数据传输。

　　本文将集中讨论上述技术集成机理。同时提供了完整的参考源码。这个示例是一个简单的职务记录应用程序，其中每个职务包含一个标题，描述和日期-允许用户添加、编辑和删除职务。所有这些都是你与数据库记录数据打交道时的基本操作，但是这个应用程序更进了一步。一个职务可以变化成一个可编辑的表单-它将被从数据库中加以保存或删除，以及以其新状态显示而不需要刷新浏览器并中断用户操作。

　　在本文中，我假定你已经初步了解ajax、mysql和php，或一类似的服务器端语言。如果你还没有创建过xml http request对象，那么可以先参考我的文章“怎样使用ajax”。下面，首先让我们讨论数据库的问题。

　　二、创建数据库

　　你需要做的第一件事是创建数据库表来为这些职务存储数据。我创建了一个叫informit_ajax的mysql表-它拥有id，title，description和date字段-这些都是在本文中不断重复出现的变量。下面是创建该表的代码：

create table ′informit_ajax′ (
′id′ int(11) not null auto_increment,
′date′ datetime not null default '0000-00-00 00:00:00',
′description′ longtext not null,
′title′ varchar(100) not null default '',
primary key (′id′)
) type=myisam;

　　你可以用任何mysql查询工具或开发应用程序所用的语言来执行这段代码。一旦准备好数据库，接下来就需要创建向php后台发出请求的前端文件。

　　三、发出请求

　　这里的索引html文件是一简单的数据占位符-它将被从数据库中加以分析。该文件包含到javascript和css文件的参考；还包含一个发出首次请求的onload处理器和三个div标签：

　　? layout-用于把页面内容居中

　　? loading-在被请求的数据加载期间加载消息，它将为httprequest对象所接收

　　? posts-用于显示每一个分析后的职务数据

＜head＞
＜title＞how to integrate a database with ajax＜/title＞
＜link href="css/layout.css" rel="stylesheet" type="text/css" /＞
＜script src="js/request.js"＞＜/script＞
＜script src="js/post.js"＞＜/script＞
＜/head＞
＜body onload="javascript:makerequest('services/post.php?method=get');"＞
＜div id="layout" align="center"＞
＜div id="posts"＞＜/div＞
＜p＞＜input type="button" value="add a post" onmousedown="javascript:makerequest('services/post.php?method=save');" /＞＜/p＞
＜p＞＜div id="loading"＞＜/div＞＜/p＞
＜/div＞

＜/body＞

　　当页面装载时产生第一个请求。这个请求发送一个get查询到一个我们稍后会创建的php类；但是首先我们需要为请求的响应创建分析方法。javascript请求文件负责处理所有的基础工作，例如创建对象，发送请求以及检查准备状态等。当从request对象收到响应时，我用这个javascript职务文件来处理这些职务的html生成。onresponse方法是相当强壮的，因为它以文本和表单两种版本处理每个职务的html页面生成，并且把它们放置到它们自己定制的div标签中；这样以来，我们就可以容易地在用户交互期间定位它们。通过这种方法，我们可以在每个职务的文本和表单版本之间进行切换-这可以通过点击一个"edit this post"链接来实现。下面是针对每个职务创建的html页面的代码，你可以在本文相应的下载源文件中看到完整的方法实现。

var html = "＜div class='post' id='post_"+ i +"' "+ postdisplay +"＞"
+ "＜div class='title' id='title_"+ i +"'＞"+ _title +"＜/div＞"
+ "＜div class='description' id='description_"+ i +"'＞"+ _description +"＜/div＞"
+ "＜div class='date' id='date_"+ i +"'＞"+ _date +"＜/div＞"
+ "＜a href=/"javascript:toggle('"+ i +"');/"＞edit this post＜/a＞
"
+ "＜/div＞"
+ "＜div class='post' id='formpost_"+ i +"' "+ formpostdisplay +"＞"
+ "＜div class='title'＞＜input type='text' name='title' id='formtitle_"+ i +"' size='60' value='"+ _title +"'＞＜/div＞"
+ "＜div class='description'＞＜textarea type='text' id='formdescription_"+ i +"' wrap='virtual' cols='60' rows='15'＞"+ _description +"＜/textarea＞＜/div＞"
+ "＜div class='date'＞"+ _date +"＜/div＞"
+ "＜input type='button' name='cancel' value='cancel' onclick=/"javascript:toggle('"+ i +"');/"＞"
+ "＜input type='button' name='delete' value='delete this post' onclick=/"javascript:deletepost("+ _id +");/"＞"
+ "＜input type='button' name='submit' value='save this post' onclick=/"javascript:savenewpost("+ _id +","+ i +");/"＞"
+ "＜/div＞"
+ "＜p＞"nbsp;＜/p＞";

　　每个职务的文本版本简单地显示标题，描述和日期以及一个"edit this post"链接。每个职务的表单版本有三个按钮：

　　?"cancel"按钮-简单地把职务的状态切换回文本版本。

　　?"delete this post"按钮-把当前职务的id发送给php对象以从数据库中把它删除。

　　?"save this post"按钮-允许用户把新的或编辑过的职务保存到服务器。

　　处理服务器端请求通讯的核心方法有onresponse，savenewpost，deletepost和getpost方法；还有存储当前正操作的职务索引的一个getter和一个setter方法。这些getter/setter方法把当前索引值提供给这些核心方法，这样正确的职务就可以用基于该索引的正确信息进行更新。下面是针对每个核心方法（不包括onresponse，因为我们以前观察过它的功能)的简短描述和代码示例：

　　? 下面的savenewpost方法通过收集并把表单输入值发送给php对象来保存新的职务并且把getpost方法设置为onreadystatechange的回叫方法：

function savenewpost(_id, _index){
　var newdescription = document.getelementbyid("formdescription_"+ _index).value;
　var newtitle = document.getelementbyid("formtitle_"+ _index).value;
　setindex(_index);
　sendrequest("services/post.php?method=save"id="+ _id +""title="+ newtitle +""description="+ newdescription, getpost);
}

　　? 下面的getpost方法是一个回调方法-它负责当从php对象收到响应时更新单独的职务：

function getpost(){
　if(checkreadystate(request)) {
　　var response = request.responsexml.documentelement;
　　var _title = response.getelementsbytagname('title')[getindex()].firstchild.data;
　　var _description = response.getelementsbytagname('description')[getindex()].firstchild.data;
　　var _date = response.getelementsbytagname('date')[getindex()].firstchild.data;

　　document.getelementbyid("title_"+ getindex()).innerhtml = _title;
　　document.getelementbyid("description_"+ getindex()).innerhtml = _description;
　　document.getelementbyid("date_"+ getindex()).innerhtml = _date;
　　toggle(getindex());
　}
}

　　? 下面的deletepost方法把当前索引作为一个请求发送给php对象，这最终将删除数据库中的记录并以更新的职务进行响应：

function deletepost(_id){
　sendrequest("services/post.php?method=delete"id="+ _id, onresponse);
}

　　令人惊讶的是，最复杂的部分已经结束了。下面让我们分析最为关键的部分-数据库交互。

　　四、与数据库交互

　　为了实现与数据库的交互，你需要创建方法用于检索，插入，代替和删除职务。我选择创建一个post类，其中有get，save和delete方法来处理这些交互。这个类还有一个到数据库连接文件（用于连接到数据库）的参考。你必须用自己的数据库信息来代替登录，口令和数据库名。

define ('db_user', 'username');
define ('db_password', 'password');
define ('db_host', 'localhost');
define ('db_name', 'database');
$dbc = @mysql_connect (db_host, db_user, db_password) or die ('could not connect to mysql: ' . mysql_error() );

　　到连接文件的参考以及数据库的名字位于该类的构造器中。你的构造器看上去应该与下面代码相似：

function post(){
　require_once('mysql_connect.php');
　$this-＞table = "informit_ajax";
}

　　下面的dbconnect方法负责创建连接-通过把登录信息传送给数据库；这个方法被重用于查询数据库前的所有核心方法中：

function dbconnect(){
　define ('link', mysql_connect (db_host, db_user, db_password));
}

　　下面的get方法循环遍历数据库表，它基于数据库行创建一个xml字符串，并把该字符串返回给请求者：

function get(){
　$this-＞dbconnect();
　$query = "select * from $this-＞table order by id";
　$result = mysql_db_query (db_name, $query, link);
　$xml = "＜?xml version=/"1.0/" encoding=/"iso-8859-1/" ?＞/n";
　$xml .= "＜posts＞/n";
　while($row = mysql_fetch_array($result)) {
　　$xml .= "＜post＞/n";
　　$xml .= "＜id＞" . $row['id'] . "＜/id＞/n";
　　$xml .= "＜date＞" . $row['date'] . "＜/date＞/n";
　　$xml .= "＜title＞＜![cdata[" . $row['title'] . "]]＞＜/title＞/n";
　　$xml .= "＜description＞＜![cdata[" . $row['description'] . "]]＞＜/description＞/n";
　　$xml .= "＜/post＞/n";
　}
　$xml .= "＜/posts＞";
　mysql_close();
　header("content-type: application/xml; charset=utf-8");
　echo $xml;
}

　　下面的save方法通过处理更新和插入位置实现两个目的：

function save($id, $title, $description){
$this-＞dbconnect();
$query = "select * from $this-＞table where id='$id'";
$result = @mysql_query ($query);
if (mysql_num_rows($result) ＞ 0)
{
　$query = "update $this-＞table set title='$title', description='$description', date=now() where id='$id'";
　$result = @mysql_query($query);
}
else
{
　$query = "insert into $this-＞table (title, description, date) values ('$title', '$description', now())";
　$result = @mysql_query($query);
}
mysql_close();
$this-＞get();
}

　　下面的delete方法负责删除一个基于被作为参数传递的id的位置。然后调用get方法来把新的数据返回到请求文件：

function delete($id){
　$this-＞dbconnect();
　$query = "delete from $this-＞table where id='$id'";
　$result = @mysql_query($query);
　mysql_close();
　$this-＞get();
}

　　五、综合应用

　　为了把以上各部分整合到一起,需要创建一个简单的文件来承担xml http请求和php对象之间的通讯桥梁。这时的页面不仅创建php对象，还接收查询并把变量传递给动态生成的方法-在此是指get，save或delete。下面的一个示例查询包括了一个$method和可靠的$id，$title和$description变量。

require_once("../classes/post.class.php");
$post = new post();
$post-＞$method($id, $title, $description);

　　以后我们还会更进一步讨论这些技术。如今的web开发看起来再次变得年轻而充满活力，而我们也很幸运地成为这种新技术时代的一部分。