AJAX Uygulamasında Adres Çubuğu URL'sini Mevcut Durumla Eşleşecek Şekilde Değiştirin

Bir AJAX uygulaması yazıyorum, ancak kullanıcı uygulama içinde hareket ettikçe, sayfa çubuğunun yeniden yüklenmemesine rağmen adres çubuğundaki URL'nin güncellenmesini istiyorum. Temel olarak, herhangi bir noktada yer imi ekleyebilmelerini ve böylece mevcut duruma dönmelerini istiyorum.

AJAX uygulamalarında insanlar RESTfulness'i nasıl idare ediyor?

Bunu yapmanın yolu location.hash, AJAX güncellemeleri, ayrı bir URL'ye sahip olmak istediğiniz bir durum değişikliğiyle sonuçlandığında değişiklik yapmaktır . Örneğin, sayfanızın URL'si:

http://example.com/

Bir istemci tarafı işlevi bu kodu çalıştırdıysa:

// AJAX code to display the "foo" state goes here.

location.hash = 'foo';

Ardından, tarayıcıda görüntülenen URL şu şekilde güncellenir:

http://example.com/#foo

Bu, kullanıcıların sayfanın "foo" durumuna yer işareti koymasına ve durumlar arasında gezinmek için tarayıcı geçmişini kullanmasına olanak tanır.

Bu mekanizma yürürlükte olduğunda, fragman tanımlayıcıları (# 'dan sonraki kısım) sunucusu.

Ben Alman'ın hashchange eklentisi jQuery kullanıyorsanız bunu bir esinti yapar.

Book.cakephp.org gibi sitelere bakın. Bu site URL'yi karma ve AJAX kullanmadan değiştirir. Tam olarak nasıl yaptığından emin değilim ama anlamaya çalışıyorum. Biri bilirse, bana bildirin.

Ayrıca github.com belirli bir proje içinde bir navigasyona bakarken.

Yazarın Ajax'ı kullanırken ziyaretçisini yeniden yüklemek veya yönlendirmek istemesi pek olası değildir. Ama neden HTML5'leri pushState/ kullanmıyorsunuz replaceState?

Adres çubuğunu istediğiniz kadar değiştirebilirsiniz. AJAX ile doğal görünümlü URL'ler edinin.

En son projemdeki kodu inceleyin: http://iesus.se/

Bu Kevin'in söylediklerine benzer. İstemci durumunuzu bazı javascript nesnesi olarak alabilir ve durumu kaydetmek istediğinizde, nesneyi serileştirebilirsiniz (JSON ve base64 kodlamasını kullanarak). Daha sonra href parçasını bu dizeye ayarlayabilirsiniz.

var encodedState = base64(json(state));
var newLocation = oldLocationWithoutFragment + "#" + encodedState;

document.location = newLocation; // adds new entry in browser history
document.location.replace(newLocation); // replaces current entry in browser history

İlk yol yeni durumu yeni bir konum olarak ele alacaktır (böylece geri düğmesi onları önceki konuma götürecektir). İkincisi değil.

SWFAddress, Flash ve Javascript projelerinde çalışır ve yer imi URL'leri oluşturmanıza (yukarıda belirtilen karma yöntemini kullanarak) ve size geri düğmesi desteği vermenize olanak tanır.

http://www.asual.com/swfaddress/

Window.location.hash yöntemi bir şey yapmanın tercih edilen yoludur. Bunun nasıl yapılacağıyla ilgili bir açıklama için Ajax Patterns - Benzersiz URL'ler .

YUI, bu kalıbı bir modül olarak uygular ve geri düğmesinin karma'yı kullanarak adresi yeniden yazmakla birlikte çalışmasını sağlamak için IE'ye özgü çalışmaları içerir. YUI Tarayıcı Geçmişi Yöneticisi .

Diğer çerçeveler de benzer uygulamalara sahiptir. Önemli olan, geçmişin adresin yeniden yazılmasıyla birlikte çalışmasını istiyorsanız, farklı tarayıcıların bu adresleri işlemek için farklı yollara ihtiyacı vardır. (Bu ilk bağlantı makalesinde detaylandırılmıştır.)

IE'nin iframe tabanlı bir saldırıya ihtiyacı var, burada Firefox aynı yöntemi kullanarak çift geçmiş üretecek.

OP veya diğerleri hala durumu etkinleştirmek için tarayıcı geçmişini değiştirmenin bir yolunu arıyorsa, IESUS tarafından önerildiği gibi pushState ve replaceState'i kullanmak, bunu yapmanın 'doğru' yoludur. Bu konuma göre ana avantaj. Sadece karma değil, gerçek url'ler oluşturuyor gibi görünüyor. Karma kullanan tarayıcı geçmişi kaydedilip javascript devre dışı bırakıldığında yeniden ziyaret edilirse, karma sunucuya gönderilmediğinden uygulama çalışmaz. Ancak, pushState kullanıldıysa, tüm rota sunucuya gönderilir ve daha sonra rotalara uygun şekilde yanıt vermek için oluşturabilirsiniz. Hem sunucu hem de istemci tarafında aynı bıyık şablonlarının kullanıldığı bir örnek gördüm. İstemcide javascript etkinleştirilmişse, sunucuya gidiş dönüşten kaçınarak hızlı yanıtlar alır, ancak uygulama javascript olmadan mükemmel bir şekilde çalışır. Böylece, uygulama javascript yokluğunda incelikle degrade olabilir.

Ayrıca, history.js gibi bir isimle orada bazı çerçeve olduğuna inanıyorum. HTML5'i destekleyen tarayıcılar için pushState kullanır, ancak tarayıcı bunu desteklemiyorsa otomatik olarak karma kullanmaya geri döner.

Kullanıcının sayfada 'içinde' olup olmadığını kontrol edin, url çubuğunu tıkladığınızda javascript sayfanın dışında olduğunuzu söylüyor. URL çubuğunu değiştirir ve içindeki '#' simgesiyle 'ENTER' tuşuna basarsanız, sayfaya fare imleci ile manuel olarak tıklamadan tekrar sayfaya girersiniz, ardından javascript'ten bir keyboad olay komutu (document.onkeypress) yeniden yönlendirme için javascript'in girip girmediğini kontrol edebilir. Kullanıcının window.onfocus ile sayfada olup olmadığını ve window.onblur ile dışarıda olup olmadığını kontrol edebilirsiniz.

Evet, mümkün.

;)