我已经用 CodeIginer 建立了一个网站,我想在我的一个页面中实现 AJAX 和 JQuery。问题是当我加载内容时,URL 没有改变。
假设我有这些 URI:
http://www.example.com/controller/function/paramhttp://www.example.com/controller/function/param2
单击按钮时如何从第一个更改为第二个?
我已经用 CodeIginer 建立了一个网站,我想在我的一个页面中实现 AJAX 和 JQuery。问题是当我加载内容时,URL 没有改变。
假设我有这些 URI:
http://www.example.com/controller/function/paramhttp://www.example.com/controller/function/param2单击按钮时如何从第一个更改为第二个?
在 HTML5 中,您可以更改 URL:
window.history.pushState("object or string", "Title", "/new-url");
检查http://spoiledmilk.com/blog/html5-changed-the-browser-url-without-refreshing-page/
文档:https : //developer.mozilla.org/en/DOM/Manipulating_the_browser_history#The_pushState().c2.a0method
更新
哪个浏览器支持新的 HTML5 历史 API 的概述:
http://caniuse.com/#search=pushState(caniuse.com值得收藏!)
已经有一些框架可以为您完成繁重的工作,甚至可以优雅地回退到常见的哈希标签解决方案:
History.js 优雅地支持所有浏览器中的 HTML5 历史/状态 API(pushState、replaceState、onPopState)。包括对数据、标题、replaceState 的持续支持。支持 jQuery、MooTools 和 Prototype。对于 HTML5 浏览器,这意味着您可以直接修改 URL,而不再需要使用哈希。对于 HTML4 浏览器,它将恢复使用旧的 onhashchange 功能。
Backbone 通过提供具有键值绑定和自定义事件的模型、具有可枚举函数的丰富 API 的集合、具有声明性事件处理的视图,并通过 RESTful JSON 接口将所有这些连接到您现有的应用程序,从而为 JavaScript 密集型应用程序提供结构。... pushState 支持在 Backbone 中完全基于选择加入。不支持 pushState 的旧浏览器将继续使用基于哈希的 URL 片段,如果一个具有 pushState 功能的浏览器访问了一个哈希 URL,它将透明地升级为真实的 URL。
MooTools 是一个紧凑、module化、面向对象的 JavaScript 框架,专为中高级 JavaScript 开发人员设计。[...] 通过 popstate 或 hashchange 进行历史管理。在不重新加载的情况下替换页面的 URL,并在旧浏览器上回退到 Hashchange。
Dojo 使用 Web 标准作为其平台,可以节省您的时间并随着您的开发过程进行扩展。它是经验丰富的开发人员用来构建高质量桌面和移动 Web 应用程序的工具包。[...] dojox.app 通过 HTML5 pushState 标准管理导航历史并将其委托给浏览器启用的历史管理。
... 仅举几个。
(!!) 意识到
一个重要的副作用使用时pushState(从引文骨干文档):
请注意,使用真实 URL 要求您的 Web 服务器能够正确呈现这些页面,因此还需要进行后端更改。例如,如果您的路由为 /documents/100,那么您的 Web 服务器必须能够为该页面提供服务,前提是浏览器直接访问该 URL。对于完整的搜索引擎可抓取性,最好让服务器为页面生成完整的 HTML ......但如果它是一个 Web 应用程序,只需呈现与根 URL 相同的内容,并用 Backbone 填充其余部分视图和 JavaScript 工作正常。
可以使用散列(#)并在之后放置您喜欢的任何内容。
这是我使用它构建的一个站点 - 然后我让 JavaScript 读取哈希并调用适当的函数:
http://bannerhouse.com.au/#/popup=media&id=don
边注:
这对于 Flash 网站或 Flash 内容也很有用;您可以使用 FlashVars 将哈希值解析为 SWF,并基于此加载适当的部分/屏幕。
通过 Javascript 使用哈希标签,因此在按钮的单击事件处理程序中:
location.hash = "param2"
这会将http://example.com/mypage/#whatever更改
为
http://example.com/mypage/#param2
当然,您也可以将“文件夹”放在哈希之后,因此,使用http://example.com/的基本网址,然后添加:将
location.hash = "/MyPage/MySubPage/MyInfo";
其更改为http://example.com/#/MyPage/我的子页面/我的信息
一个类似的线程推断不,除非使用哈希标签。
提出但强烈反对的一个想法是使用 204 HTTP 响应。
来自 W3:
无响应 204
服务器收到请求但没有信息发回,客户端应该保持在同一个文档视图中。这主要是为了允许在不更改文档的同时输入脚本。
以下是 WHATWG 的 HTML Living Standard(以前称为 HTML5)第 7.10.2 节浏览上下文的会话历史记录的相关摘录:
会话历史中的几个连续条目可以共享同一个文档。当通过正常导航到达初始条目并通过添加以下条目时,可能会发生这种情况
history.pushState()。或者它可以通过导航到片段发生。