[ajax] Moje pierwsze starcie, czyli przewodnik dla całkowicieZielonych Opcje

[TomASS]

Z topicu powstal artykuł
http://wortal.php.pl/phppl/wortal/artykuly...tarcie_z_ajaxem
topic przeznaczony na dyskusję na jego temat
----
nospor

Moje pierwsze starcie z AJAXem czyli przewodnik dla całkowicie zielonych.
Na podstawie klasy advAJAX Łukasza Lacha.

Zaskoczony sukcesem AJAXa w sieci, oraz problemami wielu użytkowników, postanowiłem zobaczyć z „czym to się je”, a moje doświadczenie przkazać innym. Zabieram się za googlowanie.

Zaczynam od tego czym właściwie jest AJAX. Jest, już przeczytałem - ale nie będę się tutaj rozpisywał, że jest to ble, ble, ble….tylko tak na mój chłopski rozumek. Jest to zaprzężenie JavaScriptu do ingerencji w kod HTML strony. JavaScript wysyła żądanie do serwera i otrzymuje odpowiedź, na jej podstawie modyfikuje cały czas otwartą stronę HTML.

Z technicznego punktu widzenia opiera się na „magicznej” właściwośći przeglądarki, która na zadane żądanie dostaje od serwera odpowiedź (XMLHttpRequest) w postaci tekstu (responseText) lub w postaci XML (responseXML). JavaScript „obrabia” odpowiedź i ingeruje w kod HTML (np. innerHTML lub window.write() ).

