AJAX példa / minta feladat

A péla egy weboldalt mutat be, amely interaktív űrlapot használ a felhasználói adatok bekérésére, majd a válaszokat aszinkron módon jeleníti meg. A kód használatával a felhasználók megadhatják nevüket és foglalkozásukat, ezeket az adatokat pedig POST kéréssel küldik el a háttérszervernek. Az alábbiakban részletezem a kód működését.

<!DOCTYPE html> 
    <html lang="hu"> 
        <head> 
            <meta charset="UTF-8"> 
        </head> 
        <body> 
            <main> 
                <form id="data-form" method="POST" action="/data"> 
                    <label for="nev">Név:</label> 
                    <input type="text" id="nev" name="nev"> <br><br> 
                    <label for="foglalkozas">Foglalkozás:</label> 
                    <input type="text" id="foglalkozas" name="foglalkozas"> <br><br> 
                    <button id="get-data-btn">Kattints ide!</button> 
                </form> 
                <div id="data-container"></div> 
            </main> 
            <script> 
                const getDataBtn = document.getElementById('get-data-btn'); 
                const dataContainer = document.getElementById('data-container'); 
                var getDataFromServer = function(e) { 
                    e.preventDefault(); 
                    let nev = document.getElementById('nev'); 
                    let foglalkozas = document.getElementById('foglalkozas'); 
                    
                    let params = "nev=" + nev.value + "&foglalkozas=" + foglalkozas.value; 
                    let xhr = new XMLHttpRequest(); 
                    xhr.open("POST", "/data"); 
                    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); 
                    xhr.onload = function() { 
                            if (xhr.status === 200) { 
                                let data = JSON.parse(xhr.responseText); 
                                dataContainer.innerHTML = ` <p>Név: ${data.nev}</p><p>Foglalkozás:${data.foglalkozas}</p> `; 
                                console.log(data); 
                            } 
                        }; 
                    xhr.send(params); } 
                getDataBtn.addEventListener('click', getDataFromServer); 
            </script> 
        </body> 
    </html>

Kód működése

HTML Rész

Űrlap: Egy egyszerű űrlapot tartalmaz, amely lehetővé teszi a felhasználó számára, hogy megadja a nevét és foglalkozását.
Gomb: A "Kattints ide!" gomb megnyomásával az űrlap adatai POST módszerrel kerülnek elküldésre a "/data" URL-re.
Adatcontainer: Az eredmény megjelenítésére szolgál.

JavaScript Rész

XHR (XMLHttpRequest): Az űrlap adatainak küldésére használja a JavaScript XMLHttpRequest API-ját.
Eseményfigyelő: Az adatok elküldését a gomb megnyomásakor triggereli.
Adatfeldolgozás: Ha a válasz státusza 200 (sikeres), a válasz JSON formátumú, és a név és foglalkozás kiírásra kerül a dataContainer div-be.

JavaScript Logika

A JavaScript rész kezeli az űrlap adatait és kommunikál a szerverrel.

Eseményfigyelő

const getDataBtn = document.getElementById('get-data-btn');
getDataBtn.addEventListener('click', getDataFromServer);

A gomb (get-data-btn) eseményfigyelőt kap, amely a getDataFromServer funkciót hívja meg a gomb megnyomásakor.

Adatküldés

