23、利用 Ajax 与服务器交互及 jQuery 插件应用

利用 Ajax 与服务器交互及 jQuery 插件应用

1. 综合示例引入

在实际开发中，我们常常需要结合多种技术来实现丰富的交互效果。这里，我们将综合运用选择器、DOM 操作、高级 JavaScript、事件、效果和 Ajax 等知识，实现一个新的 jQuery 命令。我们以 The Boot Closet 页面为例，该页面展示了靴子的详细销售信息，但其中包含一些客户可能不熟悉的术语，如 Goodyear welt 和 stitch - down construction。为了让客户更方便地了解这些术语的含义，我们决定实现一个术语定义弹出框功能。

2. 实现思路的演变

• 传统方法的不足 ：我们可以采用 1998 年的做法，提供一个术语表页面供客户参考，但这会使客户的注意力从购买页面转移。也可以使用弹出窗口显示术语表或定义，但这种方式有些过时。
• 利用 title 属性的问题 ：考虑使用 DOM 元素的 title 属性在鼠标悬停时显示包含定义的工具提示，但该方式存在一些问题。一是鼠标需要悬停几秒才会显示，我们希望点击术语后立即显示信息；二是一些浏览器会截断 title 提示框的文本，长度无法满足需求。
• 自定义解决方案 ：因此，我们决定自己构建一个解决方案。识别有定义的术语，改变其外观以便用户容易识别，点击术语时显示包含描述的弹出框，再次点击弹出框则将其移除。

3. 实现弹出框行为

我们将创建一个名为 The Termifier 的 jQuery 插