分享
 
 
 

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

王朝other·作者佚名  2008-05-19
窄屏简体版  字體: |||超大  

一、引言

如今,有相当多的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><br/>"

+ "</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开发看起来再次变得年轻而充满活力,而我们也很幸运地成为这种新技术时代的一部分。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有