ajax实用案例大全1动态加载数据.pdfVIP

第 章 动态加载数据 动态加载的 FAQ 根据邮政编码获取地区信息 动态树形列表 多级联动菜单 条件设置向导 页面关键词提示 在使用 Ajax 技术编写的网页应用程序中，动态加载数据，无刷新更新客户端页面 是最为常见的一种形式。这种方式给用户带来了良好的使用体验，大多数情况下能够加 快页面下载速度，减轻服务器压力。本章挑选了 6 个实例讲解如何利用 Ajax 技术动态 加载数据。 在本章中可以了解到 XMLHttpRequest 对象的基本使用方法，服务器返回信息的一 些常见格式，包括文本、XML、JSON 等。还可以学习到不同浏览器的事件对象获取方 法，以及使用 JavaScript 将信息在客户端进行缓存的方法。 ·2 · Ajax 经典案例开发大全 1.1 动态加载的FAQ FAQ 的英文全称是Frequently Asked Questions ，即常见问题。在 很多网站中都包含该功能。当页面上列出的问题很多时，加载过程往 往比较慢。而浏览者也许只想查看其中的几个问题。利用 Ajax 技术 可以动态加载用户感兴趣的问题，很好地解决这个矛盾。实例运行效 果如图 1.1 所示。 图 1.1 实例运行效果 1.1.1 技术要点 动态加载 FAQ 的过程主要是利用XMLHttpRequest （以下简称XHR ）对象与服务端通信，根据用 户单击的感兴趣问题动态将内容加载到页面中。在具体实现时，有两点要注意的内容。 1．对每个问题进行唯一标识 FAQ 主要包含问题与解答两个部分，用户单击一个问题时，服务器必须知道请求的是哪个问题的 解答，所以必须对每个问题进行唯一标识。标识的方法很多，在本例中简单使用数字进行标识。每个 问题在页面上表现为超链接，单击链接将触发onclick 事件，调用 loadFAQ 函数，传入问题标识，获取 对应的解答。 单击后并不是要真正链接到一个新的页面，所以在a标签的 onclick 事件中 return false 取消原有 链接的功能。每个答案分配一个 div 用于显示，每个 div 的 id 属性命名规则为，在对应的问题数字标 识前统一增加“faqDetail ”。 2 ．对已加载的解答不重复向服务器发出请求 问题的解答加载后，将显示在对应问题下方的div 中。当用户再次单击问题时该div 将隐藏起来。 如果用户第三次单击相同的问题，由于解答已加载到页面，所以不需要再次向服务器发送请求，只需 将隐藏的 div 显示出来即可。 隐藏和显示主要通过设置 div 样式中的 display 属性来完成，当 display 属性设置为“none ”时隐藏， 设置为“block ”时显示。判断是否需要发出请求，可以检查div 的innerHTML 是否包含内容。 1.1.2 数据库设计 本实例使用名为 faq 的数据库表，包含的数据如图 1.2 所示。具体的创建数据表语句如下： CREATE TABLE faq ( id int(11) NOT NULL auto_increment, faq varchar(255) NOT NULL, detail varchar(255) NOT NULL, PRIMARY KEY (id) ) 第