从JS到AJAX - 16 Ajax应用模式_第1页
从JS到AJAX - 16 Ajax应用模式_第2页
从JS到AJAX - 16 Ajax应用模式_第3页
从JS到AJAX - 16 Ajax应用模式_第4页
从JS到AJAX - 16 Ajax应用模式_第5页
已阅读5页，还剩36页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

Ajax应用模式2一、应用模式背景知识 设计模式是解决特定的常见问题的成熟技术或方法。我们会遇到成千上万的模式问题，不可能逐一介绍，本章只介绍采用Ajax技术来解决这些问题的常见方法。它们是：表单验证设计模式；鼠标悬停(mouseover)模式；刷新模式；错误处理模式。3二、表单验证 表单验证用于过滤无意义或恶意输入数据，保持系统安全。问题 传统的验证用户输入的内容方法是，等待用户输入整页数据提交后，在服务器验证。响应很慢。如果只在客户端验证，就不能访问数据库中的细节数据。 解决的办法是同时在服务器和客户端进行验证。这就用到Ajax技术。模式 有两种模式可用于表单验证：当值被改变，或字段焦点丢失时，提交此字段；定期提交要验证的字段内容。4示例：字段焦点丢失时提交数据先在默认目录下创建access数据库，库中有一个名为users的表，字段有2个：ID字段：自动编号；UserName字段：文本类型，40个字符宽。 假设表中已经输入用户姓名有：Chris,Kate5创建主htm文件6FormValidation.js文件：//创建XHR对象xHRObject，略functiongetData()//回调函数{//判断返回值是否为真{span.innerHTML="Thisusernamehasalreadybeentaken";}//若为假{span.innerHTML="Thisusernameisavailable";}}functiongetBody(newform,data){varargument=data+"=";argument+=encodeURIComponent(document.getElementById(data).value)returnargument;}functionValidate(data){varnewform=document.forms[0];varbodyofform=getBody(newform,data);if(bodyofform!="UserName="){xHRObject.open("POST","Validate.aspx",true);xHRObject.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xHRObject.onreadystatechange=getData;xHRObject.send(bodyofform);;}else{span.innerHTML="Blankusernamesnotallowed";}}getBody函数有什么作用7创建FormValidation.css文件：.textbox{position:absolute;left:100px;}span#span{color:Red;}8创建Validate.aspx文件：查询数据库中的用户名是否存在与提交字符相同的内容。如果有就返回true，否则返回false9程序运行：用户姓名输入：Kate，服务器数据库中已经有此人姓名，不能再注册此姓名，所以输入无效：10但如果输入库中没有的用户名zhangsan,则验证合格，输入通过。11三、鼠标悬停模式 鼠标悬停技术是Web页面上动态显示信息的常见方法，它不影响原始页面上信息的布局而动态显示某项的附加信息。问题 如何在不影响外观格局，不干扰用户当前活动的情况下，显示关于某项的附加信息。这是鼠标悬停技术所擅长的本事。模式 可以利用弹出部分透明框架的形式显示关于特定项的附加信息，而不会造成中断。部分透明是指页面上的原始信息不会变得不明显。12鼠标悬停示例 一网页介绍6本教材。当鼠标悬停在照片上，会得到前往该书本的详细信息。 此示例使用了boxover.js，严格来说，这里并不需要Ajax，然而此示例嫁接了使用XML文件的Ajax代码，它通过ISBN，来确定鼠标悬停在哪本书的图片上。并返回该书的详细(书名、作者、报价等)。1314主页程序index.htm:<scripttype="text/javascript"src="boxover.js"></script><scripttype="text/javascript"src="mouse.js"></script><body><tablealign=center><tr><td><atitle="header=[<imgsrc='begajax.jpg'/>]body=[0470106751]"href="catalogue1.htm"><imgalt="beginningajax"src="begajax.jpg"/></a></td>……</table></body>15boxover.js:Boxover是第三方提供的脚本库。该脚本主要完成下列工作注册鼠标经过事件。创建并控制DIV显示信息。将链接的title信息转换为图片的地址。kink=mousebox(res[2].replace('[[','[').replace(']]',']'));//请求转换的关键语句16创建mouse.js该脚本只有一个mousebox函数主要工作：利用ajax技术异步请求XML文件通过XSLT文件返回过滤数据的HMTL格式17创建catalogue.xml：<catalog><book><Title>BeginningASP.NETwithCSharp</Title><Authors>Hart,Kauffman,Sussman,Ullman</Authors><ISBN>0764588508</ISBN><Price>$39.99</Price></book>……</catalog>18创建catalogue.xsl：<xsl:outputmethod="html"indent="yes"version="4.0"/><xsl:paramname="ISBN"/><xsl:templatematch="/"><xsl:for-eachselect="//book"><xsl:iftest="ISBN=$ISBN"><span><b>Title</b>-<xsl:value-ofselect="Title"/></span><br/><span><b>Authors</b>-<xsl:value-ofselect="Authors"/></span><br/><span><b>ISBN</b>-<xsl:value-ofselect="ISBN"/></span><br/><span><b>Price</b>-<xsl:value-ofselect="Price"/></span><br/></xsl:if></xsl:for-each>19静态页面：在链接中设置好对应的ISBN号。boxover：设置div；注册事件；控制div保持显示boxover：获取图片链接的head和body；提取body中的数据，调用mouse.js查询信息mouse：异步查询xml文件的信息，并利用XSL查询ISBN对应的书本信息组成HTML返回20运行程序：21三、轮询服务模式有时候，我们希望页面能自动定时地轮询更新，而不是手动刷新。这就是我们本节要介绍的技术。问题如何能定期地检查服务器上的信息？如果使用具有GET方法的XMLHttpRequest对象，则IE会缓存调用的XML页面，达不到轮询服务器定期自动更新的目的。这是我们面临的问题解决模式 这种异步行为叫轮询服务器。这种模式被称为页面流(pagestreaming)或服务流(servicestreaming)。 方法是，创建持续运行调用服务器上数据的脚本。一般程序在第一次调用后都会退出程序，在此模式中，程序会循环调用函数，然后等待一定的时间，再调用这些函数。2223例：创建一个包含股票价格的XML文件，当我们在后台修改了XML文件中的股票价格后，经过下一轮询问，变动的股票价格会自动显示在页面中：创建主文件polling.htm:<head><title>PollingTheServerExample</title><linkid="Link1"rel="stylesheet"href="Polling.css"type="text/css"/><scripttype="text/javascript"src="polling.js"></script></head><bodyonload="getDocument()"><spanid="Stocks"></span></body></html>24创建Polling.js脚本文件：functiongetData(){if(xHRObject.readyState==4&&xHRObject.status==200){varxml=loadDocument(“Stocks.xml”);//装入XMLvarxsl=loadDocument(“Stocks.xsl”);//装入XSL

