Forum PHP.pl > [ajax howto] Jeszcze prostszy AJAX: moo.ajax

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [ajax howto] Jeszcze prostszy AJAX: moo.ajax

Fipaj

14.04.2006, 14:23:52

OK, trzeba się zrehabilitować ;-) Oto opis praktycznie najprostszego silniczka do obsługi Ajaksu ;-)

Co będzie potrzebne?
Potrzebne będą dwa skrypty - moo.ajax i prototype.lite. Oba można pobrać z mojego serwera: http://fipaj.livenet.pl/files/AJAX.tar.gz (naprawiony!)

Zaczynamy
Paczkę rozpakowywujemy i przenosimy na serwer (!). Aplikacja nie zadziała z protokołu file://, musimy umieścić ją na serwerze z obsługą php.
Nasza aplikacja będzie składać się z czterech plików:
* script.php
* index.html
* moo.ajax.js
* prototype.lite.js
Wszystkie przykłady znajdują się w w/w paczce.

Po stronie serwera
Plik script.php ma coś wypisywać na ekranie. Mogą to być dane z bazy bądź z pliku - to akurat nie jest ważne. W naszym przykładzie będzie to wyglądać tak:

[PHP] pobierz, plaintext 
<?php
sleep (10);
print ("Jestem skryptem");
?>
[PHP] pobierz, plaintext

Skrypt zasypia na 10 sekund, po czym wyświetla napis "Jestem skryptem".
Ten pliczek można sobie dowolnie rozbudowywać, to chyba każdy umie ;-)

Po stronie przeglądarki
Skrypt moo.ajax to klasa o nazwie "ajax", którą wywołujemy z następującymi parametrami:
* url - adres url skryptu, tutaj script.php
* options [parametry] - o tym za chwilę
Wywołanie połączenia wygląda więc tak:

Kod

new ajax (url, options);

OK, co z tymi parametrami? Przede wszystkim podajemy je w tablicy, tak to wygląda w JS:

Kod

new ajax ('script.php', {klucz1: 'wartość', klucz2: 'wartość',...);

Proste? Proste.
Oto spis możliwych parametrów:
* 'method' -> post bądź get, domyślnie post
* 'postBody' -> parametry połączenia post
* 'onComplete' -> nazwa funkcji wykonywanej po wykonaniu połączenia Ajaksu
* 'update' -> id elementu, który zostanie wypełniony treścią pobraną z pliku php
OK, teraz cały plik index.html:

[HTML] pobierz, plaintext 
<html>
      <head>
            <title>Ajax!</title>
            <script src="prototype.lite.js"></script>
            <script src="moo.fx.js"></script>
            <script src="moo.ajax.js"></script>
            <script>
window.onload = function () {
      new ajax ('php.php', {update: $('tekst'), onComplete: myFunction});
}
function myFunction(request){
  alert(request.responseText);
}
            </script>
      </head>
      <body>
            <h1>Ajax Test! :)</h1>
            <p id="tekst">Ten tekst za chwilę zostanie zastąpiony przez inny ;-)</p>
      </body>
</html>
[HTML] pobierz, plaintext

Zakończenie
Dziękuję za uwagę ;-) A tutaj strona główna skryptu: http://www.mad4milk.net/entry/moo.ajax

GrayHat

14.04.2006, 14:41:36

hehe wczesniej odkrylem ten silnik

przyklad na stronie ktora robie dla klienta: www.kfl.pl

TomASS

14.04.2006, 23:03:25

Proste

Tylko zastanawiams się w czym jest prostsze od advAJAX ?

[HTML] pobierz, plaintext 
advAJAX.post({
            url : "url.php",
            parameters:{
      numer: numer
            },
            onSuccess : function(obj) { alert(obj.responseText);}
});
[HTML] pobierz, plaintext

Może troszkę prostrze to jest, ale jakoś nie mogę doczytać czy ma np. walidację parametrów?

Ale dzięki Fipaj za linka

, warto się z tym zapoznać

Fipaj

15.04.2006, 07:32:25

Nieeeeee! Czwarty raz ktoś przekręca mojego nicka, w tym po raz drugi ty, TmSAS

(OK, OK - TomASS ;])

prostsze ;-)

Walidacji parametrów nie ma... ale to jest naprawdę lightweight library, ~1.3kb ;-)

TomASS

15.04.2006, 08:02:39

Cytat

Nieeeeee! Czwarty raz ktoś przekręca mojego nicka, w tym po raz drugi ty, TmSAS

Przepraszam bardzo, to się więcej nie powtórzy

Już to poprawiłem

Wracając do dyskusji:

Cytat

Walidacji parametrów nie ma

No właśnie

Cytat

ale to jest naprawdę lightweight library, ~1.3kb ;-)

Zgadza się

To jest jej duży plus, lecz dodaj do tego 3.2 kb prototype.lite. co i tak daje małą bibliotekę

Fipaj

15.04.2006, 08:06:19

Ktoś zasugerował, aby wszystkie produktu mad4milk (moo.fx, moo.ajax, moo.dom) przepisać na troszkę większe, ale bez użycia prototype. Autor nie był zainteresowany...

Obecnie zainteresowałem się moo.fx.pack, lecę testować ;-)

seaquest

16.04.2006, 20:52:23

Tylko jak ktoś kiedyś mądry powiedział: Po co wyważać otwarte drzwi?. Skoro Prototype ma AJAX'a, to czemu z niego nie korzystać. Jest tak samo prosty (a nawet chyba prostszy) od tego przedstawionego... A możliwości ma dużo większe (np. Ajax.Updater)

splatch

18.04.2006, 23:28:57

// popieram seaquesta.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.