AJAX

AJAX (Asynchronous JavaScript and XML)

Az AJAX (Asynchronous JavaScript and XML) egy olyan technika, amely lehetővé teszi a weboldalak számára, hogy adatokat kérjenek le és küldjenek el a szerverre anélkül, hogy újratöltenék az oldalt. Az AJAX-kérések aszinkron módon futnak, ami azt jelenti, hogy az oldal más részei továbbra is működhetnek és válaszolhatnak a felhasználói interakciókra, miközben az adatok letöltése vagy feltöltése zajlik a háttérben.

Az AJAX HTTP-kéréseket használ (pl. GET, POST) az adatok lekérésére vagy küldésére egy szerverre. Az adatokat általában XML-ben vagy JSON-ben küldi vagy fogadja. Manapság a JSON formátum a leggyakrabban használt, mivel könnyebben kezelhető JavaScript-ben.

Alkalmazási területek:

• Dinamikus tartalom frissítése (pl. űrlapok validálása, táblázatok)
• Valós idejű keresési javaslatok (pl. autokomplett funkciók)
• Részleges oldal frissítések (pl. térképek, időjárás widgetek)

XMLHttpRequest

Ez az eredeti módszer az AJAX-kérések végrehajtására JavaScriptben. Támogatja a teljes körű AJAX-funkcionalitást, beleértve az adatok küldését és fogadását JSON-ben, XML-ben, szövegként stb. Az XMLHttpRequest használata kissé bonyolultabb lehet, mivel manuálisan kell kezelni a különböző eseményeket, például a kérelem állapotát és válaszát.

    const xhr = new XMLHttpRequest();
    xhr.open("GET", "https://api.example.com/data", true);
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(JSON.parse(xhr.responseText));
      }
    };
    xhr.send();

jQuery AJAX

A jQuery egy népszerű JavaScript könyvtár, amely egyszerűsíti az AJAX-hívások írását és egyéb DOM manipulációkat. A jQuery AJAX metódusai (pl. $.ajax, $.get, $.post) lehetővé teszik az AJAX kérések végrehajtását kevesebb kóddal és könnyebb szintaxissal, de ma már kevésbé használják az újabb alkalmazásokban.

  $.ajax({
    url: "https://api.example.com/data",
    method: "GET",
    success: function(data) {
      console.log(data);
    },
    error: function(error) {
      console.error('Error:', error);
    }
  });

Fetch API

A Fetch API az újabb és modernebb módja az AJAX-kérések végrehajtásának JavaScriptben. Egyszerűbb és olvashatóbb szintaxissal rendelkezik, mint az XMLHttpRequest, és visszaad egy ígéretet (Promise), amely lehetővé teszi a kód tisztább és könnyebben olvasható írását. A Fetch API alapértelmezésben aszinkron, és támogatja az összes HTTP-metódust.

 fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Axios

Az Axios egy ígéret-alapú HTTP kliens, amely számos extra funkciót biztosít az AJAX-hívásokhoz, mint például az automatikus JSON adatátalakítás, a lekérdezési paraméterek kezelésének megkönnyítése, és a központi hibakezelés.

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      axios.get('https://api.example.com/data')
        .then(function (response) {
          console.log(response.data);
        })
        .catch(function (error) {
          console.error('Error:', error);
        });
    </script>