Jquery 使用不引人注目的Ajax，但仍在运行获取页面的Javascript

我想从不使用Javascript的页面开始，然后添加Javascript，最后添加一些Ajax

这一切似乎保持了东西的清洁，我对我的第一次实验感到非常高兴。然后我遇到了下面的问题，我没有看到一个好的解决方案。对于这两个示例页面：

<!-- /products/ -->
<ul>
    <li>
        Product A thumbnail
        <a href="/details/1/">Details for A</a>
    </li>
    <li>
        Product B thumnail
        <a href="/details/2/">Details for B</a>
    </li>
</ul>

<!-- /details/<id>/ -->
<script type="text/javascript" src="/details.js/"></script>
show details about the product with the given id
details.js will unobtrusively enhance it

制作缩略图


产品B图姆奈尔


显示具有给定id的产品的详细信息
details.js将悄悄地增强它

我想要的功能 使用Ajax在

/products/

页面上动态加载产品的一些详细信息，例如当鼠标悬停在缩略图上时。更准确地说，在

/products/

页面上获取并显示简化版的

/details/

不引人注目的实施 悬停照片时，对相应锚点的

href

属性发出Ajax请求。服务器可以响应完整的

/details/

页面，JQuery选择器可以只剪切感兴趣的部分。或者，服务器可以看到请求是特殊的，只返回感兴趣的部分。到目前为止还不错，简单干净

问题

/details/

页面不仅仅是HTML。它也有自己的Javascript，因此我想在

/products/

页面中重用该Javascript。因此，我希望

/products/

不仅从

/details//

获取HTML，而且还复制成熟的

/details/

页面上的Javascript行为

我能想到的唯一（糟糕的）解决办法 编写显式代码以复制浏览器在加载页面时所做的操作：获取

/details/

，查找所有

标记，获取该Javascript，触发加载处理程序。这是很多陈词滥调的东西，似乎很难做到正确。很明显，我不想写它，因为它的结果绝不简单

---

我还觉得，如果你真的坚持使用不引人注目的Ajax，那么这类问题就会经常出现，而且必须有一个更优雅的解决方案。

从架构上讲，一个更干净的解决方案是使用Ajax调用，只返回产品数据（可以使用XML或JSON表示）而不是获取HTML并尝试从中挑选产品数据。目标是将数据与演示分离。我在类似场景中使用过的一种技术（细节出现在鼠标上方）是将HTML“模板”包含在页面中，但隐藏起来。在mouseover上，进行Ajax调用以检索产品数据（我通常缓存数据，以便相同项目的后续mouseover不必重新检索数据），填充HTML模板，定位它，然后显示它

如果您担心复制JavaScript，可能应该将JavaScript移动到可以包含的单独文件中。如果JavaScript非常特定于页面，那么可能需要使其更通用/可重用。或者，也许你应该使用CSS和/或服务器端技术，而不是JavaScript来“让它变得有趣”