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时,请检查浏览器是否支持历史记录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应用程序一起使用,可能会搞砸回发处理.

代码添加:

我已经整理了一个这个功能的小演示,你可以在这里找到.

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