Lifehacker使用Ajax实现url更改

我看到Lifehacker能够在使用AJAX更新部分页面时更改URL。 我想这可以使用HTML5或history.js插件实现，但我想lifehacker既不使用也不使用。

有没有人知道他们是怎么做到的？ 我是AJAX的新手，只是设法使用Ajax更新部分页面。

---

谢谢@Robin Anderson详细的逐步算法。 我试了一下它工作正常。 但是，在我可以在生产中测试它之前，我想用你运行我的代码。 我做对了吗？

 var httpRequest; var globalurl; function makeRequest(url) { globalurl = url; /* my custom script that retrieves original page without formatting (just data, no templates) */ finalurl = '/content.php?fname=' + url ; if(window.XMLHttpRequest){httpRequest=new XMLHttpRequest}else if(window.ActiveXObject){try{httpRequest=new ActiveXObject("Msxml2.XMLHTTP")}catch(e){try{httpRequest=new ActiveXObject("Microsoft.XMLHTTP")}catch(e){}}} /* if no html5 support, just load the page without ajax*/ if (!(httpRequest && window.history && window.history.pushState)) { document.href = url; return false; } httpRequest.onreadystatechange = alertContents; alert(finalurl); /* to make sure, content is being retrieved from ajax */ httpRequest.open('GET', finalurl); httpRequest.send(); } /* for support to back button and forward button in browser */ window.onpopstate = function(event) { if (event.state !== null) { document.getElementById("ajright").innerHTML = event.state.data; } else { document.location.href = globalurl; return false; }; }; /* display content in div */ function alertContents() { if (httpRequest.readyState === 4) { if (httpRequest.status === 200) { var stateObj = { data: httpRequest.responseText}; history.pushState(stateObj, "", globalurl); document.getElementById("ajright").innerHTML = httpRequest.responseText; } else { alert('There was a problem with the request.'); } } }  

PS：我不知道如何在评论中粘贴代码，所以我在这里添加了它。

Answer 1

为了在浏览器中使用历史API，即使它是HTML5function，也不要求将标记设置为HTML5。

使用AJAX加载所有页面转换的一个非常快速和简单的实现是：

1. 连接所有链接，除了rel =“external”存在于函数“ChangePage”
2. 触发ChangePage时，请检查浏览器是否支持历史记录API。
3. 如果不支持历史记录API，请按下标签或将正常的整页加载作为后备。
4. 如果支持历史记录API：
   1. 防止正常的链接行为。
   2. 将新URL推送到浏览器历史记录。
   3. 向新URL发出AJAX请求并获取其内容。
   4. 在响应中查找您的内容div（或类似元素），从中获取HTML并将当前页面上相应元素的HTML替换为新元素。

这将易于实施，易于管理缓存并与Google的机器人配合使用，缺点是不是“优化”，当您更改时，它将是响应的一些开销（与更复杂的解决方案相比）页面。

也将具有向后兼容性，因此旧浏览器或“非JavaScript访问者”将获得正常的页面加载。

关于这个主题的有趣链接

• 不同浏览器中的历史API兼容性
• Mozillas History API的文档

编辑：

值得一提的另一件事是你不应该将它与ASP .Net Web Forms应用程序一起使用，可能会搞砸回发处理。

代码添加：

我已经在这里找到了这个function的小型演示 。

它只是使用HTML，Javascript（jQuery）和一小部分CSS，我建议你在使用之前测试它。 但是我已经在Chrome中检查了一些它似乎工作正常。

我建议的一些测试是：

• 在优秀的浏览器，Chrome和Firefox中进行测试。
• 在IE7等传统浏览器中进行测试
• 在没有启用Javascript的情况下测试它（只需安装Noscript或类似于Chrome / Firefox）

这是我用来实现这个的javascript，您可以在上面的演示中找到完整的源代码。

 /* The arguments are: url: The url to pull new content from doPushState: If a new state should be pushed to the browser, true on links and false on normal state changes such as forward and back. */ function changePage(url, doPushState, defaultEvent) { if (!history.pushState) { //Compatability check return true; //pushState isn't supported, fallback to normal page load } if (defaultEvent != null) { defaultEvent.preventDefault(); //Someone passed in a default event, stop it from executing } if (doPushState) { //If we are supposed to push the state or not var stateObj = { type: "custom" }; history.pushState(stateObj, "Title", url); //Push the new state to the browser } //Make a GET request to the url which was passed in $.get(url, function(response) { var newContent = $(response).find(".content"); //Find the content section of the response var contentWrapper = $("#content-wrapper"); //Find the content-wrapper where we are supposed to change the content. var oldContent = contentWrapper.find(".content"); //Find the old content which we should replace. oldContent.fadeOut(300, function() { //Make a pretty fade out of the old content oldContent.remove(); //Remove it once it is done contentWrapper.append(newContent.hide()); //Add our new content, hidden newContent.fadeIn(300); //Fade it in! }); }); } //We hook up our events in here $(function() { $(".generated").html(new Date().getTime()); //This is just to present that it's actually working. //Bind all links to use our changePage function except rel="external" $("a[rel!='external']").live("click", function (e) { changePage($(this).attr("href"), true, e); }); //Bind "popstate", it is the browsers back and forward window.onpopstate = function (e) { if (e.state != null) { changePage(document.location, false, null); } } }); 

Answer 2

DOCTYPE对页面可以使用的function没有影响。

他们可能直接使用HTML5 History API。