Googluję dalej, aby dowiedzieć się jak się z tego kożysta. W moje ręce wpada jedna z lepszych klas (i chyba jedyna polska klasa) advAJAX (http://advajax.anakin.us/index-pl.htm) autorstwa Łukasza Lacha. Klasa ta pozwala w prosty sposób kontrolować stan, w jakim jest nasze zapytanie. W skrócie polega to na tym, że wywołujemy metodę get() lub post() obiektu advAJAX i otrzymujemu odpowiedź (obj):

Kod

advAJAX.get({
   url: "http://www.example.com/page.html",
   onSuccess : function(obj) { alert(obj.responseText); }
});

W przykładzie tym próbujemy wykonać zapytanie (metodą get() ) na adresie: http://www.example.com/page.html. Po zakończeniu (onSuccess) wyświetlamy cały tekst w okienku (alert).

Równie dobrze mogłaby być tutaj dowolna funkcja JS:

Kod

advAJAX.get({
   url: "http://www.example.com/page.html",
   onSuccess : function(obj) { dodajHTML(obj.responseText);}
});

Możemy też przekazać w urlu jakieś zmienne:

Kod

page = parseInt(document.getElementById("page").value);
advAJAX.get({
   url: "http://www.example.com/page.php?p="+page,
   onSuccess : function(obj) { dodajHTML(obj.responseText);}
});

Klasa ta pozwala nie tylko kontrolować sytuację, w której strona załadowała się pomyślnie (onSucces), ale również w kilkunastu innych przypadkach, min w momencie inicjalizacji, podczas ładowania, po zakończeniu, po zakończeniu błędem, po zakończeniu sukcesem (pełny spis na (link) ). Np. aby zrobić napis (proszę czekać – loading):

Kod

page = parseInt(document.getElementById("page").value);
advAJAX.get({
   url: "http://www.example.com/page.php?p="+page,
   onInitialization : function(obj) ( ShowLoading();},
   onSuccess : function(obj) { dodajHTML(obj.responseText);},
   onFinalization : function(obj) { HideLoading();}
});

Wszystkie statusy polegają na interpretowaniu właściwości http_request.readyState odpowiedzi.

Klasa ta obsługuje również ponawianie połączenia, pamięć tymczasową przeglądarki, obsługę formularzy i grupowanie wywołań.

Myślę, że ciekawym przykładem, będzie przykład samego autora tej klasy. Będzie to stronicowanie. Do działania przykładu potrzebne są cztery pliki:2.html który zawiera cały kod html strony. Kod ten będzie modyfikowany przez JavaScript zawarty w pliku 2.js . W pliku 2.js jest funkcja getRecords() która wysyła proźbę (zapytanie) do pliku 2.php, który generuje odpowiedni XML. Działa to tak:
- użytkownik wczytuje stronę 2.html
- kod JS zawarty w pliku 2.js wysyła żądanie do pliku 2.php
- plik 2.php generuje odpowiedni kod XML i wysyła go z powrotem do JS (plik 2.html jest ciągle otwarty w oknie przeglądarki)
- kod JS otrzymuje odpowiedź w postaci obj.responseXML i funkcją parseXML modyfikuje kod strony 2.html (dodaje odpowiednie tagi do <tbody id="dataTable">
</tbody>.
Oczywiście nie możemy zapomnieć o ostatnim, najważniejszym pliku – klasie advAJAX.js. Przykładowy kod generujący XML może wyglądać tak:

[PHP] pobierz, plaintext 
<?
header("Content-type: text/xml; charset=UTF-8");  
$query="SELECT count(*)AS total FROM zamowienia_old;";
$result = mysql_query($query); 
$row = mysql_fetch_assoc($result);
$total = $row['total'];
  
$query="SELECT * FROM zamowienia ORDER BY Z.ID LIMIT 0,10";
$result = mysql_query($query); 
echo '<?xml version="1.0" encoding="UTF-8"?><records total="'.$total.'" max_per_page="'.$per_page.'" page="'.$page.'" count="'.mysql_affected_rows().'">';
   while ($row = mysql_fetch_assoc($result)){
  echo '<record>';
    while(list($Index,$Value)=each($row)){
      echo '<'.$Index.'>'.convert($Value).'</'.$Index.'>';
    }
    echo '</record>';
    }
 echo '</records>';?>
[PHP] pobierz, plaintext 

Oczywiście nic nie stoi na przeszkodzie kożystać z innch klas, lub samemu napisać dla siebie klasę obsługi AJAXa a w ostateczności używać „gołego” XMLHttpRequest.

Ufff to by było na tyle. Może na sam koniec troszkę linków:
Strona projektu advAJAX
Ajax w „gołej” postaci
Ajax wiki
Klasa do obsługi AJAX
Małe conieco o AJAX


A oto co można zrobić przy pomocy AJAXa:
https://www.paguna.com/
http://demo.script.aculo.us/
http://www.google.com/webhp?complete=1&hl=en
http://www.clearnova.com/ajax/
http://24ways.org/advent/easy-ajax-with-prototype
http://www.digitalmediaminute.com/article/...s-and-resources

Mam nadzieję, że przybliżyłem problematykę związaną z technologią AJAX. Jednak jak każda technologia ma swoje wady i zalety, nie można jej używać do wszystkiego, jednak to pozostawiam już czytelnikom.....

[TomASS]

Witam. Aby jeszcze bardziej przybliżyć technologię AJAX, przedstawie jeszcze jeden przykład. Jest to ulepszona walidacja formularza do rejestracji użytkownika. Potrzebny będzie nam jak zwykle plik klasy advAJAX.js, plik z funkcjami js (register.js), oraz pliki: register.php oraz register2.php…… troszkę dużo się nazbierało, ale już wyjaśniam.

Ogólna idea jest taka:
Wczytujemy formularz z pliku register.php, po wypełnieniu pól zaczyna się magia……ekhm, no nie zupełnie, zaczyna się AJAX, wywołuje odpowiednią funkcję JS, która przesyła odpowiednie dane (z formularza) do pliku register2.php, on daje odpowiedź i ajax na podstawie otrzymanej odpowiedzi wysyła bądź nie formularz. Ktoś może powiedzieć, że to można zrobić bez ajaxa – fakt, można, ale nie zamierzam nikogo do tego przekonywać, potraktujmy to jako ćwiczenie.


Zaczniemy od pliku register.php. Równie dobrze, mógłby być to register.html, to bez różnicy:

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<title>rejestracja nowego użytkownika</title>
<script type="text/javascript" src="register.js"></script>
<script type="text/javascript" src="advajax.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
 
<body>
<form action="register3.php" method="POST" id="registerForm" name="registerForm">
<table>
<tr><td class="napis">Login:</td><td><input type="text" name="login" id="login"></td></tr>
<tr><td class="napis">Hasło:</td><td><input type="password" name="Haslo"></td></tr>
<tr><td class="napis">Powtórz hasło:</td><td><input type="password" name="Haslo2"></td></tr>
<tr><td class="napis">E-mail:</td><td><input type="text" name="email" id="email"></td></tr>
<tr><td colspan="2" style="text-align: center;"><button onclick="sprawdz_dane();">Zarejestruj mnie...</button></td></tr>
 
</form>
</table>
</body>
</html>
[HTML] pobierz, plaintext 

Plik ten ma za zadanie wyświetlenie formularza, mamy 4 pola: Login, Hasło, Powtórz hasło oraz e-mail. Aby nie gmatwać przykładu zajmiemy się tylko „dodatkową” walidacją, czyli czy użytkownik lub e-mail istnieją już w bazie danych. Do przycisku Zarejestruj mnie…. Przypisana jest akcja „sprawdź dane()” która znajduje się w pliku register.js, który wygląda następująco:

[HTML] pobierz, plaintext 
function $(id) {
	return document.getElementById(id);
}
 
function sprawdz_dane() {
	var login = $("login").value;
	var email = $("email").value;
	var zapytanie = "register2.php?login="+login+"&email="+email;
	advAJAX.get({
        url : zapytanie,
    	onSuccess : function(obj) { 
    		if(obj.responseText == "login"){
    			alert("Użytkownik o takim loginie jest już w bazie danych");
    			$("login").style.border='1px solid red';
    			$("email").style.border='1px solid #7F9DB9';
    		}
    		if(obj.responseText == "email"){
    			alert("Ten e-mail isntieje już w bazie danych");
    			$("login").style.border='1px solid #7F9DB9';
    			$("email").style.border='1px solid red';
    		}
    		if(obj.responseText == "OK") $("registerForm").submit();    	
    	}
	});
}
[HTML] pobierz, plaintext 

Funkcja sprwawdz_dane pobiera wartości pól input text login oraz email I na ich podstawie generuje odpowiednie zapytanie do pliku register2.php. Zapytanie to jest wykonywane (url: zapytanie). Jako odpowiedź mamy trzy możliwości: albo jest to login – tzn „login” jest już w bazie danych, albo jest to „email” – znaczy się ze e-mail jest w bazie, oraz”OK” – wszystko w porządku (można wysyłać formularz - $("registerForm").submit(); ) i zostanie wysłany formularz do pliku register3.php. Plik, który generuje odpowiedź na zadane żądanie (register2.php) wygląda następująco:

[PHP] pobierz, plaintext 
<?
$dbhost = localhost;
$dblogin = root;
$dbhaslo = '';
$db = uop;
 
session_start();
mysql_connect ($dbhost,$dblogin,$dbhaslo) or die ("Nie masz uprawnien");
mysql_select_db ("$db");
 
$login = mysql_escape_string($_GET['login']);
$email = mysql_escape_string($_GET['email']);
 
$query = "SELECT count(*)AS Ile FROM uop_users WHERE Login='".$login."';";
$result = mysql_query($query); 
$row = mysql_fetch_array($result);
 
if($row['Ile']) echo 'login';
else{
   $query = "SELECT count(*)AS Ile FROM uop_users WHERE e_mail='$email';";
   $result = mysql_query($query); 
   $row = mysql_fetch_array($result);
   if($row['Ile']) echo 'email';    
   else echo 'OK';
}
?>
[PHP] pobierz, plaintext 

Nic nadzwyczjanego – dwa zapytania i tyle.

Oczywiście, można jeszcze kombinować z metodą assign klasy advAJAX:

[HTML] pobierz, plaintext 
advAJAX.assign($(“registerForm”))
[HTML] pobierz, plaintext 

ale to już pozostawiam do treningiu. Całe rozwiązanie można podpatrzeć tutaj http://advajax.anakin.us/phpsolutions/1.html

Powodzenia drodzy forumowicze.


------------------------edit----------------------------------
Poprawiłem uwagi Marusza, sorki, nie wszystko można zauważyć pisząć, pewnie dlatego, że sam mam złe nawyki
A co do mysql_num_rows() to nie za bardzo się mogę zgodzić, ponieważ tak czy siak będą potrzebne dwa zapytania.......a co się tyczy niekonsekwencji to?

Ten post edytował TomASS 10.02.2006, 09:30:46