Logo
AJAX

podstawy, biblioteki, efekty

Spis treści

Wstęp

W Wikipedii pod hasłem Ajax znaleźć można poniższą definicję:

AJAX (ang. Asynchronous JavaScript and XML), asynchroniczny JavaScript i XML - nie jest technologią samą w sobie, lecz terminem określającym podejście do wykorzystania dotychczasowych technologii razem, włączając w to: HTML lub XHTML, kaskadowe arkusze stylów (CSS), JavaScript, Obiektowy model dokumentu (DOM), XML, XSLT oraz XMLHttpRequest.

Kiedy te technologie zostaną wykorzystane razem w ramach modelu AJAX, aplikacje sieciowe są w stanie dokonywać szybkich, przyrostowych aktualizacji w interfejsie użytkownika bez potrzeby przeładowywania całej strony w przeglądarce. To sprawia, że aplikacja wydaje się szybsza i lepiej reaguje na akcje użytkownika.

Wadą większości rozwiązań AJAX-owych jest fakt, że przycisk wstecz w przeglądarce przestaje działać zgodnie z oczekiwaniami - jego wciśnięcie nie odwraca zmian wprowadzonych na stronie. Tą niedogodność da się jednak w prosty sposób ominąć stosując obiekt advhistory z biblioteki advancedAjax.

Uwaga!!! W projekcie, który będzie wykorzystywał AJAX najlepiej wykoszystać kodowanie znaków UTF-8 (UNICODE) ponieważ właśnie tak zakodowane dane są przesyłane poprzez XMLHttpRequest. Zastosowanie innego kodowania może spowodować konieczność wielokrotnej zmiany kodowania danych w projekcie, co może być dość uciążliwe.

Powrót do spisu treści

Wykorzystanie mintAjax

Aby móc korzystać w swoim projekcie z możliwości jakie daje mintAjax trzeba umieścić plik mintAjax.js w wybranym folderze np. "js" a następnie dołączyć go do projektu. W tym celu należy w sekcji Head umieścić następujący kod:

HTML : Dołączanie biblioteki mintAjax

<script type="text/javascript" src="js/mintAjax.js"></script>

Plik mintAjax.pl można pobrać ze strony autora mintAjax.pl.

Jedną z podstawowych możliwości, która myślę jest najczęściej wykorzystywana, jest asynchroniczna zmiana treści w danego elementu. Aby to osiągnąć, wystarczy skorzystać z metody Send (klasa Request). Funkcji Send przekazujemy 2 parametry: adres skryptu, z którym chcemy się połączyć oraz identyfikator elementu, w którym umieścimy odpowiedź serwera. Przykładowy kod przedstawia się nastepująco:

JS :

function SendRequest(plik, id){      
      var req = mint.Request();
      req.Send(plik, id);
}

HTML :

<div class="test">
      <a onclick="SendRequest('ajax/test1.php?id=1', 'test1')" title="1" >1</a>
      <a onclick="SendRequest('ajax/test1.php?id=2', 'test1')" title="2" >2</a>
      <a onclick="SendRequest('ajax/test1.php?id=3', 'test1')" title="3" >3</a>
      <a onclick="SendRequest('ajax/test1.php', 'test1')" title="brak" >brak id</a>
      
      <div id="test1"></div>
</div>

PHP :

<?
echo '<strong>'.$_GET[id].'</strong><br />';
?>

CSS :

.test{
      font-size:140%;
}

.test a{
      cursor:pointer;
}
1 2 3 brak id

Kolejną bardzo ważną możliwością Ajaxa, którą wspira mintAjax, jest możliwość pobierania informacji w postaci dokumentu XML. Wykorzystywana jest w tym przypadku właściwość klasy, a właściwie interfejsu, XMLHttpRequest. W przypadku mintAjax pobranie danych sprowadza się, tak jak w poprzednim przypadku, do użycia metody Send oraz atrybutu responseXML, który zawiera sparsowany dokument przesłany w odpowiedzi.

JS :

function SendRequest1(plik, id){
      var req = mint.Request();
      req.OnSuccess =
      function() {
            var items = this.responseXML.getElementsByTagName("test");

            for(var i = 0; i < items.length; i++) {
                  $(id).innerHTML += items[i].firstChild.data + "<br />";
            }
      }

      req.Send(plik);
}

HTML :

<a onclick="SendRequest1('ajax/test2.xml', 'test2')">Wyslij zapytanie</a>

<div id="test2"></div>

XML :

<glowny>
            <test>Lorem</test>
                  <test1>
                        <test2>Ipsum</test2>
                        <test2>Test</test2>
                  </test1>
            <test>Dolor</test>
            <test>Sit Amet</test>
</glowny>
Wyślij zapytanie 1

