Mire is jó az AJAX hívás lehetősége a WordPressben? Ezt fogjuk boncolgatni kicsit a következőkben. Weboldalunkon számos grafikai elem, stilisztikai elrendezésű szekció lehet, melyekben valamilyen tartalmat tudunk megjeleníteni a látogatók számára. Információközlés, interakció, naprakész adatok, egyfajta kommunikáció az olvasókkal. Egy hagyományos weblapon az űrlapok kitöltése és jóváhagyása után jellemzően a teljes oldal újratöltődik. Ez lassú, és egy teljes oldalbetöltést igényel, ami sokszor időigényes adatbázis-műveleteket vonz maga után, vagy egyéb szerver oldali adatmanipulációt.

Sokkal praktikusabb, ha lehetőség szerint az oldalunkon csupán 1-1 szekció, bekezdés vagy információs rész frissül be, kattintásunk nyomán, s ezáltal az adatforgalom is kevesebb, és gyorsabban megjelenik a frissített rész.

Ehhez kínál nagy segítséget az AJAX hívás lehetősége. De miről is van szó? Az AJAX elnevezés önmagában az Asynchronous Javascript and XML rövidítést takarja. Az XMLHttpRequest pedig egy API, amely böngészőkön belül elérhető olyan interpreteres nyelvben, mint például a JavaScript.

Arra használható, hogy HTTP/HTTPS protokollon keresztül direkt küldjünk kéréseket egy webszerver felé, aztán annak a válaszát közvetlenül visszakapjuk a hívást indító scriptben.

A Wikipédiáról bárki megtudhatja, hogy: „Az ’XMLHttpRequest’ objektumot eredetileg a Microsoft Outlook Web Access fejlesztői alkották meg Microsoft Exchange Server 2000-hez”.

A ma megtalálható szinte összes nagyobb közösségi, vagy hírportál használ valamilyen fajta aszinkron hívást megvalósító megoldást weboldalaikon.

Később az összes modern böngészőbe belekerült ennek támogatása, s innentől semmi nem állta útját annak, hogy kedvenc WordPressünkbe is belekerüljön ennek támogatása.

Példánkban egy nagyon egyszerű ’idézet-generátort’ fogunk összerakni az AJAX technika segítségével. Ennek alapját egy szimpla űrlap, némi javascript és egy – a WordPress témánk mappájában lévő – functions.php-ban elhelyezett függvény fogja szolgáltatni.

Fontos megjegyezni, hogy sokféle módon elő lehet állítani a végeredményt, azonban egy bevett módszer az űrlapos, vagy valamilyen interakciót szolgáló (pl. gomb, kép, kattintható) html elem, amelyre egy javascript eseményfigyelőt vezetékezünk, s mely indítani fogja – általában jQuery segítségével – az AJAX kérést a szerver felé.

Példánkban szereplő űrlap, mely minden gombnyomásra más idézettel tölti ki a fent lévő textarea elemet, az oldal újratöltése nélkül.

Vegyünk először a szerver-oldali php kódunkat, melyet most az egyszerűség kedvéért az oldal témájához tartozó mappában lévő functions.php-ben fogunk megvalósítani:

function poem_generator() {
$poems = array(
'Jó kertész, aki igazán nevel, tudja, hogy a magban minden benne van.',
'A bizonyosan tudható dolgok száma elenyésző azokéhoz képest…',
'Bármit tartogasson is a jövő, bármilyen döbbenetes …',
'Nem tudtam volna olyan férfihoz hozzámenni, akinek nem …',
'Ha nem fontos valaki, akkor azt se érdemli meg, hogy lássa…',
'Az ember egy kicsit olyan, mint a gyümölcs: az egyik túl …',
'Összeilleszted a cipzár két végét, megfogod a …',
'Az óra ugyanaz. De az idő már nem. Már kétféle idő van…'
);
echo json_encode( $poems[ rand(0, count($poems)-1) ] );
wp_die();
}

A függvény nagyon egyszerű, az idézetek végét itt az átláthatóság kedvéért levágtam. A lényeg, hogy a poems tömbben lévő elemek közül kiiratunk egy értéket (randomizálva bármelyik elemet), majd ezt becsomagoljuk a json_encode függvénnyel, ami a php számára egy beépített – nem WordPress-specifikus függvény. A JSON formátum egy Javascript Object Notation elnevezésű, asszociatív tömbbe szervezett adatformátum.

Megadhatnánk kulcsokat, és értékpárokat is, de a struktúra megértéséhez jöjjön segítségül ismét a Wikipédia: „…egy kis méretű, szöveg alapú szabvány, ember által olvasható adatcserére. A JavaScript szkriptnyelvből alakult ki egyszerű adatstruktúrák és asszociatív tömbök reprezentálására”.

Például:

$var = array( 'key1' => 'value1', 'key2' => 'value2' );
echo json_encode($var);
// Kimenet: {"key1":"value1","key2":"value2"}

