T&R splet blog o spletnih storitvah. Razgaljamo tehnologijo!

reference spletnih strani
1st March

AJAX na enostaven način

Kaj je AJAX? AJAX je preprosto kreiranje zahteve, pošiljanje zahteve na določeno stran in nato pridobivanje informacij, ki jih stran (strežnik) poda nazaj. Načeloma bi lahko rekli, da je AJAX isto kot če bi vi odprli brskalnik, vtipkali naslov in pritisnili enter. Brskanil je kreiral zahtevo, poslal le-to na določeno (vtipkano stran) in vam prikazal informacije, ki jih je stran (strežnik) vrnila.

Glavna razlika je v tem, da se AJAX zahteva kreira ko je stran že naložena, torej bi lahko gledali na AJAX kot pod-proces znotraj strani (posledica je to, da strani ni potrebno osvežiti za ponovno kreiranja zahtevka, ampak to storimo z Javascript-om) s katerim lahko:

  • pošiljamo uporabnikovo sporočilo in prikazujemo druga sporočila (chat box)
  • osvežujemo čas glede na izbran timezone
  • pridobimo celotno vsebino novice, artikala
  • ... še tisoč ostalih primerov :P

Ker je AJAX (lahko) priročna zadeva (pretirana uporaba pa nezažljena) bom predstavil mojo osnovno knjižnico katero sem ta teden malenkost dodelal. Zasnovana je tako, da omogoča enostavno delo z AJAX-om. Sama koda je minimalistična, vse skupaj ne presega 120 vrstic (seveda bi lahko skrčili na pol manj ali še več, vendar je bila berljivost tukaj bolj pomembna). Koda sama ne potrebuje nobene druge zunanje kode (ala jQuery, etc) saj uporablja pure Javascript kodo.

Z to AJAX knjižnico, če jo lahko tako imenujem, sem lahko uspešno sprožil AJAX zahteve na sledečih brskalnikih:

  • Firefox 2 (Firefox 1 nisem testiral, vendar bi zadeva morala skoraj zagotovo delovati)
  • IE 7.0
  • IE 6.0
  • IE 5.5
  • IE 5.01
  • Safari (windows verzija ter MAC verzija)
  • Opera 9.25 (deluje tudi na starejših)

... kar pokrije večino uporabnikov (in brskalnikov, ki jih uporabljajo), ki danes brskajo po internetu. Z omenjeno AJAX knjižnico lahko uporabite GET ali POST methodo. Ponavadi se uporablja GET methoda (lažje odkrivanje napak, saj lahko link kopiramo v browser in simuliramo AJAX zahtevo), vendar je POST metoda bolj varna v smislu težjega simularanja le-te z strani uporabnikov. Problem pri GET metodi nastane tudi pri večji količini teksta, kjer zaradi omejitve dolžine URL-ja (naslova) ne moremo postali celotno vsebino ampak le delno (oz. nam del vsebine brskalnik odreže, glede na njegovo interno omejitev dolžine naslova).

Javascript omogoča dva načina za branje podatkov (dveh različnih tipov podatkov), ki smo jih dobili nazaj od strežnika (strani):

  • plain text
  • XML

... zato sem naredil štiri primere, ki pokrivajo vse možne kombinacije z tipom podatkov (plain text, XML) ter methodo (GET, POST). Sedaj pa k predstaviti kode. Javascript konstante, ki so uporabljene pri knjižnici:

JAVASCRIPT:
  1. var debug         = false; // v primeru, da je nastavljeno na true nas javascript po kreiranju AJAX zahtevka preusmeri na zahtevano stran, primerno za debagiranje GET metode
  2. var showerrors   = true; // prikažem napake ali ne?
  3. var charset       = 'UTF-8'; //charset uporabljen pri pošiljanju podatkov
  4.  
  5. //Opis napak, ki se lahko zgodijo pri kreiranju zahtevka
  6. var AJAX_ERROR_1 = 'Your browser does not support AJAX technology.';
  7. var AJAX_ERROR_2 = 'An error occurred while trying to access PHP script with AJAX request.';
  8. var AJAX_ERROR_3 = 'An error occured please try again.';
  9.  
  10. var LOADING_TEXT = 'Nalagam..'; // Tekst, ki se doda v statusno okno (če ga imamo) s čimer uporabniku sporočamo status AJAX zahtevka (gmail je lep primer)

Glavna funkcija, ki skrbi za kreiranje AJAX zahtevka:

