„2007:Ajax függvények” változatai közötti eltérés

A lap 2007. december 18., 15:37-kori változata

Tartalomjegyzék

1 Mi is az AJAX?
2 Prototype.js
3 A segédfüggvények
4 Az Ajax objektum
5 Az Ajax.Request osztály
6 Az Ajax.Updater osztály használata
7 Kiterjesztések a JavaScript osztályokhoz

Mi is az AJAX?

A leírás megtalálható az alábbi linken: Wikipedia.hu

Prototype.js

Mi is ez?

Abban az esetben ha még nem találkoztál volna vele, a prototype.js egy JavaScript könyvtár,melyet Sam Stephenson készített. Ez a szabványos, nagyon jól átgondolt és megírt könyvtár nagy terhet vesz le mindazok válláról, akik a Web 2.0-t jellemző interaktivitást szeretnének az,oldalaikon implementálni. Ha már próbáltad használni ezt a könyvtárat akkor feltünhetett, hogy a dokumentáció nem a legerősebb oldala. Mint sok más hozzám hasonló fejlesztő, próbáltam a forráskódot olvasgatni és kísérletezni vele. Gondoltam jó dologl enne jegyzetelni miközben megismerem és ezt megosztani másokkal is. Ezenkívül figyelmedbe ajánlok egy nem hivatalos referenciát a könyvtár által szolgáltatott objektumokról, osztályokról, függvényekről és kiterjesztésekről. Azok a fejlesztők akik járatosak a Ruby programozási nyelvben, a példák és a referencia tanulmányozása közben észreveszik majd a hasonlóságot a Ruby sok beépített osztályával és a könyvtár által implementált kiterjesztésekkel.

A segédfüggvények

A könyvtár rengeteg előre definiált objektumot és segédfüggvényt tartalmaz. Ezen függvények nyilvánvaló célja, hogy sok felesleges gépeléstől és munkától mentse meg a fejlesztőt.

A $() függvény használata

A $() függyvény egy könnyen használható rövidítése a gyakran használt document.getElementById() DOM függvénynek. Az eredetihez hasonlóan a paraméterben átadott azonosítóval rendelkező elemmel tér vissza. De tovább is megy egy kicsit, így több azonosítót is át lehet adni neki paraméterként és ebben az esetben egy objektum tömbbel fog visszatérni, ami tartalmazza az összes kért elemet. A következő példa ezt mutatja be.

  <HTML>
  <HEAD>
  <TITLE> Tesztoldal </TITLE>
  <script src="prototype-1.4.0.js"></script>
  <script>
  function test1()
  {
  var d = $('myDiv');
  alert(d.innerHTML);
  }
  function test2()
  {
  var divs = $('myDiv','myOtherDiv');
  for(i=0; i<divs.length; i++)
  {
  alert(divs[i].innerHTML);
  }
  }
  </script>
  </HEAD>
  <BODY>
  <input type="button" value=Test1 onclick="test1();">

  <input type="button" value=Test2 onclick="test2();">

  </BODY>
  </HTML>

Egy másik hasznos tulajdonsága ennek a függvénynek, hogy nem pusztán az azonosítót lehet neki átadni szövegként, hanem magát az elemet mint objektumot, ez pedig igen hasznos lehet azokban az esetekben amikor új függvényeket készítünk melyekben mindkét fajta paraméterezésre lehetőséget szeretnénk biztosítani.

Az $F() függvény használata

Az $F() függvény is egy hasznos rövidítés, bármilyen beviteli mező értékét képes visszaadni, akár egy lenyíló listáét is. A már az előzőekben leírtakhoz hasonlóan az azonosítót vagy magát az objektumot is át lehet adni paraméterként.

  <script>
  function test3()
  {
  alert( $F('userName') );
  }
  </script>
  <input type="text" id="userName" value="Joe Doe">

  <input type="button" value=Test3 onclick="test3();">

Az $A() függvény használata

Az $A() függvény a kapott paramétert tömbbé konvertálja. Ez a függvény az Array osztály kiterjesztéseivel együtt használva sokkal egyszerűbbé teszi olyan függvények írását, melyekben változó számú paramétereket akarunk fogadni.

  <script>
  function shoutOut(){
  sayHi('Hello, ', 'Homer', 'Bart', 'Marge', 'Snowball');
  }
  function sayHi(){
  var names = $A(arguments).slice(1);
  var phrase = arguments[0];
  for(i=0; i<names.length; i++)
  alert(phrase + names[i]);
  }
  </script>
  <input type="button" value="Say hi to everybody" onclick="shoutOut();" >

A $H() függvény használata

