URL Navigation in an AJAX Based Website?

2020-05-19 03:08发布

站内问答 / 移动开发
1365 3 6

I would like to develop a website with fully ajax navigation, but this means that users cannot share, bookmark, or go straight to certain content.

I noticed a few websites (Gmail, Thesixtyone, Youtube) are using hash tags to create custom urls for different page configurations. What is this technique called, and how can I implement this?

3条回答
不美不萌又怎样
2楼-- · 2020-05-19 03:32

Loon into JQuery address. http://www.asual.com/jquery/address/

This does exactly what you're talking about. However, since you asked what the # means in custom URLs, I assume you're fairly new at this. JQuery address will look intimidating at first, but it's really quite easy. You should use JQuery for all your ajax handling too.

# is an anchor tag. if you do this <a name="list">This is an anchor tag</a> then add #list to the url, the page will jump to the a tag where name = list.

查看更多
0人赞 添加讨论(0) 举报
再贱就再见
3楼-- · 2020-05-19 03:33

I've used hash bang approach for a fully ajax driven application with SEO. From my experience I would say it's very reliable approach for both web browser and smart phone browsers.

Here are my approach. For code simplicity I will use Jquery / Zepto code

When you need to load a different ajax page just change the URL hash using javascript.

window.location.hash = '#!page1';

Then a hash change event will fire from the javascript

$(window).on('hashchange',loadPage);

Handle that event with loadPage function

var loadPage = function(e){
    pageId = window.location.hash;

    _gaq.push(['_trackPageview', '/'+pageId]); //For google analytics virtual page push

    if(pageId == '#!page1'){
        $.get('ajax/page1.php', function(response) {
           $('#main').html(response);
        });
    }else if(pageId == '#!page2'){
        $.get('ajax/page2.php', function(response) {
           $('#main').html(response);
        });
    }
}

By this way you can load a page by typing URL and by using link as well.

Now the SEO Part. Google and other major search engine has developed an way to crawl an ajax based website. If you use #! in your url google will replace the #! portion with '?_escaped_fragment_' and will ask you for content. for example

www.yoursite.com/#!page1 will be converted to www.yoursite.com/?_escaped_fragment_=page1

All you need to do is catch that _escaped_fragment_ as a GET parameter. If you use php the code will be like

if (isset($_GET['_escaped_fragment_'])) {           
    $fragment = $_GET['_escaped_fragment_'];

    if($fragment == 'page1')
        echo include 'ajax/page1.php'; // or use readfile method
    else if($fragment == 'page2')
        echo include 'ajax/page2.php'; // or use readfile method
}

You can also set html page title and description for each page individually by catching the _escaped_fragment_

On a separate note, you can share url in social media using #! as well. It will be parsed as a regular link with the help of _escaped_fragment_

I hope that approach will help you to cover all issues.

查看更多
0人赞 添加讨论(0) 举报
贪生不怕死
4楼-- · 2020-05-19 03:48

If you have a div content where you ajax update, here is an example using jquery address library http://www.asual.com/jquery/address/.

<body>               
    <div id="content">
        Your ajax content...
    </div>
</body>

Include the jquery address library and then 

$(document).ready(function () {   

        $('a').address();

        $.address.externalChange(function (e) {
            if (e.value != '/') {
                $('#content').load(e.value);
            }
        });
 });

If you want to exclude some href of history navigation

$('a[href!="#"]').address();
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)