2022-10-23 327
一、引言
AJAX首先面临无可避免的第一个问题即是浏览器的兼容性问题,而在在AJAX开发中集成数据库技术就是把二者的兼容前来,此时,这个兼容性就是至关重要的一个环节。
如今,有相当多的Web应用程序,如Backpack,Blinksale和Gmail,都把数据库技术与AJAX集成到一起。通过提供与数据库通讯而不用刷新浏览器这种强有力的技术,这种集成对web应用程序和用户体验产生巨大的影响-这意味着,在用户继续其它交互的同时可以实现实时的数据传输。
本文将集中讨论上述技术集成机理。同时提供了完整的参考源码。这个示例是一个简单的职务记录应用程序,其中每个职务包含一个标题,描述和日期-允许用户添加、编辑和删除职务。所有这些都是你与数据库记录数据打交道时的基本操作,但是这个应用程序更进了一步。一个职务可以变化成一个可编辑的表单-它将被从数据库中加以保存或删除,以及以其新状态显示而不需要刷新浏览器并中断用户操作。
在本文中,我假定你已经初步了解AJAX、MySQL和PHP,或一类似的服务器端语言。如果你还没有创建过XML HTTP Request对象,那么可以先参考我的文章“怎样使用AJAX”。下面,首先让我们讨论数据库的问题。
二、创建数据库
你需要做的第一件事是创建数据库表来为这些职务存储数据。我创建了一个叫informit_ajax的MySQL表-它拥有ID,title,description和date字段-这些都是在本文中不断重复出现的变量。下面是创建该表的代码:
CREATETABLE′informit_ajax′( ′id′int(11)NOTNULLauto_increment, ′date′datetimeNOTNULLdefault'0000-00-0000:00:00', ′description′longtextNOTNULL, ′title′varchar(100)NOTNULLdefault'', PRIMARYKEY(′id′) )TYPE=MyISAM;
你可以用任何MySQL查询工具或开发应用程序所用的语言来执行这段代码。一旦准备好数据库,接下来就需要创建向PHP后台发出请求的前端文件。
三、发出请求
这里的索引HTML文件是一简单的数据占位符-它将被从数据库中加以分析。该文件包含到JavaScript和CSS文件的参考;还包含一个发出首次请求的onload处理器和三个div标签:
-用于把页面内容居中
-在被请求的数据加载期间加载消息,它将为HTTPRequest对象所接收
-用于显示每一个分析后的职务数据
<head> <title>HowtoIntegrateaDatabasewithAJAX</title> <linkhref="css/layout.css"rel="stylesheet"type="text/css"/> <scriptsrc="js/request.js"></script> <scriptsrc="js/post.js"></script> </head> <bodyonload="javascript:makeRequest('services/post.php?method=get');"> <divid="layout"align="center"> <divid="posts"></div> <p><inputtype="button"value="addapost"onmousedown="javascript:makeRequest('services/post.php?method=save');"/></p> <p><divid="loading"></div></p> </div> </body>
当页面装载时产生第一个请求。这个请求发送一个get查询到一个我们稍后会创建的PHP类;但是首先我们需要为请求的响应创建分析方法。JavaScript请求文件负责处理所有的基础工作,例如创建对象,发送请求以及检查准备状态等。当从Request对象收到响应时,我用这个JavaScript职务文件来处理这些职务的HTML生成。onResponse方法是相当强壮的,因为它以文本和表单两种版本处理每个职务的HTML页面生成,并且把它们放置到它们自己定制的div标签中;这样以来,我们就可以容易地在用户交互期间定位它们。通过这种方法,我们可以在每个职务的文本和表单版本之间进行切换-这可以通过点击一个"edit this post"链接来实现。下面是针对每个职务创建的HTML页面的代码,你可以在本文相应的下载源文件中看到完整的方法实现。
varhtml="<divclass='post'id='post_"+i+"'"+postDisplay+">" +"<divclass='title'id='title_"+i+"'>"+_title+"</div>" +"<divclass='description'id='description_"+i+"'>"+_description+"</div>" +"<divclass='date'id='date_"+i+"'>"+_date+"</div>" +"<ahref=\"javascript:toggle('"+i+"');\">editthispost</a><br/>" +"</div>" +"<divclass='post'id='formPost_"+i+"'"+formPostDisplay+">" +"<divclass='title'><inputtype='text'name='title'id='formTitle_"+i+"'size='60'value='"+_title+"'></div>" +"<divclass='description'><textareatype='text'id='formDescription_"+i+"'wrap='virtual'cols='60'rows='15'>"+_description+"</textarea></div>" +"<divclass='date'>"+_date+"</div>" +"<inputtype='button'name='cancel'value='cancel'onclick=\"javascript:toggle('"+i+"');\">" +"<inputtype='button'name='delete'value='deletethispost'onclick=\"javascript:deletePost("+_id+");\">" +"<inputtype='button'name='submit'value='savethispost'onclick=\"javascript:saveNewPost("+_id+","+i+");\">" +"</div>" +"<p>"nbsp;</p>";
每个职务的文本版本简单地显示标题,描述和日期以及一个"edit this post"链接。每个职务的表单版本有三个按钮:
1、"cancel"按钮-简单地把职务的状态切换回文本版本。
2、"delete this post"按钮-把当前职务的ID发送给PHP对象以从数据库中把它删除。
3、"save this post"按钮-允许用户把新的或编辑过的职务保存到服务器。
处理服务器端请求通讯的核心方法有onResponse,saveNewPost,deletePost和getPost方法;还有存储当前正操作的职务索引的一个getter和一个setter方法。这些getter/setter方法把当前索引值提供给这些核心方法,这样正确的职务就可以用基于该索引的正确信息进行更新。下面是针对每个核心方法(不包括onResponse,因为我们以前观察过它的功能)的简短描述和代码示例:
下面的saveNewPost方法通过收集并把表单输入值发送给PHP对象来保存新的职务并且把getPost方法设置为onreadystatechange的回叫方法:
functionsaveNewPost(_id,_index){ varnewDescription=document.getElementById("formDescription_"+_index).value; varnewTitle=document.getElementById("formTitle_"+_index).value; setIndex(_index); sendRequest("services/post.php?method=save"id="+_id+""title="+newTitle+""description="+newDescription,getPost);
下面的getPost方法是一个回调方法-它负责当从PHP对象收到响应时更新单独的职务:
functiongetPost(){ if(checkReadyState(request)){ varresponse=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对象,这最终将删除数据库中的记录并以更新的职务进行响应:
functiondeletePost(_id){ sendRequest("services/post.php?method=delete"id="+_id,onResponse); }
这些就是在AJAX开发中集成数据库技术中最为复杂的部分,掌握了这些,其他的就是易如反掌,只要认真学习,其实也没什么难的,重在理解。
原文链接:https://77isp.com/post/8482.html
=========================================
https://77isp.com/ 为 “云服务器技术网” 唯一官方服务平台,请勿相信其他任何渠道。
数据库技术 2022-03-28
网站技术 2023-01-07
网站技术 2022-11-26
网站技术 2022-11-17
Windows相关 2022-02-23
网站技术 2023-01-14
Windows相关 2022-02-16
Windows相关 2022-02-16
Linux相关 2022-02-27
数据库技术 2022-02-20
小游客游戏攻略网游戏攻略网 2024年07月26日
抠敌 2023年10月23日
嚼餐 2023年10月23日
男忌 2023年10月22日
瓮仆 2023年10月22日
扫码二维码
获取最新动态