A $H() függvény bármilyen asszociatív tömböt egy Hash objektummá konvertál.

  <script>
  function testHash()
  {
  var a = [];
  //az asszociatív tömb feltöltése
  a['first'] = 10;
  a['second'] = 20;
  a['third'] = 30;
  //konvertájuk
  var h = $H(a);
  alert(h.toQueryString()); //displays:
  first=10&second=20&third=30
  }
  </script>

Az $R() függvény használata

Az $R() függvény pusztán csak egy rövidítése a new ObjectRange(lowerBound, upperBound, excludeBounds)-nek. Az ObjectRange osztály dokumentációjában megtalálhatod a bővebb leírást. De azért nézzünk meg gyorsan egy egyszerű példát ami megmutatja, hogyan kell végigiterálni az each metódus segítségével. Erről a metódusról pedig az Enumerable osztály dokumentációjában olvashatsz bővebben.

  <script>
  function demoDollar_R(){
  var range = $R(10, 20, false);
  range.each(function(value, index){
  alert(value);
  });
  }
  </script>
  <input type="button" value="Sample Count" onclick="demoDollar_R();" >

A Try.these() függvény használata

A Try.these() függvény akkor lehet hasznos számodra, ha több függvényhívást szeretnél egymás után végrehajtatni, mindaddig amíg az egyik sikeres nem lesz. Értelemszerűen több függvényt lehet neki paraméterként átadni és ezeket sorra elkezdi meghívni mindaddig amíg az egyik nem működik, és a függvény visszatérési értéke ennek visszadott értéke lesz. A következő példában használt xmlNode.text függvény csak bizonyos böngészők esetében működik, a xmlNode.textContent függvény pedig más böngészőkkel vezet sikerre. A Try.these() használatával azzal kapjuk vissza a megfelelő eredményt amely működött.

  <script>
  function getXmlNodeValue(xmlNode){
  return Try.these(
  function() {return xmlNode.text;},
  function() {return xmlNode.textContent;)
  );
  }
  </script>

Az Ajax objektum

Az eddig leírt segédfüggvények szépek és jók, de valljuk be, nem igazán rengetik meg a világot. Talán ezeket magad is megcsináltad és ott vannak már a saját szkriptjeidben. De ezek a függvények csak a jéghegy csúcsát jelentik. Biztos vagyok benne, hogy a prototype.js AJAX lehetőségei keltik fel majd igazán az érdeklődésedet. Csapjunk is bele, nézzük meg miként teszi könnyebbé az életedet a könyvtár ha AJAX használtára van szükséged. Az Ajax objektum egy előre definiált objetum amit a könyvtár hoz létre azért, hogy elfedje és egyszerűsítse a trükközést ami az AJAX funkcionalitáshoz szükséges. Az objektum több osztályt is tartalmaz amely AJAX logikát tartalmaz. Nézzünk meg párat ezekből.

Az Ajax.Request osztály

Ha nem használsz semmiféle könyvtárat akkor elég sok kódot kell írnod ahhoz, hogy létrehozz egy XMLHttpRequest objektumot és nyomonkövesd a folyamatokat aszinkron, majd feldolgozd a választ. Na és szerencsésnek mondhatod magad, ha csak egyfajta böngészővel foglalkoznod. Ennek segítésére a könyvtárban definiálva van az Ajax.Request osztály. Vegyünk egy példát, mondjuk van egy alkalmazásod ami képes kommunikálni a szerverrel a "http://yoursever/app/get_sales?empID=1234&year=1998" hivatkozáson keresztül és a választ a következő XML formában küldi vissza.

  <?xml version="1.0" encoding="utf-8" ?>
  <ajax-response>
  <response type="object" id="productDetails">
  <monthly-sales>
  <employee-sales>
  <employee-id>1234</employee-id>
  <year-month>1998-01</year-month>
  <sales>$8,115.36</sales>
  </employee-sales>
  <employee-sales>
  <employee-id>1234</employee-id>
  <year-month>1998-02</year-month>
  <sales>$11,147.51</sales>
  </employee-sales>
  </monthly-sales>
  </response>
  </ajax-response>