var getDataFromServer = function(e) {
    e.preventDefault(); // Megakadályozza az alapértelmezett űrlapküldést
    let nev = document.getElementById('nev');
    let foglalkozas = document.getElementById('foglalkozas');
    let params = "nev=" + nev.value + "&foglalkozas=" + foglalkozas.value;

e.preventDefault(): Megakadályozza az alapértelmezett űrlapküldési eseményt, hogy az oldal ne frissüljön.
Az űrlapmezők értékei kinyerésre kerülnek, majd egy URL-paraméter alapú stringgé formálódnak.

Aszinkron Kérés Készítése `

    xhr.open("POST", "/data");
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

xhr.open("POST", "/data"): Beállítja a kérést "POST" módszerrel és a /data URL-re irányul.
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'): Meghatározza a kérés típusát, amely azt jelzi a szervernek, hogy az adatokat URL-kódoló formátumban küldjük.

Válaszkezelés

xhr.onload = function() {
    if (xhr.status === 200) {
        let data = JSON.parse(xhr.responseText);
        dataContainer.innerHTML = `
            <p>Név: ${data.nev}</p>
            <p>Foglalkozás: ${data.foglalkozas}</p>
        `;
        console.log(data);
    }
};

xhr.onload: Az eseménykezelő, amely a kérés befejezésekor aktiválódik.
xhr.status === 200: Ellenőrzi, hogy a válasz sikeres volt-e (státusz kód 200).
JSON.parse(xhr.responseText): A válasz JSON formátuma alapján a válaszként kapott szöveget JavaScript objektummá alakítja.
dataContainer.innerHTML: Az adatokat megjeleníti a data-container div-ben. A kapott data objektumból kiolvassa a nevet és a foglalkozást, amelyeket HTML elemek szerkesztésével a felhasználó számára láthatóvá tesz.
console.log(data): A kapott adatokat a konzolra írja, ami hasznos lehet a hibakereséskor.

Kérés Küldése

xhr.send(params);

xhr.send(params): Elküldi a kéréshez rendelt paramétereket a szervernek.

Fejlesztési Lehetőségek

Hibakezelés: Az adatok elküldése során tesztelni kellene a válasz státuszát, és kezelni a lehetséges hibákat (pl. ha a szerver válasza nem 200).
Validáció: Ellenőrizd, hogy a mezők ki vannak-e töltve, mielőtt az adatokat elküldöd.
Modern API Használata: Érdemes lenne a fetch API-ra áttérni, mivel az egyszerűbb és olvashatóbb szintaxist kínál.

A fetch API használata egyszerűbbé és olvashatóbbá teszi az aszinkron kérések kezelését a JavaScript-ben. Az alábbi példa bemutatja, hogyan lehet a korábban említett űrlapot módosítani, hogy a fetch API-t használja.

A HTML kód változatlan marad, mivel a felhasználói felület és az űrlap felépítése nem változik.

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <main>
        <form id="data-form" method="POST" action="/data">
            <label for="nev">Név:</label>
            <input type="text" id="nev" name="nev" required><br><br>
            <label for="foglalkozas">Foglalkozás:</label>
            <input type="text" id="foglalkozas" name="foglalkozas" required><br><br>
            <button id="get-data-btn">Kattints ide!</button>
        </form>

        <div id="data-container"></div>
    </main>

    <script>
        const getDataBtn = document.getElementById('get-data-btn');
        const dataContainer = document.getElementById('data-container');

        var getDataFromServer = function(e) {
            e.preventDefault(); // Megakadályozza az alapértelmezett űrlapküldést

            let nev = document.getElementById('nev').value;
            let foglalkozas = document.getElementById('foglalkozas').value;

            // Ellenőrizd, hogy a mezők ki vannak-e töltve (opcionális)
            if (!nev || !foglalkozas) {
                alert('Kérlek, töltsd ki az összes mezőt!');
                return;
            }

            // URL-kódolt paraméterek létrehozása
            let params = new URLSearchParams();
            params.append('nev', nev);
            params.append('foglalkozas', foglalkozas);

            // Fetch API kérés
            fetch('/data', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: params
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`Hiba történt: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                // Megjeleníti a választ
                dataContainer.innerHTML = `
                    <p>Név: ${data.nev}</p>
                    <p>Foglalkozás: ${data.foglalkozas}</p>
                `;
            })
            .catch(error => {
                console.error('Hiba:', error);
                dataContainer.innerHTML = `<p>${error.message}</p>`;
            });
        }

        getDataBtn.addEventListener('click', getDataFromServer);
    </script>
</body>
</html>

Kód Magyarázata

Űrlap

A HTML űrlap változatlan marad, viszont érdemes a required attribútummal jelölni a mezőket, így a böngésző automatikusan ellenőrzi a kitöltést.

Fetch API