JAVASCRIPT:
  1. function sendRequest(script, params, call_back, method, error_message){
  2.     // kreiramo javascript objekt, ki bo skrbel za pošiljanje zahtevka (odvisno glede na brskalnik)
  3.     var http_request = false;
  4.     if (window.XMLHttpRequest){
  5.         http_request = new XMLHttpRequest();
  6.     }else if (window.ActiveXObject){
  7.         try{
  8.             http_request = new ActiveXObject('Msxml2.XMLHTTP');
  9.         }catch (e){
  10.             try{
  11.                 http_request = new ActiveXObject('Microsoft.XMLHTTP');
  12.             }catch (e) {}
  13.         }
  14.     }
  15.  
  16.     // če brskalnik ne podpira AJAX-a uporabnika o tem obvestimo
  17.     if (!http_request){
  18.         showError(AJAX_ERROR_1);
  19.         return false;
  20.     }
  21.  
  22.     // dodamo kodo, ki bo skrbela za preverjanje status zahtevka (404 not found, 200, etc) in branje podatkov, ki nam jih je strežnik (stran) posredoval nazaj
  23.     http_request.onreadystatechange = function() { eval(checkHttpRequest)(call_back, error_message, http_request); };
  24.  
  25.     // za GET metodo zgradimo URL, primer: ajax.php?parameter1=vrednost1&etc=itd
  26.     if (method == 'GET') {
  27.         script = script+'?'+params;
  28.     }
  29.  
  30.     // inicializiramo zahtevek (asinhrono, torej več funkcij se lahko hkrati izvaja)
  31.     try{
  32.         http_request.open(method, script, true);
  33.     }catch(ex){
  34.         showError(AJAX_ERROR_2);
  35.     }
  36.  
  37.     // dva različna načina za pošiljanje
  38.     if (method == 'GET') {
  39.         http_request.send(null);
  40.     } else {
  41.         http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset:'+charset);
  42.         http_request.send(params);
  43.     }
  44.  
  45.     if (debug !== false){
  46.         location.href=url;
  47.     }
  48.  
  49.     // posodobimo statusno okno, če ta obstaja
  50.     setLoading('show');
  51. }

Koda, ki je zadolžena za preverjanje zahtevka in branje podatkov, ki jih vrne strežnik:

JAVASCRIPT:
  1. function checkHttpRequest(call_back, error_message, request){
  2.     switch(request.readyState) {
  3.         case 0: // Uninitialized
  4.         break;
  5.         case 1: // Loading
  6.         break;
  7.         case 2: // Loaded
  8.         break;
  9.         case 3: // Interactive
  10.         break;
  11.         case 4: // Done!
  12.  
  13.         // 200, zahtevek je bil uspešen, pokličemo funkcijo katero smo defenirali naj se pokliče, ko bomo dobili nazaj podatke in skrijemo statusno okno
  14.         if (request.status == 200) {
  15.             eval(call_back)(request);
  16.             setLoading('hide');
  17.         }else{
  18.             setLoading('hide', AJAX_ERROR_3);
  19.             showError(error_message)// posodobimo statusno okno, če obstaja in v primeru da imamo vključeno prikazovanje napak tudi le-to prikažemo uporabniku
  20.         }
  21.         break;
  22.         default:
  23.         break;
  24.     }
  25.     return false;
  26. }

Znotraj te knjižnice sta še showError in setLoading funkciji, ki skrbita za prikazovanje napak (če imamo to vklopljeno) in posodabaljanje statusnega okna, če le ta obstaja (dobro za obveščanje uporabnika kaj se dogaja).

Primer uporabe te knjižnice z GET methodo:

JAVASCRIPT:
  1. function getPlainInfoGetMethod(){
  2.     sendRequest('ajax.php', 'm=plain&a=getinfo', 'infoPlainGot', 'GET', 'An error occured while trying to get plain info text with GET method. Please inform admin staff.')
  3. }

Pokličemo skripto ajax.php z poljubnimi parametri (v našem primeru m=plain&a=getinfo), določimo funkcijo, ki naj se pokliče, če bo zahtevek uspešen, uporabimo metodo GET in podamo sporočilo, ki naj se prikaže uporabniku, če bo prišlo do napake pri dostopanju do strani (v našem primeru ajax.php).

Funkcija, ki se pokliče, če je zahtevek uspešen je v našem primeru infoPlainGot. Ta funkcija skrbi za obdelovo podatkov, ki nam jih strežnik (stran) vrne ali pa kakšne spremembe na strani (v smislu designa, funkcionalnosti ali karkoli drugega). V našem primeru izpišemo vse tisto, kar nam strežnik vrne:

JAVASCRIPT:
  1. function infoPlainGot(request){
  2.     alert(request.responseText);
  3. }

V kodi (poglej priponke) si poglejte še ostale primere za POST metodo ter branje XML podatkov. Še nekaj besed o PHP kodi, ki skrbi za obdelavo teh AJAX zahtevkov (v našem primeru ajax.php). Koda, ki je omembe vredna (oz. potrebuje dodatno obrazložitev):