Az Ajax.Request objektum segítségével nagyon egyszerű a szerverhez eljuttatni a kérést és a kapott választ feldolgozni. A következő példa ezt mutatja be.

  <script>
  function searchSales()
  {
  var empID = $F('lstEmployees');
  var y = $F('lstYears');
  var url = 'http://yoursever/app/get_sales';
  var pars = 'empID=' + empID + '&year=' + y;
  var myAjax = new Ajax.Request(
  url,
  {
  method: 'get',
  parameters: pars,
  onComplete: showResponse
  });
  }
  function showResponse(originalRequest)
  {
  //put returned XML in the textarea
  $('result').value = originalRequest.responseText;
  }
  </script>
  <select id="lstEmployees" size="10" onchange="searchSales()">
  <option value="5">Buchanan, Steven</option>
  <option value="8">Callahan, Laura</option>
  <option value="1">Davolio, Nancy</option>
  </select>
  <select id="lstYears" size="3" onchange="searchSales()">
  <option selected="selected" value="1996">1996</option>
  <option value="1997">1997</option>
  <option value="1998">1998</option>
  </select>
  
<textarea id=result cols=60 rows=10 ></textarea>

Az Ajax.Request objektumnak átadott paramétert. Ez {method: 'get', parameters: pars, onComplete: showResponse} egy névtelen objektumot reprezentál. Ez azt jelenti, hogy egy olyan objektumot adunk át amelynek a method tulajdonsága a 'get' szöveges értéket tartalmazza, a parameters tulajdonság a HTTP kérés paramétereit, az onComplete pedig a showResponse függvényre való hivatkozást tartalmazza. Ezeken kívül van még néhány olyan tulajdonság amit meg lehet adni, ilyen például az asynchronous, aminek az értéke true vagy false lehet és azt határozza meg, hogy az AJAX hívás a szerver felé aszinkron módon fog-e történni (az alapértelmezett érték a true). Összességében ez a paraméter határozza meg az AJAX hívás opcióit. A példánkban az első paraméterben átadott címet hívjuk meg HTTP GET paranccsal és a pars paraméterben megadott paraméterlistát kapja meg, majd az Ajax.Request objektum a showResponse függvényt fogja meghívni miután megérkezett a válasz a kérésünkre. Mint ahogy ismeretes, az XMLHttpRequest folyamatosan jelzi a HTTP kérés állapotát. Ez az állapot négy különböző esetet takar: Loading, Loaded, Interactive, vagy Complete. Megmondhatod az Ajax.Request objektumnak, hogy hívjon meg egy adott függvényt valamilyen állapot elérésekor, ezek közül a Complete a leggyakrabban használt. Ahhoz, hogy az objektum tudja milyen függvényt kell meghívnia az állapot elérésekor, egyszerűen az onXXXXX tulajdonságon keresztül lehet megadni számára, mint ahogy a fenti példában az onComplete szerepel. Ez a függvény egy paramétert fog megkapni, ami maga az XMLHttpRequest objektum lesz. Ezt az objektumot tudod arra használni, hogy kinyerd a visszakapott választ vagy éppen leellenőrizd a status tulajdonságot, ami a HTTP kérés válaszkódja. Van még két másik érdekes opció az eredmények feldolgozásához. Meg tudunk adni a onSuccess paraméterben egy függvényt amit sikeres AJAX hívás esetén fog meghívni, míg az onFailure tulajdonságon keresztül olyan függvényt, amit akkor hív meg, ha szerveroldali hiba történt. Az onXXXXX opciókhoz hasonlóan ezek is az XMLHttpRequest objektumot fogják megkapni egyetlen paraméterként. Az 1.4.0-s verzióban egy újfajta eseménykezelés került bevezetésre. Ha van olyan kódod amit mindig le kellene futtatni egy adott esemény kiváltódásakor, függetlenül attól, hogy melyik AJAX kérés váltotta azt ki, akkor az új Ajax.Responders objektumot tudod használni. Tegyük fel, hogy szeretnél valamiféle látványelemet használni arra, hogy a felhasználó felé jelezd azt, hogy az AJAX hívás folyamatban van. Ekkor két globális eseménykezelőt tudsz használni, az egyik megjeleníti az ikont az első hívás kezdetén, a másik pedig elrejtni amikor az utolsó válasz is megérkezett.

Na de lássuk a példát.

  <script>
  var myGlobalHandlers = {
  onCreate: function(){
  Element.show('systemWorking');
  },
  onComplete: function() {
  if(Ajax.activeRequestCount == 0){
  Element.hide('systemWorking');
  }
  }
  };
  Ajax.Responders.register(myGlobalHandlers);
  </script>

<img src='spinner.gif'>Loading...

Az eddigi példákban nem dolgoztuk fel a kapott XML választ, hanem csak egyszerűen beraktuk egy szövegdobozba. Valós környezetben először ki kell nyerni az értékes információt belőle majd néhány elemet az oldalon módosítani, vagy esetleg XSLT transzformáció segítségével HTML kimenetet produkálunk az oldal számára.

Erről bővebben az Ajax.Request és az options referenciákbál találhatsz.

