- 3
- 0
- 约4.71万字
- 约 41页
- 2018-06-01 发布于江苏
- 举报
1.1 动态加载的FAQ
1.1 动态加载的FAQ
FAQ的英文全称是Frequently Asked Questions,即常见问题。在很多网站中都包含该功能。当页面上列出的问题很多时,加载过程往往比较慢。而浏览者也许只想查看其中的几个问题。利用Ajax技术可以动态加载用户感兴趣的问题,很好地解决这个矛盾。实例运行效果如图1.1所示。
1.1.1 技术要点
动态加载FAQ的过程主要是利用XMLHttpRequest(以下简称XHR)对象与服务端通信,根据用户单击的感兴趣问题动态将内容加载到页面中。在具体实现时,有两点要注意的内容。
1.对每个问题进行唯一标识
FAQ主要包含问题与解答两个部分,用户单击一个问题时,服务器必须知道请求的是哪个问题的解答,所以必须对每个问题进行唯一标识。标识的方法很多,在本例中简单使用数字进行标识。每个问题在页面上表现为超链接,单击链接将触发onclick事件,调用loadFAQ函数,传入问题标识,获取对应的解答。
单击后并不是要真正链接到一个新的页面,所以在a标签的onclick事件中return false取消原有链接的功能。每个答案分配一个div用于显示,每个div的id属性命名规则为,在对应的问题数字标识前统一增加“faqDetail”。
2.对已加载的解答不重复向服务器发出请求
问题的解答加载后,将显示在对应问题下方的div中。当用户再次单击问题时该div将隐藏
原创力文档

文档评论(0)