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

dn001 2008-12-23 10:21:13

　　当页面装载时产生第一个请求。这个请求发送一个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());
　}
}