Ajax oznacza nie tylko dodatkowe funkcjonalności ale również efekty graficzne tworzone dynamicznie przez wymienione we wstępie technologie. Może to być, dynamiczne przenikanie elementów, struktury Drag'n'Drop, tworzenie zaokrąglonych rogów itd. MintAjax pozwala nam na wykorzystanie w prosty sposób wielu z nich. W poniższym przykładzie chciałbym zaprezentować kombinację kilku efektów. A mianowicie:

JS :

function efektyOut(nazwa){
      mint.fx.Color(nazwa , "color", "#aef345", "#ffffff", 20, 500);
      mint.fx.Color(nazwa , "backgroundColor", "#eeeeee", "#111111", 20, 500);
}

function efektyOver(nazwa){
      mint.fx.Color(nazwa , "color", "#ffffff", "#aef345", 20, 500);
      mint.fx.Color(nazwa , "backgroundColor", "#111111", "#eeeeee", 20, 500);
}

var stan = 1;
function efektyClick(nazwa, nazwa1, stan){
      var box = mint.gui.RegisterDragObject(nazwa);
      box.SetBBox(nazwa1);
      if (stan==1) {
            mint.fx.Size(nazwa, 40, 40, 20, 800);
            return 2;
      } else {
            mint.fx.Size(nazwa, 100, 100, 20, 800);
            return 1;
      }
}

HTML :

<div class="test" id="example_box1" style="height:120px;">
      <div id="example_box" onmouseover="efektyOver('example_box')" onmouseout="efektyOut('example_box')" onclick="var stan1=efektyClick('example_box', 'example_box1', stan);stan=stan1;" >
            <p>Test</p>
      </div>
</div>

CSS :

#example_box{
      width:100px;
      height:100px;
      color:#ffffff;
      background-color:#111111;
      border-color:#00aa00;
      border-width:1px;
      border-style:solid;
      text-align:center;
      cursor:move;
}

Test

To nie wszystkie możliwości jakie daje nam mintAjax. Szczegółowo opisane funkcjonalności wraz z przykładami można znaleźć na stronie autora: mintAjax.pl.

Powrót do spisu treści

Wykorzystanie advancedAjax

Biblioteka advancedAjax wyposażona została w szereg metod pozwalających na asynchroniczne przesyłanie danych, kontrolę historii przegladarki itp. Jako, że największą wadą rozwiązań wykorzystujących technologię Ajax jest to, że przycisk wstecz w przeglądarce nie działa tak jakby sobie tego życzył użytkownik, w kilku słowach przedstawię jak można tą niedogodność ominąć.

Po dołączeniu do projektu biblioteki advAjax:

HTML : advAjax

<script type="text/javascript" src="js/advajax.js"></script>

Należy dodać jeszczę bibliotekę advHistory.

HTML : advHistory

<script type="text/javascript" src="js/advhistory.js"></script>

Teraz wystarczy tylko zainicjalizować tą funkcjonalność np. w zdarzeniu onLoad, historia bedzie przechwytywana od razu po załadowaniu strony, lub dowolnym innym.

HTML :

<body onload="advHistory.create(setPage)">

To co będziemy robić z przechwyconym hashem adresu zależy od naszych potrzeb. Przykładowo:

JS :

function getAdv(pageName){
            advAJAX.get({
                  url : "ajax/test3.php?p=" + pageName,
                  onInitialization : function() {

                        o("pageData").innerHTML = "Asynhroniczne pobieranie danych.";
                  },
                  onSuccess : function(obj) {

                        o("pageData").innerHTML = obj.responseText;
                  }
            });
}

function wlaczHistorie() { advHistory.create(setPage); }

function o(id) { return document.getElementById(id) }

function o1(id) { return o(id + "h") }

var oldPageName = null;
function setPage(pageName) {

            if (oldPageName !== null && oldPageName != "")
                        o1(oldPageName).className = "history";
            if (pageName != "")
                  o1(pageName).className = "hovered";
            oldPageName = pageName;
            getAdv(pageName);
}

PHP :

<?
echo '<strong>Naglowek - '.$_GET[p].'</strong><br />
<p>To jest przykladowa tresc strony: '.$_GET[p].'</p>';
?>

HTML :

<a onclick="wlaczHistorie()" title="Aktywacja przechwytywania historii">Wlaczenie funkcjonalnosci</a>

<a href="#page1" id="page1h" onClick="getAdv('page1')">#1</a>
<a href="#page2" id="page2h" onClick="getAdv('page2')">#2</a>
<a href="#page3" id="page3h" onClick="getAdv('page3')">#3</a>
<a href="#page4" id="page4h" onClick="getAdv('page4')">#4</a>
<a href="#page5" id="page5h" onClick="getAdv('page5')">#5</a>

<div id="pageData">To jest przyklad.</div>

CSS :

.test a.hovered {
      background-color: #222;
}

.test a.history {
      background-color: #555;
}

#pageData {
      width: 200px;
      height: 100px;
      border: 1px dotted #ddd;
      padding: 25px 5px 0 5px;
}
Włączenie funkcjonalności #1 #2 #3 #4 #5
To jest przykład.
Powrót do spisu treści

