Ajax编程技第九章常见问题解决模式.pptVIP

Ajax编程技术第九章 常见问题解决模式 9.1 设计模式背景知识 设计模式是解决特定的常见问题的成熟技术或方法。我们会遇到成千上万的模式问题，不可能逐一介绍，本章只介绍采用Ajax技术来解决这些问题的常见方法。它们是： 表单验证设计模式； 鼠标悬停(mouseover)模式； 刷新模式； 错误处理模式。 9.2 表单验证 表单验证用于过滤无意义或恶意输入数据，保持系统安全。 问题 传统的验证用户输入的内容方法是，等待用户输入整页数据提交后，在服务器验证。响应很慢。如果只在客户端验证，就不能访问数据库中的细节数据。 解决的办法是同时在服务器和客户端进行验证。这就用到Ajax技术。 模式 有两种模式可用于表单验证： 当值被改变，或字段焦点丢失时，提交此字段； 定期提交要验证的字段内容。 9.2 表单验证 示例：字段焦点丢失时提交数据 先在默认目录下创建名为mydata.mdb的access数据库，库中有一个名为users的表，字段有2个： ID字段：自动编号； UserName字段：文本类型，40个字符宽。 假设表中已经输入用户姓名有：Peter, Alex, Kate 9.2 表单验证 创建主文件index.htm 9.2 表单验证 FormValidation.js文件： 9.2 表单验证 创建FormValidation.css文件： 9.2 表单验证 创建Validate.php文件： 9.2 表单验证 程序运行：用户姓名输入：Peter，服务器数据库中已经有此人姓名，不能再注册此姓名，所以输入无效： 9.2 表单验证 但如果输入库中没有的用户名zhangsan, 则验证合格，输入通过。 9.3 鼠标悬停模式 鼠标悬停技术是Web页面上动态显示信息的常见方法，它不影响原始页面上信息的布局而动态显示某项的附加信息。 问题 如何在不影响外观格局，不干扰用户当前活动的情况下，显示关于某项的附加信息。这是鼠标悬停技术所擅长的本事。 模式 可以利用弹出部分透明框架的形式显示关于特定项的附加信息，而不会造成中断。部分透明是指页面上的原始信息不会变得不明显。 9.3 鼠标悬停模式 鼠标悬停示例 一网页介绍5个旅游目的地。当鼠标悬停在风景地照片上，会得到前往该旅游风景地的详细信息。 此示例使用了boxover.js，严格来说，这里并不需要Ajax，然而此示例嫁接了使用XML文件的Ajax代码，它通过旅游地组团代号TarId，来确定鼠标悬停在哪张风景地图片上。并返回该风景地的详细(旅游目的地，最佳旅游时间、报价等)。 9.3 鼠标悬停模式 主页程序index.htm: 9.3 鼠标悬停模式 boxover.js: 9.3 鼠标悬停模式 9.3 鼠标悬停模式 9.3 鼠标悬停模式 创建mouse.js: 9.3 鼠标悬停模式 创建catalogue.xml： 9.3 鼠标悬停模式 创建catalogue.xsl： 9.3 鼠标悬停模式 运行程序： 9.3 鼠标悬停模式 运行程序：鼠标悬停在第4幅图上，立即显示该风景地详细信息 9.4 轮询服务模式 有时候，我们希望页面能自动定时地轮询更新，而不是手动刷新。这就是我们本节要介绍的技术。 问题 如何能定期地检查服务器上的信息？如果使用具有GET方法的XMLHttpRequest对象，则IE会缓存调用的XML页面，达不到轮询服务器定期自动更新的目的。这是我们面临的问题 解决模式 这种异步行为叫轮询服务器。这种模式被称为页面流(page streaming)或服务流(service streaming)。 方法是，创建持续运行调用服务器上数据的脚本。一般程序在第一次调用后都会退出程序，在此模式中，程序会循环调用函数，然后等待一定的时间，再调用这些函数。 9.4 轮询服务模式 例：创建一个包含股票价格的XML文件，当我们在后台修改了XML文件中的股票价格后，经过下一轮询问，变动的股票价格会自动显示在页面中： 创建主文件polling.htm: 9.4 轮询服务模式 创建Polling.js脚本文件： 9.4 轮询服务模式 创建GetStocksList.php文件： 9.4 轮询服务模式 准备后台股票数据的XML文件Stocks.xml: 9.4 轮询服务模式 创建Stocks.xsl文件: 9.4 轮询服务模式 运行：初始股价如下左图，在Stocks.xml文件中将第一支股票价格修改成8.9，然后保存，则页面自动更新后第一支股票的价格变成为8.9！见下右图： 9.5 错误处理模式 使用Ajax的问题之一是某些技术可能会导致一些异常，也可能碰见页面延迟，或者出现根本不出现呈现的问题。这种问题可能是由小的输入错误或页面的拼写错误引起。