7.07. Ajax hívások

Default book

Ajax (Asynchronous JavaScript and XML) - aszinkron javascript és XML kommunikáció

Az AJAX a webes kliens böngésző és a webszerver közötti kommunikáció. A kommunikáció menete:

  • A böngészőn futó webalkalmazás egy URL-en keresztül meghív a szerveren egy erőforrást - paraméterek átadásával - , GET vagy POST metódussal.

  • A szerver oldalon a hívás hatására lefut valamilyen szerveroldali alkalmazás, amely a kimenetén visszaküldi a választ. A válasz általában néhány tucat byte, struktúrálatlanul (szerkezet néélküli string) vagy struktúrában (XML, JSON, stb... szerkezetű string)

  • A böngészőn futó webalkalmazás visszakapja a szervertől visszaküldött adatokat, az adatokat feldolgozza és beilleszti a weboldal megfelelő helyére (DOM-ba)

Aszinkron működés: Ez azt jelenti, hogy az AJAX hívás indításakor a böngészőben futó folyamatok tovább haladnak és az AJAX hívás eredményének a feldolgozása akkor kezdődik, amikor vagy a válasz érkezik vissza a szervertől vagy a a hibakód. A hibakód lehet 404-es hiba (Nem létezik az URL), 50x hiba (Szerver oldali hiba)

Az AJAX története röviden: Már a 90-es években felmerült annak az igénye, hogy weboldalak kérjenek le adatokat szervertől és annak alapján működjenek tovább. ezt eredetileg a Microsoft JAVA appletek segítségével oldotta meg. Az Internet Explorer 5.0-val építettek a böngészőbe egy XMLHttpRequest nevű objektumot, amely már önmaga volt képes ezt megvalósítani. Az AJAX kifejezés 2005-ben jelent meg először széles körben.

Az IE 6.0 után a firefox és később a többi elterjedt böngésző is elkészítette a maga változatát és a javascript szabványos részévé tették az AJAX lehetőséget.

A jQuery az AJAX hívásokat szabványosítja és olyan megfelelő adatstruktúrát kínál, ami alapján viszonylag könnyen lehet a szükséges kódot megírni.

$.ajax(paraméterobjektum); - ezt az utasítást kell használni a szerver felé. Egyszerűnek látszik, de azért paraméterezni kell:

$.ajax({
    url: A meghívandó url,
    method: "POST",            // vagy "GET" - ha get, akkor nem lehet tetszőleges méretű adatokat átküldeni
    data: { nev1:"adat1", nev2: "adat2", ...},
    dataType: "html",          // Lehet még "json", "script", vagy nem adunk meg típust...
}).done(function( data ){      // Ez fut le, ha hiba nélkül visszajön az adat
                               // ... itt fut le az a kód, amely feldolgozza a szervertől visszakapott adatokat...
})
.fail( function( ){            //Itt fut le az a kód, amely hiba esetén üzen a felhasználónak
   
});

Az alábbi példákban a HTML, a javascript és a szerver oldali PHP kód majdnem ugyanaz.

1. Példa

Ebben a példában egy weboldalon rákattint a felhasználó egy <div>-re és ennek hatására egy másik adatrészbe betöltődik néhány adat. A böngésző egy ID-t küld át GET-tel. A szerver oldal a GET alapján nevet, lakcímet küld vissza ";"-vel elválasztott stringként. A visszakapott stringet a böngésző szétdarabolja és beteszi az elemeket e WEBoldal mezőibe.

HTML kód (pelda1.html )

<!doctype html>
<html lang="hu">
 <head>
  <meta charset="UTF-8">
  <title>Ajax 1. példa</title>
 </head>
 <style>
	.gomb{
	  border: ridge 3px grey;
	  background-color: grey;
	  text-align: center;
	  color: white;
	  width: 100px;
	}
	.kotelezo{
	   color: red;
	}
	#msg{
    	display: none;
		color: red;
	}
	.adat{
		display: none;
		border:1px solid blue;
	}
 </style>
 <script src="jquery-3.6.0.min.js"></script>
 <body>
  Kérek egy sorszámot: <input id="no" value="" title="sorszámot kérek"><span class="kotelezo">*</span>
  <br/>
  <span id="msg" class="kotelezo"></span>
  <div id="katt" class="gomb">Kattints ide</div>
  <table>
  <tr>
  <td id="nev" class="adat"></td>
  <td id="lakcim" class="adat"></td>
  </tr>
  </table>
   <!-- itt hívom meg a javascript kódot -->
  <script src="pelda1.js"></script>
 </body>
