Ajax
Főnév
Ajax (tsz. Ajaxes)
- (informatika) AJAX (Asynchronous JavaScript and XML) egy webfejlesztési technika, nem önálló nyelv! Lehetővé teszi, hogy egy weboldal aszimmetrikusan (háttérben) kérjen le adatokat a szerverről anélkül, hogy az oldalt újra kellene tölteni.
👉 Eredmény: interaktívabb, gyorsabb weboldalak → pl. Google Maps, Gmail, modern webappok.
🌟 Alapötlet
Normál működés:
- Ha egy űrlapot elküldesz, az egész oldal újratöltődik.
AJAX esetén:
- JavaScript kód a háttérben aszinron HTTP kérést küld a szerver felé.
- A válasz (adat, pl. JSON, XML, HTML töredék, szöveg) megérkezik.
- A JavaScript manipulálja a DOM-ot → az oldal részlegesen frissül → nincs reload.
🏗 Mire használják?
✅ Űrlap beküldés oldalfrissítés nélkül ✅ Dinamikus tartalom betöltés (pl. végtelen görgetés) ✅ Auto-complete (pl. keresősáv) ✅ Chat alkalmazások ✅ Live adatok (pl. részvényárfolyam, időjárás frissítése)
📝 AJAX alap példa (klasszikus XMLHttpRequest)
<button onclick="loadData()">Load data</button>
<div id="output"></div>
<script>
function loadData() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.txt', true);
xhr.onload = function() {
if (xhr.status === 200) {
document.getElementById('output').innerHTML = xhr.responseText;
}
};
xhr.send();
}
</script>
Magyarázat:
- XMLHttpRequest → klasszikus AJAX API
- GET kérést küldünk
data.txtfelé - Onload → ha válasz jött, beírjuk a
div-be - Az oldal maga nem frissül, csak a
divtartalma.
🔑 Modern AJAX: fetch API (újabb, egyszerűbb)
fetch('data.txt')
.then(response => response.text())
.then(data => {
document.getElementById('output').innerHTML = data;
})
.catch(error => console.error('Error:', error));
👉 fetch() API → modern AJAX alternatíva, egyszerűbb, promisekkel működik.
🌐 Formátumok
- JSON → a leggyakoribb manapság
- XML → régebbi időkben
- HTML töredék
- Plain text
🔄 AJAX fő előnyei
✅ Felhasználói élmény javul → gyors, gördülékeny oldal ✅ Csökkenti a szerver terhelést → csak adatfrissítés, nem teljes oldal ✅ Aszinkron feldolgozás → nem blokkolja a fő thread-et ✅ Részleges DOM frissítés
⚠️ AJAX hátrányok / buktatók
⚠️ Komplexitás nő → state management ⚠️ SEO (keresőrobotok nem mindig látják a dinamikus tartalmat) ⚠️ Hibakezelés fontos (pl. hálózati hiba, timeout) ⚠️ CORS (Cross-Origin Resource Sharing) problémák lehetnek
TL;DR
AJAX:
- Nem nyelv, hanem technika
- Weboldalak háttérben kérnek le adatokat → nincs reload
- XMLHttpRequest vagy modern fetch()
- Ma inkább JSON + fetch() + async/await
- Kulcs: gyors, interaktív felhasználói élmény