GET paraméterek: Az űrlapmezők értékeit kiolvassuk, és egy URLSearchParams objektumot hozunk létre az adatok URL-kódolt formátumának előállításához.

let params = new URLSearchParams();
params.append('nev', nev);
params.append('foglalkozas', foglalkozas);

Fetch kérés: A fetch API-t használjuk a POST kéréshez:

fetch('/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: params
})

JavaScript Logika

A JavaScript felelős az űrlap adataival való interakcióért és a szerverrel való kommunikációért.

<script>
    const getDataBtn = document.getElementById('get-data-btn');
    const dataContainer = document.getElementById('data-container');

getDataBtn: Az űrlap elküldő gomb elemének kiválasztása.
dataContainer: Az a div, amely az eredményeket tartalmazza.

Eseményfigyelő

var getDataFromServer = function(e) {
    e.preventDefault(); // Megakadályozza az alapértelmezett űrlapküldést

getDataFromServer: Az egyéni funkció, amely a gomb megnyomásakor hívódik meg.
e.preventDefault(): Megakadályozza az űrlap alapértelmezett viselkedését (azaz az oldal frissítését).

Adatok kinyerése

let nev = document.getElementById('nev').value;
let foglalkozas = document.getElementById('foglalkozas').value;

A felhasználó által megadott értékek kinyerése a név és foglalkozás mezőkből.

Validáció A kód ezen része biztosítja, hogy a felhasználó minden mezőt kitöltött-e, mielőtt az adatokat elküldené.

if (!nev || !foglalkozas) {
    alert('Kérlek, töltsd ki az összes mezőt!');
    return;
}

Az ellenőrzés a nev és foglalkozas változók értékét vizsgálja. Ha bármelyik üres, megjelenít egy figyelmeztető üzenetet, és megakadályozza a további feldolgozást a return utasítás segítségével.

Adatok URL-kódolása

let params = new URLSearchParams();
params.append('nev', nev);
params.append('foglalkozas', foglalkozas);

URLSearchParams: Ez a konstruktor objektum segít az adatok URL-kódolt formában történő előkészítésében.
params.append: A append metódus hozzáadja a név és foglalkozás értékét a params objektumhoz.

Fetch API Kérés

fetch('/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: params
})

Fetch használata: A fetch API-t hívjuk meg a /data URL-re, ahol a POST módszert alkalmazzuk.
headers: Beállítjuk a kérés fejlécét, amely megadja a tartalom típusát (URL-kódolt mezők).
body: Az elkészített params objektumot küldjük el a kérés törzsében.

Válaszkezelés

.then(response => {
    if (!response.ok) {
        throw new Error(`Hiba történt: ${response.status}`);
    }
    return response.json();
})

then(response => {...}): Az első then blokban kezeljük a választ. Az ok állapotot ellenőrizzük:

Ha sikertelen (pl. 404 vagy 500 státuszkód), hibát dobunk, amely leállítja a további feldolgozást.
Ha sikeres, a válasz JSON-re konvertálódik a response.json() metódussal.

Eredmény megjelenítése

.then(data => {
    dataContainer.innerHTML = `
        <p>Név: ${data.nev}</p>
        <p>Foglalkozás: ${data.foglalkozas}</p>
    `;
})

A második then blokkban a sikeresen lekért adatokat dolgozzuk fel. A válaszból kiolvassuk a nev és foglalkozas mezők értékeit.
dataContainer.innerHTML: Az adatokat a HTML-ben létrehozzuk dinamikusan, amely a dataContainer div-ben megjelenik a felhasználó számára.

Hibakezelés

.catch(error => {
    console.error('Hiba:', error);
    dataContainer.innerHTML = `<p>${error.message}</p>`;
});

catch blokk: Bármilyen hibát, amely a fetch kérés során felmerül, itt kezelünk. Ha a hiba lép fel, akkor a hibát a konzolra írjuk, és a felhasználónak egy üzenetet jelenítünk meg a dataContainer div-ben.
error.message: A hibaüzenet átadása, amely hasznos információt nyújt a felhasználónak.