</html>

A javascript kód (pelda1.js)

$(document).ready(function(){

    //Eseménykezelő: ha a beviteli mezőre kattintunk, akkor álljon vissza a felület
    $("#no").click(function(){
        var m =$("#msg");
        m.hide(1000);
        $(".adat").hide(1000);
    });

    //A küldés eseménykezelője
    $("#katt").click(function(){
        var id = $("#no").val();	
        var m  = $("#msg");
        //ellenőrzöm, hogy a bevitt adat megfelel-e a feltételeknek: validálás
        if( (id.length < 1 || !$.isNumeric(id) || parseInt(id) < 1) ){
            m.html("0-nál nagyobb egész számot kell beírni!");
            m.show(1000);			
        }else{
            m.html("ok");
            m.css("color","green");

           // AJAX hívás
            $.ajax({
                url: "pelda1.php?id="+id,
                method: "GET",
            }).done(function(data){

               //Egyszerű stringet kapok vissza eredményül
                var a = data.split(",");
                $("#nev").html( a[0] );
                $("#lakcim").html( a[1] );
                $(".adat").show(1000);
            }).fail(function(){
                m.text("szerver oldali hiba!");
                m.show(1000);
            });	
           // AJAX vége
        } // if-else vége
    }); // Eseménykezelő vége

    //Kurzor legyen mutató, amikor a gomb fölé viszem
    $("#katt").hover(function(){
        $(this).css("cursor", "pointer");
    }, function(){
        $(this).css("pointer", "initial");
    });
});

PHP kód (file: pelda1.php)

<?php
$a = array(
   1=> array("nev"=> "Kiss Pista", "lakhely"=>"Budapest"),
   2=> array("nev"=> "Nagy Piri", "lakhely" =>"Piripócstarcsa"),
   3=> array("nev"=> "Kis Edina", "lakhely"=>"Bélapátfalva"),
   4=> array("nev"=> "Nagy Alexandru", "lakhely"=>"Nyusziváros"),
   5=> array("nev"=> "Kovács Géza", "lakhely"=>"Kajla város"),
   6=> array("nev"=> "Jani bá", "lakhely"=>"Ilyenolyan puszta"),
   7=> array("nev"=> "Fábián Ági", "lakhely"=>"Budapest"),
   8=> array("nev"=> "fábián Dániel", "lakhely"=>"Zürich"),
);
$id = isset($_GET['id']) && !empty($_GET["id"]) ? $_GET["id"] :-1;

if($id >-1 && $id< count($a)){
	$j = $a[ $id ];
}else{
	$j = array("nev" => "Nem létező", "lakhely" => "Ismeretlen");
}
// Stringet ad vissza eredményül. Az egyes részeket "," -vel fűzi össze
$back = $j["nev"] . "," . $j["lakhely"];
echo $back;
?>

2. Példa

A második példában egy weboldalon rákattint a felhasználó egy <div>-re és ennek hatására egy másik adatrészbe betöltődik néhány adat. A böngésző egy ID-t küld át GET   metódussal. A szerver oldalon a GET alapján kikeresi a megfelelő nevet és címet, json-t alakít belőle és az így létrejött stringet küldi vissza. 

A visszakapott JSON adatokat a böngésző visszaalakítja objektummá és beteszi a weboldalon a megfelelő helyre.

HTML kód ( pelda2.html )

