Dobre praktyki programistyczne

AJAX i normalny URL w każdym linku

06.02.2011

AJAX pozwala zamienić część strony bez potrzeby przeładowywania jej całej. Rodzi to jednak problemy z dostępnością dla wyszukiwarek i części użytkowników. Możliwe jest jednak łatwe pogodzenie obu tych metod, oferując wersję AJAX tylko tam, gdzie jest dostępna. Nie potrzeba przy tym dużych zmian w kodzie.

Zastosowanie

Proste strony mają wydzielony jeden obszar na właściwą zawartość i tylko ona w zasadzie się zmienia, nie ma potrzeby przeładowywania całej strony. Wystarczy więc, że przy każdym kliknięciu w link zostanie wywołany AJAX, a jeśli JavaScript nie jest obsługiwany, nastąpi normalne przeładowanie strony.

Przykład

W celu zwiększenia zwięzłości kodu posłużyłem się jQuery. Załóżmy, że linki do podstron mają postać „/folder/strona.html”. Wystarczy wówczas dodać następujący kod JavaScript.

  1. $(document).ready(function(){
  2. $('a').live('click', function(){// 'live' zapewnia dodanie funkcji także do linków załadowanych przy użyciu AJAX
  3. var href = $(this).attr('href');// pobierz URL z linka
  4. href = href.substring(0, href.length-5)+'.htm';// zamienia 'html' na 'htm'
  5. $('#content').load('http://localhost'+href);// ładuje treść do wybranego elementu
  6. return false;// zapobiega przeładowaniu strony
  7. });
  8. });

Kod ten ładuje do elementu o id=”content” treść znajdującą się pod adresem typu „/folder/strona.htm”. Należy zwrócić uwagę na rozszerzenie: „html” wskazuje na całą stronę, a „htm” tylko na przeładowywany fragment.

Kod po stronie serwera jest jeszcze prostszy. W przypadku Apache i PHP wygląda on następująco:

.htaccess   
  1. RewriteRule ^(.*).html$ index.php?page=$1 [QSA]

W pliku index.php w miejscu, gdzie powinna pojawić się właściwa zawartość wstawiamy:

PHP   
  1. <div id="content">
  2. <?php
  3. @readfile($_GET['page'].'.htm');
  4. ?>
  5. </div>

Modyfikacje

Kod dodający funkcję do linków trzeba zmienić w przypadku występowania linków zewnętrznych lub takich, które wymagają załadowania całej strony. Można również dodać kod zmieniający wygląd elementów nawigacyjnych wskazujących bieżącą podstronę.

Zalety

  • Kod linków pozostaje nietknięty
  • Treść nie jest duplikowana
  • Jedna wersja strony, zamiast oddzielnych HTML i AJAX

Leave a Response