第十讲 输入前提示.ppt

第十章：输入前提示 输入前提示 在客户端缓存搜索结果 Rico库 Prototype库 Javascript apply()函数 将组件参数化 10.1考察输入前提示应用 由于Ajax变得越来越流行，输入前提示已经成为最受欢迎的程序之一，人们在创建输入前提示功能时，大量的解决方案存在缺陷，部分存在过度设计的问题。 10.1.1输入前提示的常见特征 1、在页面中输入字符 2、输入前提示功能发送请求到服务器 3、服务器返回数据给客户端 4、客户端得到数据并将结果显示在表格、层、文本框或其他格式中。 存在的问题： 1、每次按键都回送 2、没有数据缓存 3、56k的调制解调器 4、返回太多的结果 5、界面太华丽 6、快速的打字员 10.1.2 Google Suggest 将显示结果限制为10条 使用定时器来为快速打字员计数 10.1.3实战开发Ajax输入前提示 该输入前提示功能将努力限制对于服务器的影响，小型网站没有均衡设备和多台服务器，节约带宽，降低成本。 仅仅在需要更新数据库时才会访问服务器。 客户端和服务器端使用一脚本为中心的交互，服务器返回的是文本+识别字段。 10.2 服务器端框架：C# 服务器、数据库和客户端。 利用XMLHttpRequest从客户端发送一个请求到服务器，查询数据库动态创建一个文档（包括JavaScript代码和包含数据的数组）。 见 typeAheadData.aspx.cs 10.2.2 测试服务器端代码 测试方法： 从客户端发送一个请求。 在服务器端采用硬编码的方式。 string strQuery =“a”； string strAny = “%; 10.3 客户端框架 客户端的框架包括Ajax的XMLHttpRequest对象和大量的DHTML。 10.3.1 HTML form name=Form1 AUTOCOMPLETE=off ID=Form1 AutoComplete Text Box: input type=text name=txtUserInput/ input type=hidden name=txtUserValue ID=hidden1 / input type=text name=txtIgnore style=display:none / 关闭自动完成功能 txtIgnore的存在防止按回车键提交表单 txtUserValue获得输入的值 10.3.2 JavaScript 主要任务： 1、监控键盘和鼠标的行为 2、向服务器发送数据，并且从服务器接收数据 3、生成用户可以交互的HTML内容 监视按键 加载文本和JavaScript代码 创建提示列表 为输入字母加上下划线 1、添加外部的JavaScript文件 script type=text/javascript src=net.js/script 2、输出span元素 使用页面的onload事件处理函数将span元素动态的添加到页面中，这样可以避免每次想要使用脚本时不得不手工将标签添加到页面中。 为span添加了样式CSS类，通过设置和改变display属性可以隐藏和显示span. 3、将输入前提示功能分配给文本框 为了解决在多个表单中使用输入前提示功能，应该开发出为不同元素分配不同属性的方法。需要定制一个对象，见 SetProperties()函数的定义。 SetProperties(xElem,xHidden,xserverCode,xignoreCase,xmatchAnywhere,xmatchTextBoxWidth,xshowNoMatchMessage,xnoMatchingDataMessage,xuseTimeout, xtheVisibleTime) xElem：要分配输入前提示功能的文本框。 xHidden：保存值的hedden元素。 xserverCode：服务器的地址。 xignoreCase：忽略大小写的布尔值。 xmatchAnywhere：在字符串中匹配任意位置的文本的布尔值。 xmatchTextBoxWidth：匹配文本框宽度的布尔值。 xshowNoMatchMessage：显示无匹配消息的布尔值。 xnoMatchingDataMessage：显示的消息。 xuseTimeout：显示一段时间是否隐藏。 xtheVisibleTime：保持打开的时间。 document.Form1.txtUserInput.obj = SetProperties(document.Form1.txtUserInput, document.Form1.txtUserValue,typeAheadXML.asp