webmaster webmastering webdesign

Jeste tutaj: webmade.org >> porady >> javascript

P造waj帷a ramka jako technika komunikacyjna AJAX

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

szukaj: AJAX AJAX obiekt XMLHttp obiekt XMLHttp p造waj帷a ramka p造waj帷a ramka

Chyba wszyscy ceni帷y si webmasterzy s造szeli o technologi AJAX, a spora grupa z nich korzysta z tej technologii. Nic w tym dziwnego – dzi瘯i niej mo積a stworzy aplikacje dzia豉j帷e w przegl康arce, a nie odbiegaj帷e funkcjonalno軼i i szybko軼i od program闚, kt鏎e mo瞠my zainstalowa na naszym komputerze.

Jednak ze s這wem AJAX kojarzy si nam g堯wnie jedno ograniczenie: nie ma mo磧iwo軼i u篡wania przycisku wstecz. Do stworzenia programu dzia豉j帷ego w przegl康arce zwykle wykorzystywany jest obiekt XMLHttp. Oferuje nam wiele funkcji u豉twiaj帷ych komunikacj z serwerem. Jednak ogranicza u篡tkownika, nie pozwalaj帷 skorzysta mu z przycisku wstecz. Jednak i na to jest spos鏏 – metoda ukrytej p造waj帷ej ramki.

O technologii

Technika ukrytej p造waj帷ej ramki polega na ukryciu obiektu iframe, do kt鏎ego s wysy豉ne adresy stron. Strona jest wykonywana w niewidocznej ramce, a nast瘼nie tre嗆 obiektu iframe mo瞠 by pobrana przez stron nadrz璠n. My郵, 瞠 wi璚ej rozja郾i si przy omawianiu przyk豉du.

Piszemy obiekt AJAfiX

Aby zobrazowa troch technologi ukrytej ramki iframe stworzymy przyk豉dow stron oraz obiekt do obs逝gi tej technologii. Przed przeczytaniem dalszej cz窷ci artyku逝 polecam jednak przejrze publikacje na temat tworzenia obiekt闚 w JavaScript. Teraz stworzymy obiekt o nazwie AJAfiX, kt鏎y 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鏎ej b璠ziemy przechowywa utworzony obiekt iframe. Nast瘼nie tworzymy zmienn ramkaEl, kt鏎a b璠zie rzeczywist p造waj帷 ramk. funkcja createElement() tworzy obiekt iframe w dokumencie. Przypisujemy warto軼i width, height i frameBorder 0, 瞠by ramka by豉 niewidoczna. W豉軼iwo軼iom name i id natomiast przypisujemy warto嗆 "ukrytar". Dzi瘯i temu b璠ziemy si mogli p騧niej do nich odwo豉. na ko鎍u przypisujemy elementowi ramka stworzony przed chwil obiekt. Kolejnym elementem naszego obiektu s metody. Funkcja wykonaj ma jeden parametr: adres strony o kt鏎 przegl康arka b璠zie „prosi” w 膨daniu. Ostatni metod b璠zie funkcja laduj, maj帷a za zadanie wy鈍ietlenie parametru xx.

Strona g堯wna

Naszym zadaniem b璠zie napisanie strony, kt鏎a b璠zie pobiera豉 tylko tre嗆 z plik闚 pomocniczych. Napisali鄉y ju wcze郾iej klas, kt鏎a umo磧iwi nam realizacj naszego zadania. Dodatkowo u篡tkownik b璠zie m鏬 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徠ku do陰czamy plik ajafix.js w kt鏎ym znajduje si deklaracja klasy. Nast瘼nie 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豉:

<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豉da si tylko z jednej funkcji JS: onload. Ma ona za zadanie wywo豉 funkcj laduj obiektu ajax rodzica ramki(kt鏎y wcze郾iej zosta utworzony). Parametrem tej funkcji jest tre嗆 pliku, podanego w zmiennej $_GET["id"]. Je郵i taki plik istnieje, jako parametr jest przekazywana jego tre嗆, w przeciwnym razie argument b璠zie komunikatem o b喚dzie.

Wady techniki

Jak wida, AJAX wcale nie musi ogranicza funkcjonalno軼i przegl康arki u篡tkownika. Jednak i to zastosowanie ma wad – je郵i za豉dowanie strony do ukrytej ramki nie powiedzie si, u篡tkownik nie otrzyma 瘸dnych informacji.

Marcin 'loganek' Kolny

Osoby czytaj帷e t publikacj przegl康a造 r闚nie:

Szukasz wykonawcy?
Tworzenie stron.
Zobacz nasze realizacje!

 

valid XHTML
valid CSS
© 2004-2008 copyright by webmade.org