特定的crawlable-cleanURL AJAX请求

时间:2016-02-18 10:23:23

标签: javascript jquery ajax

我在这个链接中看到了一个教程:
https://moz.com/blog/create-crawlable-link-friendly-ajax-websites-using-pushstate

但是我要失去理智。作者做了一件不可能的事。他使用了这段代码,查看了他的示例(http://html5.gingerhost.com)源代码:

<script>
// THIS IS WHERE THE MAGIC HAPPENS
    $(function() {
        $('nav a').click(function(e) {
            $("#loading").show();
            href = $(this).attr("href");

            loadContent(href);

            // HISTORY.PUSHSTATE
            history.pushState('', 'New URL: '+href, href);
            e.preventDefault();


        });

        // THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
        window.onpopstate = function(event) {
            $("#loading").show();
            console.log("pathname: "+location.pathname);
            loadContent(location.pathname);
        };

    });

    function loadContent(url){
        // USES JQUERY TO LOAD THE CONTENT
        $.getJSON("content.php", {cid: url, format: 'json'}, function(json) {
                // THIS LOOP PUTS ALL THE CONTENT INTO THE RIGHT PLACES
                $.each(json, function(key, value){
                    $(key).html(value);
                });
                $("#loading").hide();
            });

        // THESE TWO LINES JUST MAKE SURE THAT THE NAV BAR REFLECTS THE CURRENT URL
        $('li').removeClass('current');
        $('a[href="'+url+'"]').parent().addClass('current');

    }

</script>

但我不知道他在content.php文件上写了什么。这是一个完美的AJAX网站:

  • 它适用于后退按钮(并继续使用AJAX!);
  • 它可以访问网站上每个页面的直接链接;
  • 而且,它适用于禁用javascript ...

如何......我......那样做; - ;

我还在学习AJAX ......

0 个答案:

没有答案