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);
}