使用新 URL 发送 AJAX 请求和响应答案

【问题标题】：Send AJAX Request and response with new URL使用新 URL 发送 AJAX 请求和响应
【发布时间】：2015-11-25 04:47:39
【问题描述】：

首先我想说，我是网络开发的新手，缺少一些特定的科学术语。

我在后端使用 Pyramids，在前端使用 Chameleon。现在我有一个主页，在那里我发送了一些 ajax 请求。收到响应后，我收到了 DOM 操作的回调。浏览器不保存 AFAIK dom 操作，因此用户无法点击后退按钮。但是这个机制是如何被调用的——或者我怎样才能得到 ajax 响应和一个唯一的 url？ url 可以是当前一个 + 参数或参数的 sha1 之外的东西。

我需要在服务器端实现特定的处理程序还是可以由客户端完成？

在谷歌的帮助下，我发现我无法在浏览器中保留 dom 操作的状态。所以每个请求都需要一个唯一的 url -> 因此我认为这必须在服务器端完成，但如上所述，我是新手。

谢谢:)

编辑：这个网站——我正在编程——可以想象成“谁想成为百万富翁”。我们有几轮，在每一轮中，用户可以在几个答案之间进行选择，每一轮都取决于最后一轮。很难为此添加代码，因为它是我博士学位的一部分并且非常庞大：\

【问题讨论】：

你能添加一些 plunker 一些例子吗？
我进行了编辑，但没有示例。希望我们能谈谈这些机制背后的理论，注意一个实现的例子；-)

标签： html ajax pyramid chameleon

【解决方案1】：

（首先，Chameleon 不会在“前端”运行——它是一个 Python 模板库，它接受一个字符串（您的模板）和一个 Python 字典（模板参数）作为输入，并返回另一个字符串作为其输出。发送时对于客户端，该输出被浏览器解释为 HTML 页面，可能带有嵌入的 <script> 标记。这些标记中的 JavaScript 然后由浏览器执行 - 这就是在客户端上运行的内容。）

现在，关于您的问题 :) 您可以从 JavaScript 更改浏览器地址字符串中显示的 URL，这将在浏览器的历史记录中插入一个新条目。您还需要以某种方式确保您的应用程序可以根据该新 URL 中的信息恢复其状态，否则如果有人为该 URL 添加书签、在新选项卡中打开它或只是重新加载应用程序，事情就会中断。

一种历史上较老的方式来操纵浏览器的历史记录是通过window.location.hash 修改 URL 的哈希部分。这是一个最小的例子：

<html>

<body>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

    <input id="name-input" type="text" />

    <script>
        // restore the "application state" on page load -
        // if there's a hash in the url we set the text in the input
        if (window.location.hash) {
            $('#name-input').val(window.location.hash.substring(1));
        }

        // whenever the hash changes (user clicked the Back button)
        // we also need to modify the application state
        $(window).on('hashchange', function () {
            $('#name-input').val(window.location.hash.substring(1));
        });             

        // type some text in the input and press Enter. 
        // Observe the URL changing. Try using the Back button.
        $('#name-input').on('change', function () {
            window.location.hash = $(this).val();
        });
    </script>
</body>

</html>

另一种更现代的修改历史记录的方法是通过history.pushState()，它更强大但可能需要一些服务器端支持（您的服务器需要能够从您的应用程序的新 URL 提供正确的页面转换到 - 如果您的 URL 看起来像 mysite.com/page1、mysite.com/page2，并且您使用 pushState 从 /page1 转换到 /page2 - 服务器需要能够处理这两个 URL。

您还需要注意，有大量的客户端框架专门用于处理这种情况（检索 JSON 数据、呈现页面、修改 URL），所以也许您会发现使用客户端框架，而不是手动做事情简化了事情。我会先查看Backbone.js，因为它非常小，并且不需要像其他一些框架那样以“唯一真实的方式”做事。

【讨论】：

感谢您的充分回答。目前我正在修改我的项目，以便我可以使用 url 调度。之后我会看看backbone.js。