html - Lifehacker 使用 Ajax 实现 url 更改

Question

我看到 Lifehacker 能够在使用 AJAX 更新部分页面时更改 url。我想这可以使用 HTML5 或 history.js 插件来实现，但我想 lifehacker 两者都没有使用。

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

---

感谢@Robin Anderson 详细的分步算法。我试过了，它工作正常。但是，在我可以在生产中对其进行测试之前，我想由您运行我拥有的代码。我做对了吗？

<script type="text/javascript">  
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.');  
            }  
            }  
    }  
    </script> 

PS:我不会在评论里贴代码，所以就贴在这里

Answer 1

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

使用 AJAX 加载所有页面转换的一个真正快速和简单的实现是:

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

这将很容易实现，易于管理缓存并与谷歌的机器人一起工作，缺点是它不是那么“优化”并且会在响应上产生一些开销(与更复杂的解决方案相比)当您更改页面时。

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

关于该主题的有趣链接

• History API Compatibility in different browsers
• Mozillas documentation of the History API

编辑:

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

代码补充:

我整理了一个 small demo of this functionality which you can find here .

它仅使用 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); 
        }
    }
});