Az Ajax.Updater osztály használata

Ha esetleg a szerver már HTML formában küldi a választ a kérésre, akkor a könyvtár Ajax.Updater osztályával könnyebbé teheti az életedet, hiszen ennek csak meg kell mondanod, hogy melyik elemet szeretnéd feltölteni az AJAX hívásra kapott HTML válasszal. De a példa beszédesebb, mint ahogy le tudnám írni.

  <script>
  function getHTML()
  {
  var url = 'http://yourserver/app/getSomeHTML';
  var pars = 'someParameter=ABC';
  var myAjax = new Ajax.Updater(
  'placeholder',
  url,
  {
  method: 'get',
  parameters: pars
  });
  }
  </script>
  <input type=button value=GetHtml onclick="getHTML()">

Észre lehet venni, hogy a kód nagyon hasonló az eddigi példákban találhatókhoz az onComplete függvény megadásának kivételével illetve a konstruktorban található elemazonosítóval. Na de változtassunk egy kicsit a kódon, hogy megnézzük miként is lehet a szerveroldali hibákat lekezelni. Ehhez meg kell adnunk egy, a már fentebb leírt opciót, ez pedig az onFailure. Ezenkívül azt is meghatározzuk, hogy a megadott placeholder csak abban az esetben kerüljön feltöltésre, ha a művelet sikeres volt. Ehhez az elsőnek átadott elemazonosító paraméter helyett egy objektumot kell átadni két tulajdonsággal: success (akkor hívódik meg ha minden sikeres volt) és failure (ez pedig akkor ha gond volt). De mi most nem fogjuk használni az failure tulajdonságot, hanem az onFailure tulajdonságban megadjuk a reportError függvényt.

  <script>
  function getHTML()
  {
  var url = 'http://yourserver/app/getSomeHTML';
  var pars = 'someParameter=ABC';
  var myAjax = new Ajax.Updater(
  {success: 'placeholder'},
  url,
  {
  method: 'get',
  parameters: pars,
  onFailure: reportError
  });
  }
  function reportError(request)
  {
  alert('Bocsi, ez nem jött össze.');
  }
  </script>
  <input type=button value=GetHtml onclick="getHTML()">

De akkor sem kell pánikba esni, ha a szerver HTML formátum helyett egy JavaScript kódot ad válaszként, mert az Ajax.Updater objektum ebben az esetben kiértékeli azt. Ahhoz, hogy az objektum a választ JavaScriptként kezelje, egyszerűen a tulajdonságok listájához hozzá kell adni az evalScripts: true; paramétert utolsóként az objektum konstruktorában.

Kiterjesztések a JavaScript osztályokhoz

Az egyik módja annak, hogy a prototype.js könyvtár új funkciókat biztosít számunkra az, hogy kiterjeszti a már meglévő JavaScript osztályokat.

Kiterjesztések az Object osztályhoz

Metódus

Típus

Paraméter

Leírás

extend(destination,

source)

Statikus

destination:

bármilyen

objektum, source:

bármilyen objektum

Az örököltetést valósítja meg oly módon,

hogy átmásolja a source összes

tulajdonságát és metódusát a destination

objektumba.

inspect(targetObj)

Statikus

targetObj:

bármilyen objektum

Szöveges, könnyen olvasható formában

reprezentálja a targetObj objektumot. Ez

adja meg az alapértelmezett visszatérési

értékét a toString függvénynek, ha az adott

objektumban nincs definiálva az inspect

példánymetódus.

Kiterjesztések az Number osztályhoz

Metódus	Típus	Paraméter	Leírás
ToColorpart()	Példány	Nincs	A számot hexadecimális formában adja vissza. Ez hasznos amikor az RGB komponenst a HTML reprezentációra akarjuk konvertálni.
Succ()	Példány	Nincs	A következő számot adja vissza, ez olyan esetben használható amikor iterátor van.
Times(iterator)	Példány	Iterator:egy Function(value,index) függvény objektum	Meghívja az iterator függvényt folyamatosan átadva neki a value és index paramétereket, ami az iterátor jelenlegi értékét és a aktuális indexét tartalmazza.

Kiterjesztések a Function osztályhoz

Metódus

Típus

Paraméter

Leírás

Bind(object)

Példány

Object: az objektum amely tartalmazza a metódust

Visszadja egy példányát a

függvénynek a függvényt(=

metódust) tartalmazó objektumból.

A visszaadott függvénynek

ugyanazon argumentumai lesznek,

mint az eredetinek volt.

BindAsEventListener

Példány

Object: objektum ami

tartalmazza a metódust