PHP:
  1. // določimo star datum in ostale vrednost za header s katerimi preprečimo, da brskalnik shranjuje rezultate (<strong>ne daje v cache</strong>) ampak jih vedno na novo naloži
  2. header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
  3. header('Cache-Control: no-store, no-cache, must-revalidate');
  4. header('Cache-Control: post-check=0, pre-check=0', FALSE);
  5. header('Pragma: no-cache');
  6.  
  7. // nastavimo, da vrnemo XML ali pa plain text
  8. header('Content-Type: text/xml; charset=UTF-8');
  9. header('Content-Type: text/plain; charset=UTF-8');

Datoteke:

Več informacij:

Seveda moram tukaj še dodati, da se vsega tega sam nisem spomnil, ampak sem bral članke, vodiče in potem to kodo počasi skupaj dajal, učil ter testiral pri različnih projektih, kjer sem uporabil to knjižnico in na koncu prišel do knjižnice, ki je dovolj enostavna za uporabo ter dovolj generična, da me ne omejuje pri pisanju oz. uporabe te kode (pa seveda, da deluje na večini brskalnik).

P.S: Enkrat naslednji teden bom podal še primer Google suggest z uporabo te knjižnice.

Deli s skupnostjo:

  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

Podobni članki:

  1. AJAX Gmail indikator – prikaz statusnega okna pri AJAX operacijah
  2. AJAX iskanje datotek, dodajanje v seznam ter predogled le teh (PDF, jpeg)
  3. AJAX iskanje in dodajanje v seznam (select) z dodatnimi informacijami
  4. Google AJAX Suggest kopija
  5. Stalno osveževanje del spletne vsebine – ajax jquery.get – javascript setinterval
  6. jQuery each snippet
  7. PHP & Javascript asociativna tabela (Associative array)
  8. Operacije nad seznami – Javascript DOM – HTML select – HTML option
  9. Textarea defaultValute – Javascript string replace – uidatepicker onClose
  10. Javascript – delci uporabne kode

9x komentirano na “AJAX na enostaven način”

  1. .: TRSplet - internetne storitve .: » Blog Archive » Google AJAX Suggest kopija je napisal:

    [...] AJAX na enostaven način [...]

  2. .: TRSplet - internetne storitve .: » Blog Archive » AJAX iskanje in dodajte v seznam (select) z dodatnimi informacijami je napisal:

    [...] AJAX na enostaven način [...]

  3. .: TRSplet - internetne storitve .: » Blog Archive » AJAX Gmail indikator - prikaz statusnega okna pri AJAX operacijah je napisal:

    [...] AJAX na enostaven način [...]

  4. .: TRSplet - internetne storitve .: » Blog Archive » AJAX iskanje datotek, dodajanje v seznam ter predogled le teh (PDF, jpeg) je napisal:

    [...] z iskanjem. S pomočjo moje standardne AJAX knjižnice pokličemo PHP skripto, ki poišče datoteke na našem FTP-ju (datoteke so Y vsebine, služijo le [...]

  5. Milch je napisal:

    Sam uporabljam Xajax in je super. Je enostaven pa še marsikaj omogoča. Tudi za učenje je zelo preprost, dokumentacija pa v primerjavi z ostalimi zadevami tudi ni slaba.

  6. Roky je napisal:

    XAjax še nisem uporabljal, sem na začetku raje se s svojo knjižnico igral:)

  7. Milch je napisal:

    Ja sej vsak po svoje :) . Men Java Script ni ravno najbolj poznana zadeva, mi je PHP bolj domač. Zarad tega sem pol probal najdt eno enostavno knjižnico za Ajax. Zaenkrat mi Xajax omogoča tisto kar želim pa kot rečeno je enostavn pa dokumentacija je v redu tko da bom zaenkrat kr tle ostal. Je pa res da če narediš nekaj svojega da točno veš kako uporabit pa kje so omejitve tko da za uporabo je verjetn lažje pa ni ti treba dokumentacije brat:).

  8. Hacepsut je napisal:

    Pomoč,
    Na naslovu npr http://10.1.31.195/usr/stat2.txt ,bi moral datoteko stat2.txt brisat, pregledovat in po poterbi na novo ustavarit ali upload-at. Do sedaj mi je usplelo da sem se pretolkel do tega ,da lahko preberem vsebino datoteke. Kako bi se dalo napravit še ostalo ali pa vsaj ,da bi izbrisal vsebino datoteke stat2.txt. Kodo je zelo podobna zgoraj navedni.

    Hvala

  9. Roky je napisal:

    Na novo ustvarit datoteko ne moreš na odaljenem strežniku tako preprosto. Če pa je to na tvojem lokalnem strežniku pa uporabi file_put_contents.

    V primeru, da potrebuješ iz enega strežnika poslati datoteko na drugem strežniku, tam kreirati datoteko pa potem uporabi sledeči princip:
    - vsebino datoteke pošlji preko post zahtevka
    - na drugem strežniku sprejmi POST zahtevek
    - shrani POST zahtevek v novo datoteko

Dodaj komentar