Technologia AJAX

Strony wykonane w technologii AJAX są coraz częściej wykorzystywane przez webmasterów. Dodanie technologii AJAX do już istniejącej strony nie jest większym problemem. Trzeba jedynie dodać do linków odpowiednie atrybuty i zmodyfikować skrypt PHP, by obsługiwał AJAX.

Portale internetowe oraz popularne strony niestety nie stosują tego typu rozwiązań. Powód jest bardzo prosty. Każda odsłona strony to szansa na pokazanie kolejnych reklam, kliknięcia i zarobek.

Podstawowe sprawy

Na stronach coraz częściej są wykorzystywane frameworki JavaScript. Najczęściej stosowanym frameworkiem jest jQuery i dlatego opiszę tutaj jak stworzyć stronę w technologii AJAX właśnie w tym frameworku.

Na wstępie powinniśmy opracować atrybut, po którym będziemy rozróżniać, czy do otwarcia danego linka ma zostać użyta technologia AJAX czy nie. Według mnie najlepszym sposobem jest użycie TARGET=”AJAX”.

Kolejna sprawa to opracowanie funkcji w JavaScript, która to obsłuży. Do wymiany danych użyjemy formatu JSON. Uważam, że jest to najlepszy format do wymiany danych pomiędzy PHP a JavaScript. Po stronie PHP mamy systemowo zdefiniowane funkcje do obsługi tego formatu. Po stronie JavaScript przychodzi Nam z pomocą jQuery.

Trzeba pamiętać, by tak napisać skrypt PHP, by wiedział, kiedy ma zwrócić cały dokument, a kiedy tylko to co ma być załadowane AJAX-em. Najlepszym sposobem na odróżnienie będzie dodanie w funkcji obsługującej AJAX zmiennej, po której będziemy rozpoznawać, co ma zwrócić skrypt. Tą zmienną będzie „ajaks”, która będzie ustawiana na 1.

Funkcja do obsługi AJAX

Nasza funkcja będzie pobierała cztery parametry:

  • strona – adres strony, która ma zostać załadowana
  • dane – dane, które mają zostać wysłane do skryptu
  • funkcja – funkcja, która ma zostać wywołana po pobraniu danych
  • daneDoPrzekazania – dane, które mają zostać przekazane do wyżej wymienionej funkcji

W pierwszej chwili wydaje się, że nie potrzeba tylu parametrów. Jednak sprawa się zmienia, jeśli będziemy używali tej funkcji również do innych celów niż tylko przejęcie linków. Takimi przykładami może być logowanie, obsługa koszyka w sklepie i inne tym podobne rzeczy.

Należy pamiętać, żeby PHP zwrócił odpowiednie dane:

  • html – treść, która ma zostać wyświetlona
  • komunikat – komunikat zwrócony przez PHP

Wspomniałem o zmiennej komunikat, ale nie można zapomnieć o obsłudze tej zmiennej. Ja tutaj użyję funkcji msg, która wyświetli komunikat w odpowiednim miejscu. Nie będę już tutaj opisywać tej funkcji.

Nie można zapomnieć też o funkcji, która będzie inicjować technologię AJAX. Nazwę ją ajaksStart. Załóżmy, że treść zostanie wyświetlona w elemencie o id ajaks.

W momencie przypisania do linku funkcji, usuwam atrybut TARGET. Robię to po to, by dla danego elementu ponownie nie został dodana obsługa AJAX-a. Gdybym tego nie zabezpieczył, to po kliknięciu, funkcja wywoływana będzie wielokrotnie.

Kod JavaScript do obsługi technologii Ajax

jQuery(document).ajaxError(function(event, XMLHttpRequest, ajaxOptions, thrownError) {
  switch(XMLHttpRequest.readyState){
    case 4:{
      switch(XMLHttpRequest.status){
        case 0:
          msg('Nie udało się połączyć. Sprawdź połączenie z internetem i spróbuj ponownie');
          break;
        default:
          msg('Podczas wykonywania operacji wystąpił błąd ('+XMLHttpRequest.status+' - '+(thrownError?thrownError:XMLHttpRequest.statusText)+') - spróbuj ponownie ('+ajaxOptions.url+')');
          break;
      }
    } break;
    case 0:
      msg('Nie udało się zainicjować połączenia. Jeśli sytuacja się powtarza i masz pewność, że internet działa poprawnie, zaktualizuj przeglądarkę do najnowszej wersji lub użyj innej (Opera, Firefox, Google Chrome itp).');
      break;
    default:
      msg('Podczas wykonywania operacji wystąpił błąd ('+XMLHttpRequest.readyState+' - '+thrownError+') - spróbuj ponownie');
      break;
  }
});
function ajaksStart(){
  jQuery('a[target="ajax"]').click(function(){
    ajaks(jQuery(this).removeAttr('target').attr('href'));
    return false;
  })
}
function ajaks(strona, dane, funkcja, daneDoPrzekazania){
  msg('Przesyłam dane ...');
  jQuery.ajax({
    url:strona,
    data:dane,
    dataType:'json',
    success:function(dane){
      msg(dane.komunikat);
      if(dane.html){
        jQuery('#ajaks').html(dane.html);
        ajaksStart();
      }
      if(funkcja){
        if(jQuery.isFunction(funkcja)){
          funkcja(dane,daneDoPrzekazania);
        }else{
          eval(funkcja+'(dane,daneDoPrzekazania)');
        }
      }
    }
  })
  return false;
}

Jak widzicie, technologia AJAX nie jest taka trudna jak się wydaje i każdy może sobie z nią poradzić. Funkcje które napisałem, powinny do tego spokojnie wystarczyć.

Twitter Obserwuj mnie na Blip.pl 

1 komentarz

Implico
20 listopada 2012 o 19:05

Bardzo pomocna może być ta wtyczka:
http://www.implico.pl/ajaxgetcontent_dynamiczna_strona_ajax,7.html

Automatycznie zamienia standardową stronę na dynamiczną, opartą o wywołania AJAX. Wszystko przy zachowaniu pełnej widoczności dla Google + funkcjonalności przycisków wstecz/dalej przeglądarki.

Dodaj komentarz

Twój komentarz

CommentLuv badge