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

Send AJAX Request and response with new URL

起初我想说,我是网络开发的新手,缺少一些特定的科学术语。

我在后端使用 Pyramids,在前端使用 Chameleon。现在我有一个主页,我在其中发送了一些 ajax 请求。收到响应后,我收到了 DOM 操作的回调。 AFAIK dom 操作不会被浏览器保存,因此用户无法点击后退按钮。但是该机制是如何调用的——或者我如何获得 ajax 响应和唯一的 url? url 可以是当前一个 + 参数或参数的 sha1。

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

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

谢谢:)

编辑: 该网站 - 我正在编程 - 可以想象成 'who wants to be a millionaire'。我们有几轮,在每一轮中,用户可以在几个答案之间进行选择,每一轮都取决于最后一轮。 很难为此添加代码,因为它是我博士学位的一部分,而且相当庞大:\

(首先,Chameleon 没有 运行 "on the front end" - 它是一个 Python 模板库,它接受一个字符串(你的模板)和一个 python 字典(模板参数) 作为输入,returns 另一个字符串作为输出。当发送到客户端时,该输出被浏览器解释为 HTML 页面,可能带有嵌入的 <script> 标签。[=然后浏览器执行这些标签中的 35=] - 这就是客户端上的 运行。)

现在,回答您的问题 :) 您可以将浏览器地址字符串中显示的 URL 更改为 JavaScript,这将在浏览器的历史记录中插入一个新条目。您还需要以某种方式确保您的应用程序可以根据新 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/page1mysite.com/page2,并且您使用 pushState/page1 转换到/page2 - 服务器需要能够处理两个 URLs).

您还需要注意,有很多专门为处理这种情况而构建的客户端框架(检索 JSON 数据、呈现页面、修改 URL ), 所以也许你会发现使用客户端框架而不是手动做事可以简化事情。我将从 Backbone.js 开始,因为它非常小,不需要像其他框架那样在 "one and only true way" 中做事。