Wykorzystanie Nifty Corners Cube - zaokrąglanie rogów

W ostatnim czasie dość modne stało się zaokrąglanie rogów w większości elementów na stronach. Takie rozwiązania mają zarówno zwolenników jak i przeciwników. Jednakże trzeba przyznać, że czasem warto urozmaicić projekt.

Poniżej chciałbym przedstawić jak można wykorzystać bibliotekę Nifty Corners Cube aby stworzyć zaokrąglone rogi bez konieczności użycia programów graficznych i pozycjonowania zaokrąglonych elementów.

Biblioteka Nifty Corners Cube jest bardzo łatwa w zastosowaniu. Wystarczy tylko umieścić pliki niftycube.js oraz niftyCorners.css w katalogach z naszym projektem oraz dołączyć je:

HTML : Nifty Corners Cube

<script type="text/javascript" src="js/niftycube.js"></script>

Plik ze stylami CSS jest dołączany automatycznie. Jeśli jednak pliki: niftycube.js oraz niftyCorners.css nie są umieszczone w jednym katalogu, myslimy w skrypcie wskazać lokalizację pliku ze stylami.

JS : Wskazanie w skrypcie gdzie znajduje sięplik ze stylami

l.setAttribute("href","../css/niftyCorners.css");

Teraz wystarczy tylko, po załadowaniu strony wywołać funkcję, która wskaże, które elementy w jaki sposób mają być zaokrąglone.

HTML :

<body onload="noLoad()"

JS :

function onLoad(){
      Nifty("div.box","normal tl br");
      Nifty("div.box h3","small tl br");
}

Efekt wykonania powyższego kodu jest widoczny we wszystkich boxach, w których jest umieszczony kod. Zaokrąglone zostały lewy górny oraz prawy dolny róg.

Poniżej jeszcze jeden przykład zastosowania trzech różnych rozmiarów narożników.

JS :

function niftyWlacz(id, size){
      var style = size +" fixed-height";
      var item = "div#" + id;
      Nifty(item , style);
}

HTML :

<a onclick="niftyWlacz('c1', 'small')" title="Small">Small</a>
<a onclick="niftyWlacz('c2', 'normal tl br')" title="Normal">Normal</a>
<a onclick="niftyWlacz('c3', 'big right')" title="Big">Big</a>


<div class="testCorners" id="c1"></div>
<div class="testCorners" id="c2"></div>
<div class="testCorners" id="c3"></div>

CSS :

.testCorners{
      width:100px;
      height:100px;
      color:#ffffff;
      background-color:#111111;
      text-align:center;
      margin:10px;
      float:left;
}
Small Normal Big
Powrót do spisu treści

Przykład bezpośredniego wykorzystania XMLHttpRequest

Definicja XMLHttpRequest z Wikipedii:

XMLHttpRequest (XHR) – interfejs języków skryptowych (np. JavaScript, JScript lub VBScript) przeglądarek internetowych odpowiedzialny za wykonywanie żądań do serwera WWW za pomocą protokołu HTTP. Cechą charakterystyczną XMLHttpRequest jest możliwość wykonywania żądań już po załadowaniu się strony internetowej. Otrzymane odpowiedzi serwera są wówczas wykorzystywane do modyfikacji załadowanego dokumentu. Możliwość asynchronicznego wykonywania żądań sprawia, że są one wykonywane w tle i nie przerywają interakcji użytkownika ze stroną. Treść odpowiedzi serwera najczęściej przekazywana jest w formatach XML lub JSON. Umożliwia to natychmiastowe przeiterowanie otrzymanego węzła XML lub ewaluację kodu JavaScript.

Poniższy przykład pochodzi ze strony developer.mozilla.org.

JS :

var http_request = false;

function makeRequest(url) {

http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                  http_request.overrideMimeType('text/xml');

            }
      } else if (window.ActiveXObject) { // IE
            try {
                  http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                  try {
                  http_request = new ActiveXObject("Microsoft.XMLHTTP");
                  } catch (e) {}
            }
      }

      if (!http_request) {
            alert('Poddaje sie :( Nie moge stworzyc instancji obiektu XMLHTTP');
            return false;
}
http_request.onreadystatechange = function() { alertContents(http_request); };
      http_request.open('GET', url, true);
http_request.send(null);

}

function alertContents(http_request) {

if (http_request.readyState == 4) {
            if (http_request.status == 200) {
                  alert(http_request.responseText);
            } else {
            alert('Wystapil problem z zapytaniem.');
            }
}

}

HTML :

<a onclick="makeRequest('ajax/test1.php')">test1.php</a>
<a onclick="makeRequest('ajax/test1.php?id=ajax')">test1.php?id=ajax</a>
<a onclick="makeRequest('zly_plik.php')">zly_plik.php</a>
test1.php test1.php?id=ajax zly_plik.php
Powrót do spisu treści

Bibliografia:

XHTML, CSS valid.