每个职务的文本版本简单地显示标题,描述和日期以及一个"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对象,这最终将删除数据库中的记录并以更新的职务进行响应: