在AJAX开发中集成数据库技术
来源：网络 更新时间：2014-12-2
一、引言
如今，有相当多的Web应用程序，如Backpack，Blinksale和Gmail，都把数据库技术与AJAX集成到一起。通过提供与数据库通讯而不用刷新浏览器这种强有力的技术，这种集成对web应用程序和用户体验产生巨大的影响-这意味着，在用户继续其它交互的同时可以实现实时的数据传输。
本文将集中讨论上述技术集成机理。同时提供了完整的参考源码。这个示例是一个简单的职务记录应用程序，其中每个职务包含一个标题，描述和日期-允许用户添加、编辑和删除职务。所有这些都是你与数据库记录数据打交道时的基本操作，但是这个应用程序更进了一步。一个职务可以变化成一个可编辑的表单-它将被从数据库中加以保存或删除，以及以其新状态显示而不需要刷新浏览器并中断用户操作。
在本文中，我假定你已经初步了解AJAX、MySQL和PHP，或一类似的服务器端语言。如果你还没有创建过XMLHTTPRequest对象，那么可以先参考我的文章“怎样使用AJAX”。下面，首先让我们讨论数据库的问题。
二、创建数据库
你需要做的第一件事是创建数据库表来为这些职务存储数据。我创建了一个叫informit_ajax的MySQL表-它拥有ID，title，description和date字段-这些都是在本文中不断重复出现的变量。下面是创建该表的代码：
CREATETABLE′informit_ajax′(
′id′int(11)NOTNULLauto_increment,
′date′datetimeNOTNULLdefault'0000-00-0000:00:00',
′description′longtextNOTNULL,
′title′varchar(100)NOTNULLdefault'',
PRIMARYKEY(′id′)
)TYPE=MyISAM;
你可以用任何MySQL查询工具或开发应用程序所用的语言来执行这段代码。一旦准备好数据库，接下来就需要创建向PHP后台发出请求的前端文件。
三、发出请求
这里的索引HTML文件是一简单的数据占位符-它将被从数据库中加以分析。该文件包含到JavaScript和CSS文件的参考；还包含一个发出首次请求的onload处理器和三个div标签：
·Layout-用于把页面内容居中
·loading-在被请求的数据加载期间加载消息，它将为HTTPRequest对象所接收
·posts-用于显示每一个分析后的职务数据
＜head＞
＜title＞HowtoIntegrateaDatabasewithAJAX＜/title＞
＜linkhref="css/layout.css"rel="stylesheet"type="text/css"/＞
＜scriptsrc="js/request.js"＞＜/script＞
＜scriptsrc="js/post.js"＞＜/script＞
＜/head＞
＜bodyonload="Javascript:makeRequest('services/post.php?method=get');"＞
＜divid="layout"align="center"＞
＜divid="posts"＞＜/div＞
＜p＞＜inputtype="button"value="addapost"onmousedown="javascript:makeRequest('services/post.php?method=save');"/＞＜/p＞
＜p＞＜divid="loading"＞＜/div＞＜/p＞
＜/div＞
＜/body＞
当页面装载时产生第一个请求。这个请求发送一个get查询到一个我们稍后会创建的PHP类；但是首先我们需要为请求的响应创建分析方法。JavaScript请求文件负责处理所有的基础工作，例如创建对象，发送请求以及检查准备状态等。当从Request对象收到响应时，我用这个JavaScript职务文件来处理这些职务的HTML生成。onResponse方法是相当强壮的，因为它以文本和表单两种版本处理每个职务的HTML页面生成，并且把它们放置到它们自己定制的div标签中；这样以来，我们就可以容易地在用户交互期间定位它们。通过这种方法，我们可以在每个职务的文本和表单版本之间进行切换-这可以通过点击一个"editthispost"链接来实现。下面是针对每个职务创建的HTML页面的代码，你可以在本文相应的下载源文件中看到完整的方法实现。
varhtml="＜divclass='post'id='post_" i "'" postDisplay "＞"
