Pływająca ramka jako technika komunikacyjna AJAX

autor: Marcin 'loganek' Kolny, ostatnia modyfikacja: 2008-05-10

szukaj: AJAX obiekt XMLHttp pływająca ramka

Chyba wszyscy ceniący się webmasterzy słyszeli o technologi AJAX, a spora grupa z nich korzysta z tej technologii. Nic w tym dziwnego – dzięki niej można stworzyć aplikacje działające w przeglądarce, a nie odbiegające funkcjonalnością i szybkością od programów, które możemy zainstalować na naszym komputerze.

Jednak ze słowem AJAX kojarzy się nam głównie jedno ograniczenie: nie ma możliwości używania przycisku wstecz. Do stworzenia programu działającego w przeglądarce zwykle wykorzystywany jest obiekt XMLHttp. Oferuje nam wiele funkcji ułatwiających komunikację z serwerem. Jednak ogranicza użytkownika, nie pozwalając skorzystać mu z przycisku wstecz. Jednak i na to jest sposób – metoda ukrytej pływającej ramki.

O technologii

Technika ukrytej pływającej ramki polega na ukryciu obiektu iframe, do którego są wysyłane adresy stron. Strona jest wykonywana w niewidocznej ramce, a następnie treść obiektu iframe może być pobrana przez stronę nadrzędną. Myślę, że więcej rozjaśni się przy omawianiu przykładu.

Piszemy obiekt AJAfiX

Aby zobrazować trochę technologię ukrytej ramki iframe stworzymy przykładową stronę oraz obiekt do obsługi tej technologii. Przed przeczytaniem dalszej części artykułu polecam jednak przejrzeć publikacje na temat tworzenia obiektów w JavaScript. Teraz stworzymy obiekt o nazwie AJAfiX, który ma za zadanie utworzyć ramkę. Zdefiniujemy też kilka metod.

Oto kod:

function AJAfiX(){
   this.ramka=null;
   var ramkaEl = document.createElement("iframe");
   ramkaEl.width=0;
   ramkaEl.height=0;
   ramkaEl.frameBorder=0;
   ramkaEl.name = "ukrytar";
   ramkaEl.id = "ukrytar";
   document.body.appendChild(ramkaEl);
   this.ramka = frames["ukrytar"];
   
   this.Wykonaj=function(gdzie){
      this.ramka.location = gdzie;
   }
   this.laduj=function (xx) {
      document.getElementById("tresc").innerHTML=xx;
   }
}

Najpierw stworzona zostaje zmienna o nazwie ramka, w której będziemy przechowywać utworzony obiekt iframe. Następnie tworzymy zmienną ramkaEl, która będzie rzeczywistą pływającą ramką. funkcja createElement() tworzy obiekt iframe w dokumencie. Przypisujemy wartością width, height i frameBorder 0, żeby ramka była niewidoczna. Właściwościom name i id natomiast przypisujemy wartość "ukrytar". Dzięki temu będziemy się mogli później do nich odwołać. na końcu przypisujemy elementowi ramka stworzony przed chwilą obiekt. Kolejnym elementem naszego obiektu są metody. Funkcja wykonaj ma jeden parametr: adres strony o którą przeglądarka będzie „prosić” w żądaniu. Ostatnią metodą będzie funkcja laduj, mająca za zadanie wyświetlenie parametru xx.

Strona główna

Naszym zadaniem będzie napisanie strony, która będzie pobierała tylko treść z plików pomocniczych. Napisaliśmy już wcześniej klasę, która umożliwi nam realizację naszego zadania. Dodatkowo użytkownik będzie mógł korzystać z przycisku wstecz. Oto kod pliku index.php:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="ajafix.js"></script>
<script type="text/javascript">
window.onload=function(){
   ajax=new AJAfiX();
   ajax.Wykonaj("pr.php?id=jeden.txt");
}
</script>
<style>
a{
   cursor:pointer;
   color:blue;
}
</style>
<title>Tytuł</title>
</head>
<body>
<a onclick="ajax.Wykonaj('pr.php?id=jeden.txt')">Strona nr 1</a> <a onclick="ajax.Wykonaj('pr.php?id=dwa.txt')">Strona nr 2</a>
<div id=tresc></div>
</body>
</html>

Na początku dołączamy plik ajafix.js w którym znajduje się deklaracja klasy. Następnie w funkcji onload tworzymy obiekt AJAfiX, oraz wykonujemy metodę Wykonaj z parametrem pr.php?id=jeden.txt. Przyjrzyjmy się teraz plikowi pr.php, aby zrozumieć jak on działa:

<script> 
window.onload = function () { 
parent.ajax.laduj('<? php
if(file_exists($_GET["id"])){ 
	$plik = fopen($_GET["id"], 'r'); 
	$str = fread($plik, filesize($_GET["id"])); 
	fclose($plik); 
	$zaw = str_replace(array("\r","\n"), '<br />', $str); 
	echo $zaw; 
} 
else echo 'Plik nie istnieje!'; 
?>'); 
} 
</script>

Jak widać, strona bardzo prosta. Składa się tylko z jednej funkcji JS: onload. Ma ona za zadanie wywołać funkcję laduj obiektu ajax rodzica ramki(który wcześniej został utworzony). Parametrem tej funkcji jest treść pliku, podanego w zmiennej $_GET["id"]. Jeśli taki plik istnieje, jako parametr jest przekazywana jego treść, w przeciwnym razie argument będzie komunikatem o błędzie.

Wady techniki

Jak widać, AJAX wcale nie musi ograniczać funkcjonalności przeglądarki użytkownika. Jednak i to zastosowanie ma wadę – jeśli załadowanie strony do ukrytej ramki nie powiedzie się, użytkownik nie otrzyma żadnych informacji.

Marcin 'loganek' Kolny

szukaj: AJAX AJAX obiekt XMLHttp pływająca ramka

Osoby czytające tę publikację przeglądały również:

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!