document.getElementById(“Stocks”).innerHTML=transformToHTML(xml,xsl);//transformToHTML是自定义转换xsl的方法

setTimeout("getDocument()",5000);

//每隔5秒钟清除对象，调用getDocument函数

}}functiongetDocument(){xHRObject.open(“GET”,“GetStocksList.aspx?id="+Number(newDate()),true);xHRObject.onreadystatechange=getData;if(xHRObject.overrideMimeType){xHRObject.overrideMimeType("text/plain");}xHRObject.send(null);}25创建GetStocksList.aspx文件：随机更新股票价值，并设置涨跌服务器端并不返回内容给客户端26准备后台股票数据的XML文件stocks.xml:<?xmlversion="1.0"encoding="iso-8859-1"standalone="yes"?><stocks><company><name>IsotopeInternationalLtd</name><price>8.4</price><direction>Down</direction></company><company><name>CartkeysConglomerates</name><price>3.2</price><direction>Down</direction></company></stocks>27运行：初始股价如下左图，在Stocks.xml文件中将第一支股票价格修改成8.9，然后保存，则页面自动更新后第一支股票的价格变成为8.9！见下右图：28四、错误处理模式 使用Ajax的问题之一是某些技术可能会导致一些异常，也可能碰见页面延迟，或者出现根本不出现呈现的问题。这种问题可能是由小的输入错误或页面的拼写错误引起。 对于这些错误，我们指望应用程序更健壮些，而不是一出现故障就停止运行。本节只讨论应用程序可以处理的一些常见情况。如果出现错误，常见的是下面3种错误之一：404：无法找到页面302：存在页面，但要求具有重定向权限；200：无错误，但页面不显示。29 前述3种错误中，首先介绍最后一种错误，因为前述3种错误中的前2个错误则比最后一种错误容易处理些。 对于第3种错误，因为常见的解决方案对它起不了多大作用。这意味着服务器端代码或XMLHttpRequest对象调用的代码存在错误。使得responseText或responseXML属性为空。产生这种错误的常因是代码中的逻辑错误。它暗示了代码已经正确执行，但无返回结果。 在这种情况下，XMLHttpRequest对象的status属性将为200。问题

XMLHttpRequest对象返回为4的readyState，但返回200以外的status时该怎么做？30解决模式

XMLHttpRequest对象经历了初始化对象、发送数据和接收响应等一系列阶段。它从0运行到4。通常，我们希望status属性返回200，readyStatus返回4。如果没有得到预期结果，则可能引起脚本崩溃。因为一旦返回值为4的readyStatus，除非重新设置，否则readyStatus是不会发生改变的。我们有两种解决模式：第一种模式是完全取消请求；第二种模式是继续在指定的时间或请求次数内执行请求。 下面来看看两种模式的实际示例。32例1：取消请求。以用户验证的示例为例。 我们对用户键盘输入的用户名是否包含在服务器上数据库中UserName表中，并使用XMLHttpRequest对象执行表单验证。 注意，Internet上的各种干扰使得有可能不返回status为200的响应。在这种情况下，必须采取其他措施。通过将XMLHttpRequest对象调用的文件名改为不存在的文件名，来模拟Internet上的干扰条件。 在status不为200的情况下，显示第三种替代信息。33将index.htm中的FormValidation.js改为FormValidation2.js<scripttype="text/javascript"src="FormValidation2.js"></script></head><body><formname="form1"id="form1"method="post"action="formcheck.aspx">UserName:<inputid="UserName"type="text"onblur="Validate('UserName')"/><br/><spanid="span"></span><br/><br/>Address:<inputid="Address"class="textbox"type="text"/><br/><br/><inputtype="button"value="Clickheretosubmitdetails"/></form>34functiongetData(){if((xHRObject.readyState==4)){if(xHRObject.status==200){varserverText=xHRObject.responseText;if(serverText=="True"){span.innerHTML="Thisusernamehasalreadybeentaken";}if(serverText=="False"){span.innerHTML="Thisusernameisavailable";}}

else{span.innerHTML="现在不能确定库中是否存在输入的名称，提交后再检验";xHRObject.abort();

}

}}xHRObject.open(“POST”,“thisfiledoesntexist.aspx”,true);//不存在的文件，导致status不等于200的错误发生……//以上是FormValidation2.js程序35运行程序，输入一个库中存在的姓名Peter,则出现status不为200的错误：36例2：多次请求。以股票更新示例为例，修改polling.htm文件：<scripttype="text/javascript"src="polling2.js"></script></head><bodyonload="getDocument()"><spanid="Stocks"></span></body>37将polling.js文件修改成polling2.js文件：functiongetData(){if(xHRObject.readyState==4){if(xHRObject.status==200){varxml=loadDocument("Stocks.xml");//LoadXMLvarxsl=loadDocument("Stocks.xsl");//LoadXSLdocument.getElementById("Stocks").innerHTML=transformToHTML(xml,xsl);//TransformsetTimeout("getDocument()",5000);}

else{varStocks=document.getElementById("Stocks");if(Stocks.innerHTML.indexOf("available")==-1){Stocks.innerHTML+=“<br/><span>当前股票信息不可用，仅显示最近的可用信息</span>";}xHRObject.a

人人文库> 全部分类> 教育资料 > 中学教育

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论