7.07. Ajax hívások

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:

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

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 )

  1. <!doctype html>
  2. <html lang="hu">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Ajax 1. példa</title>
  6. </head>
  7. <style>
  8. .gomb{
  9. border: ridge 3px grey;
  10. background-color: grey;
  11. text-align: center;
  12. color: white;
  13. width: 100px;
  14. }
  15. .kotelezo{
  16. color: red;
  17. }
  18. #msg{
  19. display: none;
  20. color: red;
  21. }
  22. .adat{
  23. display: none;
  24. border:1px solid blue;
  25. }
  26. </style>
  27. <script src="jquery-3.6.0.min.js"></script>
  28. <body>
  29. Kérek egy sorszámot: <input id="no" value="" title="sorszámot kérek"><span class="kotelezo">*</span>
  30. <br/>
  31. <span id="msg" class="kotelezo"></span>
  32. <div id="katt" class="gomb">Kattints ide</div>
  33. <table>
  34. <tr>
  35. <td id="nev" class="adat"></td>
  36. <td id="lakcim" class="adat"></td>
  37. </tr>
  38. </table>
  39. <!-- itt hívom meg a javascript kódot -->
  40. <script src="pelda1.js"></script>
  41. </body>
  42. </html>

A javascript kód (pelda1.js)

  1. $(document).ready(function(){
  2.  
  3. //Eseménykezelő: ha a beviteli mezőre kattintunk, akkor álljon vissza a felület
  4. $("#no").click(function(){
  5. var m =$("#msg");
  6. m.hide(1000);
  7. $(".adat").hide(1000);
  8. });
  9.  
  10. //A küldés eseménykezelője
  11. $("#katt").click(function(){
  12. var id = $("#no").val();
  13. var m = $("#msg");
  14. //ellenőrzöm, hogy a bevitt adat megfelel-e a feltételeknek: validálás
  15. if( (id.length < 1 || !$.isNumeric(id) || parseInt(id) < 1) ){
  16. m.html("0-nál nagyobb egész számot kell beírni!");
  17. m.show(1000);
  18. }else{
  19. m.html("ok");
  20. m.css("color","green");
  21.  
  22. // AJAX hívás
  23. $.ajax({
  24. url: "pelda1.php?id="+id,
  25. method: "GET",
  26. }).done(function(data){
  27.  
  28. //Egyszerű stringet kapok vissza eredményül
  29. var a = data.split(",");
  30. $("#nev").html( a[0] );
  31. $("#lakcim").html( a[1] );
  32. $(".adat").show(1000);
  33. }).fail(function(){
  34. m.text("szerver oldali hiba!");
  35. m.show(1000);
  36. });
  37. // AJAX vége
  38. } // if-else vége
  39. }); // Eseménykezelő vége
  40.  
  41. //Kurzor legyen mutató, amikor a gomb fölé viszem
  42. $("#katt").hover(function(){
  43. $(this).css("cursor", "pointer");
  44. }, function(){
  45. $(this).css("pointer", "initial");
  46. });
  47. });

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 >-&& $idcount($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 )

  1. <!doctype html>
  2. <html lang="hu">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Ajax 1. példa</title>
  6. </head>
  7. <style>
  8. .gomb{
  9. border: ridge 3px grey;
  10. background-color: grey;
  11. text-align: center;
  12. color: white;
  13. width: 100px;
  14. }
  15. .kotelezo{
  16. color: red;
  17. }
  18. #msg{
  19. display: none;
  20. color: red;
  21. }
  22. .adat{
  23. display: none;
  24. border:1px solid blue;
  25. }
  26. </style>
  27. <script src="jquery-3.6.0.min.js"></script>
  28. <body>
  29. Kérek egy sorszámot: <input id="no" value="" title="sorszámot kérek"><span class="kotelezo">*</span>
  30. <br/>
  31. <span id="msg" class="kotelezo"></span>
  32. <div id="katt" class="gomb">Kattints ide</div>
  33. <table>
  34. <tr>
  35. <td id="nev" class="adat"></td>
  36. <td id="lakcim" class="adat"></td>
  37. </tr>
  38. </table>
  39. <!-- itt hívom meg a javascript kódot -->
  40. <script src="pelda2.js"></script>
  41. </body>
  42. </html>

Javascript kód (pelda2.js)

  1. $(document).ready(function(){
  2. //eseménykezelők
  3. $("#no").click(function(){
  4. var m =$("#msg");
  5. m.hide(1000);
  6. $(".adat").hide(1000);
  7. });
  8.  
  9. //a küldés eseménykezelője
  10. $("#katt").click(function(){
  11. var id = $("#no").val();
  12. var m = $("#msg");
  13. if( (id.length < 1 || !$.isNumeric(id) || parseInt(id) < 1) ){
  14. m.html("0-nál nagyobb egész számot kell beírni!");
  15. m.show(1000);
  16. }else{
  17. m.html("ok");
  18. m.css("color","green");
  19.  
  20. // AJAX hívás
  21. $.ajax({
  22. url: "pelda2.php?id="+id,
  23. method: "GET",
  24. }).done(function(data){
  25.  
  26. //JSON adatokat kap vissza
  27. $("#nev").html( data.nev );
  28. $("#lakcim").html( data.lakhely);
  29. $(".adat").show(1000);
  30. }).fail(function(){
  31. m.text("szerver oldali hiba!");
  32. m.show(1000);
  33. });
  34. //AJAX vége
  35. }
  36. });
  37.  
  38. //Kurzor legyen mutató, amikor a gomb fölé viszem
  39. $("#katt").hover(function(){
  40. $(this).css("cursor", "pointer");
  41. }, function(){
  42. $(this).css("pointer", "initial");
  43. });
  44. });

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 >-&& $idcount($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.