- JavaScript


Pływająca ramka jako technika komunikacyjna AJAX


Dzięki technologi AJAX można stworzyć aplikacje działające w przeglądarce, a nie odbiegające funkcjonalnością od programów, które możemy zainstalować na naszym komputerze.

AJAX ma bardzo rozpoznawalną cechę: 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ą. Spójrzmy na poniższy przykład.
Piszemy obiekt AJAfiX

Aby zobrazować trochę technologię ukrytej ramki iframe stworzymy przykładową stronę oraz 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.

Naszym zadaniem będzie napisanie strony, która będzie pobierała 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:

<script type="text/javascript">
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>


Strona kł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.



InformacjeRaportuj | Drukuj

Data dodania: 01-10-2017 19:09Autor:admin
Ilość wyświetleń:632Komentarzy: 0
Komentarze
Brak komentarzy.
Dodaj komentarz
Zaloguj się, żeby móc dodawać komentarze.