<!doctype html>
<html lang="hu">
 <head>
  <meta charset="UTF-8">
  <title>Ajax 1. példa</title>
 </head>
 <style>
    .gomb{
        border: ridge 3px grey;
        background-color: grey;
        text-align: center;
        color: white;
        width: 100px;
    }
    .kotelezo{
        color: red;
    }
    #msg{
        display: none;
        color: red;
    }
    .adat{
        display: none;
        border:1px solid blue;
    }
 </style>
 <script src="jquery-3.6.0.min.js"></script>
 <body>
  Kérek egy sorszámot: <input id="no" value="" title="sorszámot kérek"><span class="kotelezo">*</span>
  <br/>
  <span id="msg" class="kotelezo"></span>
  <div id="katt" class="gomb">Kattints ide</div>
  <table>
  <tr>
  <td id="nev" class="adat"></td>
  <td id="lakcim" class="adat"></td>
  </tr>
  </table>
<!-- itt hívom meg a javascript kódot -->
  <script src="pelda2.js"></script>
 </body>
</html>

Javascript kód (pelda2.js)

$(document).ready(function(){
    //eseménykezelők
    $("#no").click(function(){
        var m =$("#msg");
        m.hide(1000);
        $(".adat").hide(1000);
    });

    //a küldés eseménykezelője
    $("#katt").click(function(){
        var id = $("#no").val();	
        var m  = $("#msg");
        if( (id.length < 1 || !$.isNumeric(id) || parseInt(id) < 1) ){
            m.html("0-nál nagyobb egész számot kell beírni!");
            m.show(1000);			
        }else{
            m.html("ok");
            m.css("color","green");

           // AJAX hívás
            $.ajax({
                url: "pelda2.php?id="+id,
                method: "GET",
            }).done(function(data){

                //JSON adatokat kap vissza
                $("#nev").html( data.nev );
                $("#lakcim").html( data.lakhely);
                $(".adat").show(1000);
            }).fail(function(){
                m.text("szerver oldali hiba!");
                m.show(1000);
            });	
           //AJAX vége
        }
    });

    //Kurzor legyen mutató, amikor a gomb fölé viszem
    $("#katt").hover(function(){
        $(this).css("cursor", "pointer");
    }, function(){
        $(this).css("pointer", "initial");
    });
});

A szerver oldali PHP kód (pelda2.php )

<?php
$a = array(
   1=> array("nev"=> "Kiss Pista", "lakhely"=>"Budapest"),
   2=> array("nev"=> "Nagy Piri", "lakhely" =>"Piripócstarcsa"),
   3=> array("nev"=> "Kis Edina", "lakhely"=>"Bélapátfalva"),
   4=> array("nev"=> "Nagy Alexandru", "lakhely"=>"Nyusziváros"),
   5=> array("nev"=> "Kovács Géza", "lakhely"=>"Kajla város"),
   6=> array("nev"=> "Jani bá", "lakhely"=>"Ilyenolyan puszta"),
   7=> array("nev"=> "Fábián Ági", "lakhely"=>"Budapest"),
   8=> array("nev"=> "fábián Dániel", "lakhely"=>"Zürich"),
);
$id = isset($_GET['id']) && !empty($_GET["id"]) ? $_GET["id"] :-1;

if($id >-1 && $id< count($a)){
    $j = $a[ $id ];
}else{
    $j = array("nev" => "Nem létező", "lakhely" => "Ismeretlen");
}

//JSON stringet készítünk az adatokból
$back = json_encode($j) ;
echo $back;
?>

A fenti példák fájljait innen lehet letölteni: ajax1.zip

Megjegyzések

  • A fenti példák éles környezetben nem lennének elég jók, mert a böngészőből átküldött adatokat ugyan leellenőrzöm a szerver oldalon, de nem biztos, hogy mindenre gondoltam.
  • Ha POST metódust akarunk használni, akkor a javascript AJAX hívásánál "GET" helset "POST"-ot és a PHP kódban a $_GET helyett $_POST-ot kell használni.
  • A szerver oldalon legyártottam egy két dimenziós tömböt és abban tárolom az adatokat. Ha egy adatbázisból kellene dolgozni, akkor a szerver a kapott ID-vel lekérdezést hajt végre az SQL szerverre és a visszakapott rekord-ot teszi be a json_encode() függvénybe. Ha nincsen visszaadott rekord, akkor pedig a megfelelő hibaüzenetet kell legyártani.