在AJAX开发中集成数据库(mysql)技术
2006-09-20 22:42
525 查看
在AJAX开发中集成数据库(mysql)技术
一、引言如今,有相当多的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; |
三、发出请求
这里的索引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> |
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>"; |
·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); } |
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()); } } |
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"; } |
function dbConnect(){ DEFINE ('LINK', mysql_connect (DB_HOST, DB_USER, DB_PASSWORD)); } |
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; } |
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(); } |
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); |
相关文章推荐
- 在AJAX开发中集成数据库技术
- 在 AJAX 开发中集成数据库技术
- 利用AJAX技术开发应用程序实战
- 利用AJAX技术开发应用程序实战
- 基于ASP.NET AJAX技术开发在线RSS阅读器(下篇)
- 2007年软件开发技术预测集锦-Java,软件开发,Ajax
- 2007年软件开发技术预测集锦-Java,软件开发,Ajax
- 2007年软件开发技术预测集锦-Java,软件开发,Ajax
- 2007年软件开发技术预测集锦-Java,软件开发,Ajax
- 利用AJAX技术开发应用程序实战
- 通达OA 开发基于AJAX技术数据列表控件的智能表单(图文)
- Ajax Rules!美国四分之三的软件开发经理正在或者计划使用Ajax技术
- 利用AJAX技术开发应用程序实战
- 使用AJAX技术开发新一代Web应用程序 2
- AJAX技术在PHP开发中的简单应用
- 2007年软件开发技术预测集锦-Java,软件开发,Ajax
- AJAX技术在PHP开发中的简单应用
- 落伍首发 php+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
- MySQL开发规范及实用技术
- AJAX技术在PHP开发中的简单应用