使用不显眼的Ajax但仍然运行正在获取的页面的Javascript

Question

我想从没有Javascript工作的页面开始，然后添加Javascript fanciness，最后添加一些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

我想要的功能

使用Ajax在/products/页面上动态加载产品的某些详细信息，例如将鼠标悬停在缩略图上时。更准确地说，在/details/<id>/页面上抓取并显示/products/的简化版本。

不引人注意的实施

悬停照片时，请为相应锚点的href属性发出Ajax请求。服务器可以使用完整的/details/<id>/页面进行响应，而JQuery选择器可以只删除有趣的部分。或者，服务器可以看到请求是特殊的，只返回有趣的部分。到目前为止，这么好，容易和干净。

问题

/details/<id>/页面不仅仅是HTML。它也有自己的Javascript来使它变得有趣，因此我想在/products/页面中重用该Javascript。所以我希望/products/不仅可以从/details/<id>/获取HTML，还可以复制完全成熟的/details/<id>/页面上的Javascript行为。

我能想到的唯一（坏）解决方案

编写显式代码以复制浏览器在加载页面时所执行的操作：获取/details/<id>/，查找所有<script>标记，获取该Javascript，触发加载处理程序。这是很多样板材的东西，似乎很难做到。我显然不想写它，因为结果会很简单。

我也觉得，如果你真的坚持不引人注目的Ajax并且必须有一个更优雅的解决方案，这种问题经常出现。

Answer 1

从架构上讲，更简洁的解决方案是进行Ajax调用，只返回产品数据（可以使用XML或JSON表示），而不是获取HTML并尝试从中剔除产品数据。目标是将数据与演示文稿分开。我用于类似场景的技术（鼠标悬停时出现的细节）是一个HTML'模板'，它包含在页面中但隐藏起来。在鼠标悬停时，进行Ajax调用以检索产品数据（我通常会缓存数据，以便后续鼠标移动同一项目不必重新检索数据），填充HTML模板，定位，然后显示它。

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