当前页面: 开发资料首页 → Javascript 专题 → 在AJAX开发中集成数据库技术
摘要: 在AJAX开发中集成数据库技术
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;
<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>";
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方法来处理这些交互。这个类还有一个到数据库连接文件(用于连接到数据库)的参考。你必须用自己的数据库信息来代替登录,口令和数据库名。
<table borderColor=#cccccc width="92%" align=center bgColor=#e3e3e3 border=1>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();
}
require_once("../classes/Post.class.php");
$post = new Post();
$post->$method($id, $title, $description);