<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"链接。每个职务的表单版本有三个按钮:
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;