下载本文示例代码
一、引言 如今，有相当多的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);} 令人惊讶的是，最复杂的部分已经结束了。下面让我们分析最为关键的部分-数据库交互。共2页。 1 2 :
一、引言 如今，有相当多的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);} 令人惊讶的是，最复杂的部分已经结束了。下面让我们分析最为关键的部分-数据库交互。共2页。 1 2 :
下载本文示例代码
在AJAX开发中集成数据库技术在AJAX开发中集成数据库技术在AJAX开发中集成数据库技术在AJAX开发中集成数据库技术在AJAX开发中集成数据库技术在AJAX开发中集成数据库技术在AJAX开发中集成数据库技术在AJAX开发中集成数据库技术在AJAX开发中集成数据库技术在AJAX开发中集成数据库技术在AJAX开发中集成数据库技术在AJAX开发中集成数据库技术在AJAX开发中集成数据库技术在AJAX开发中集成数据库技术在AJAX开发中集成数据库技术
阅读(135) | 评论(0) | 转发(0) |
