使用新的 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/page1
、mysite.com/page2
,并且您使用 pushState
从 /page1
转换到/page2
- 服务器需要能够处理两个 URLs).
您还需要注意,有很多专门为处理这种情况而构建的客户端框架(检索 JSON 数据、呈现页面、修改 URL ), 所以也许你会发现使用客户端框架而不是手动做事可以简化事情。我将从 Backbone.js 开始,因为它非常小,不需要像其他框架那样在 "one and only true way" 中做事。
起初我想说,我是网络开发的新手,缺少一些特定的科学术语。
我在后端使用 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/page1
、mysite.com/page2
,并且您使用 pushState
从 /page1
转换到/page2
- 服务器需要能够处理两个 URLs).
您还需要注意,有很多专门为处理这种情况而构建的客户端框架(检索 JSON 数据、呈现页面、修改 URL ), 所以也许你会发现使用客户端框架而不是手动做事可以简化事情。我将从 Backbone.js 开始,因为它非常小,不需要像其他框架那样在 "one and only true way" 中做事。