Ne feledjük, ez lesz a szerver-oldali scriptünk, melyet a javascriptes AJAX hívás meg fog célozni. Nagyon fontos megemlítenünk, hogy a függvény végén lévő wp_die hívás fontos, nem szabad kifelejteni a végéről, máskülönben esetleg további függvények is lefutnak, melyek befolyásolják az AJAX –os futás végeredményét.

Tehát megvan a függvényünk, és ezt regisztrálnunk kell a WordPress számára, hogy ismerje, mint lehetséges ajax-os célpontot. Ezt meg is tesszük a következő sorokkal:

add_action( 'wp_ajax_poem_generator', 'poem_generator' );
add_action( 'wp_ajax_nopriv_poem_generator', 'poem_generator' );

Azért szükséges mindkét hívás, mert a ’nopriv névvel a nem-bejelentkezett felhasználók számára is elérhetővé tesszük a függvényt.

Említést érdemel még a tény, hogy a későbbiekben a javascript hívásunkban a ’wp_ajax/wp_ajax_nopriv’ előtagot nem kell használnunk, csak az utána következő karakter láncot, a függvényünk neve pedig bármi lehet, a szokásos függvénynevek szabályain belül.

Regisztráltuk tehát a szerver oldali függvényt, most következzék az egyszerű űrlap, melyet itt egy short_code formájában ejtünk meg.

function wp_poem_form() {
$form = '<form id="ajax-form" data-ajax="'.(site_url()."/wp-admin/admin-ajax.php").'">';
$form .= ' <textarea id="poems"></textarea>';
$form .= ' <input type="button" id="do_ajax_stuff" value="Generálj idézetet">';
$form .= '</form>';
return $form;
}
// register shortcode
add_shortcode('poem_form', 'wp_poem_form');

A függvény egy faék egyszerűségével vetekszik, de a szemléltető példához tökéletesen elegendő. Egy űrlap, melyben egy darab textarea és egy button található, s melynek érdekessége, hogy magának a tagnak lesz egy „data-ajax” attribútuma, melyből később a javascript kinyeri az elérési útvonalat, mellyel az AJAX hívás célját állítjuk be.

Regisztráltuk tehát a szerver oldali scriptünket, valamint a shortcode-unkat, most már csak a Javascript függvény hiányzik, mely implementálja az AJAX hívást.

Lássuk hát:

jQuery(document).ready(function() {
jQuery('#do_ajax_stuff').click(function(){
var ajax_url = jQuery('#ajax-form').attr('data-ajax');
console.log(ajax_url);
jQuery.ajax({
type: 'POST',
url: ajax_url,
dataType: 'json',
data: {
action:'poem_generator',
},
success: function(data) {
jQuery('#poems').val(data);
}
});
})
});

Ezt a függvényt elmentjük „poem_generator.js” néven, és az aktív témához tartozó gyökérmappában helyezzük el, majd szintén az itt található functions.php-ból be is hívjuk. (figyelem: szükség esetén lehetséges, hogy külön a jQuery keretrendszert is be kell includeolni, itt most egyben látjuk a kettőt.

wp_enqueue_script('jquery');
wp_enqueue_script('poem_generator', get_stylesheet_directory_uri().'/poem_generator.js');

(ezen függvény hívások helye ugyanúgy, egy helyre, a functions.php-ba kerülnek, általában folytatólagosan, a fálj végétől).

A JS függvényünkben láthatjuk, hogy a form-hoz tartozó gomb-ra kötöttük rá az eseményfigyelőnket („do_ajax_stuff.click()”) és mindösszesen annyit csinálunk, hogy egy JSON formátumú adatszerkezetet átküldünk, melynek egy darab asszociatív eleme van: az action kulcs, melynek értéke az előzetesen WordPress alá beregisztrált „poem_generator” függvény. A hívó innen tudja, hogy az adott url-en melyik „akciót” keresse úgymond. Hely és idő hiányában nem részletezném túlzottan a jQuery ajax() függvényét, viszont érdemes alaposan tanulmányozni a dokumentációját, mert temérdek paraméterrel, hibakezeléssel és egyéb lehetőségekkel van felruházva.

Amennyiben mindent jól raktunk össze, egy próba oldalon meghívjuk a shortcodeunkat ( admin->oldalak->új oldal -> szövegszerkesztővel beilleszt: „[poem_form]”) , a gombot megnyomva láthatjuk, hogy a textareában cserélődnek az idézetek. A kód persze lehetne sokkal bonyolultabb és szofisztikáltabb is, s érdemes megemlíteni, hogy abban az esetben, ha az AJAX hívás egyéb változókat is át kíván vinni, akkor azokat mind a _POST tömbben fogjuk megtalálni.

Manapság szinte megkerülhetetlen ez a javascriptes technika, de nagyban megkönnyíti az interakciót weboldalunkon, arról nem is beszélve, hogy az oldal betöltését is felgyorsítja. Használjuk tehát bátran ezt a technikát mi is.