在AJAX开发中集成数据库技术(1)


一、引言

如今,有相当多的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 按钮-允许用户把新的或编辑过的职务保存到服务器。

本文作者:
« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3