2010-04-06 22 views
8

Tamamen ajax gezinme özelliğine sahip bir web sitesi geliştirmek istiyorum, ancak bu, kullanıcıların belirli içeriği paylaşamayacağını, yer işareti ekleyemeyeceğini veya doğrudan doğruya katılamayacağını gösterir.Bir AJAX Tabanlı Web Sitesi'nde URL Navigasyon?

Bazı sayfalarda (Gmail, Thesixtyone, Youtube) farklı sayfa yapılandırmaları için özel URL'ler oluşturmak üzere hash etiketleri kullandım. Bu teknik ne denir ve bunu nasıl uygulayabilirim?

+2

geçmişi navigasyon bazı href dışlamak istiyorsanız jQuery adresi kütüphane ve ardından

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

Dahil – Atomix

+0

Teşekkür merak ediyor @Atomix, Ben – Jacques

cevap

5

JQuery adresi içine loon. http://www.asual.com/jquery/address/

Tam olarak ne hakkında konuşuyorsunuz. Bununla birlikte, özel URL'lerde #'nin ne anlama geldiğini sorduğunuzda, bu konuda oldukça yeni olduğunuzu kabul ediyorum. JQuery adresi ilk başta korkutucu görünecek, ama gerçekten çok kolay. Tüm ajax işlemleriniz için JQuery'yi kullanmalısınız.

# bir bağlantı etiketidir. Bunu <a name="list">This is an anchor tag</a> yaparsanız ve url'ye #list ekleyin, sayfa ad = list olan bir etikete atlayacaktır.

+0

adını arıyordum Çok kullanışlı belirtilen eklenti bulundu. – diggersworld

6

SEO ile tamamen ajax ile çalıştırılan bir uygulama için hash bang yaklaşımını kullandım. Deneyimlerime göre hem web tarayıcısı hem de akıllı telefon tarayıcıları için çok güvenilir bir yaklaşım olduğunu söyleyebilirim.

İşte benim yaklaşımım. Kod sadeliği için Jquery/Zepto kodunu kullanacağım

Farklı bir ajax sayfası yüklemeniz gerektiğinde, javascript kullanarak URL karma değerini değiştirin.

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

Sonra karma değişiklik olayı URL'yi yazarak ve bir sayfayı yüklemeden bu arada loadPage fonksiyonu

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); 
     }); 
    } 
} 

ile olayı Kulp javascript

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

gelen ateş edecek bağlantıyı kullanarak da.

Şimdi SEO Bölümü. Google ve diğer büyük arama motoru, ajax tabanlı bir web sitesini taramanın bir yolunu geliştirdi. Eğer kullanırsan #! URL'nizde google # yerini alacak! '? _escaped_fragment_' ile bölüm ve size içerik isteyecektir. örneğin

www.yoursite.com/#!page1

yapmanız gereken tek şey bir GET parametresi olarak _escaped_fragment_ yakalamak olduğunu www.yoursite.com/?_escaped_fragment_=page1 dönüştürülecektir. Eğer php kullanırsanız kod Ayrıca, farklı bir kayda göre _escaped_fragment_

alıcı tarafından tek tek her sayfa için html sayfası başlık ve açıklama ayarlayabilirsiniz

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 
} 

gibi olacak, kullandığınız sosyal medyada url paylaşabilirsiniz #! de. Normal bir bağlantı olarak _escaped_fragment_

'un yardımı ile ayrıştırılacaktır. Bu yaklaşımın tüm sorunları karşılamanıza yardımcı olacağını umuyorum.

1

Eğer ajax güncellemenizin olduğu bir div içeriğiniz varsa, burada jquery adres kitaplığı http://www.asual.com/jquery/address/'u kullanarak bir örnektir.

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

Eğer O başka durumda herkes Ajax Derin bağlantı denir

$('a[href!="#"]').address(); 
İlgili konular