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.