Ajax动态数据加载
Ajax 的动态加载，属于前端里挺常用也挺实用的一招。像 FAQ 页面啊、评论加载啊，用它就再合适不过了。你点个问题，它就后台偷偷问服务器要答案，直接显示出来，页面都不用重新加载。体验流畅，响应也快。
Ajax 的异步求，核心就是那个XMLHttpRequest对象。现代浏览器支持得都好，直接new XMLHttpRequest()就行，老版本 IE 还得走ActiveXObject那一套。兼容写法记得留着，虽然现在用得少，但万一哪天遇上老系统就派上用场了。
动态加载的重点是每条数据有唯一标识，像这份代码里用数字 ID 搞定，每个问题做成超链接，点一下就触发loadFAQ()函数去拉数据。而且还设计了避免重复求的小技巧——先看看div[removed]是不是空的，不空就直接显示，省资源省流量，蛮贴心的。
数据库结构也比较清爽，一个faq表，三个字段：id、faq、detail。足够应付一般的 FAQ 需求。如果你想扩展，比如加个category字段分类啥的，也挺方便。
界面这块用的是index.jsp，其实用其他模板引擎也都一样。重点是每个问题下面预留了一个div用来放答案，初始是display: none，加载完再block显示，整个过程不闪不跳，看着就舒服。
服务端的read_faq.jsp，负责接求查数据库返回结果。你要返回 JSON 格式也完全 OK，前端起来更方便。不熟的可以看看这篇：利用 Ajax 异步验证用户名唯一性，讲得挺清楚。
哦对了，Ajax 返回的数据格式其实挺灵活的，JSON用得最多，简洁好解析，你要玩 XML 或者纯文本也没问题，自己选顺手的就行。
如果你最近在做 FAQ、评论加载、甚至是商品详情的模块，这种 Ajax 动态加载的套路可以直接拿来用。结构清晰、逻辑简单，改造起来也方便，值得收藏。
文件大小：530.05KB
评论区