Jak poprawnie korzystać z AJAX w JavaScript

By /

JavaScript

AJAX (Asynchronous JavaScript and XML) to technika programowania webowego, która umożliwia stronom internetowym asynchroniczne przesyłanie danych do serwera i od serwera bez konieczności przeładowywania całej strony. Dzięki temu możemy tworzyć bardziej dynamiczne i responsywne aplikacje webowe. W tej lekcji przedstawimy, jak korzystać z AJAX w JavaScript, używając do tego celu XMLHttpRequest oraz fetch API.

Przykład użycia XMLHttpRequest

Struktura pliku HTML z JavaScript

Poniżej znajduje się prosty przykład kodu HTML zintegrowanego z JavaScript, który demonstruje, jak wykonać proste zapytanie AJAX za pomocą XMLHttpRequest.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX Example</title>
</head>
<body>

<button id="loadButton">Załaduj dane</button>
<div id="dataContainer"></div>

<script>
    // Pobranie elementów DOM
    const loadButton = document.getElementById('loadButton');
    const dataContainer = document.getElementById('dataContainer');

    // Funkcja wykonująca zapytanie AJAX
    function loadData() {
        const xhr = new XMLHttpRequest(); // Utworzenie nowego obiektu XMLHttpRequest
        xhr.open('GET', 'example.json', true); // Konfiguracja zapytania

        xhr.onload = function() {
            if (this.status === 200) {
                // Przetwarzanie odpowiedzi
                const response = JSON.parse(this.responseText);
                // Wyświetlanie danych w elemencie dataContainer
                dataContainer.innerHTML = `<p>${response.key}: ${response.value}</p>`;
            } else {
                // Obsługa błędów
                dataContainer.innerHTML = 'Nie udało się załadować danych';
            }
        };

        xhr.send(); // Wysłanie zapytania
    }

    // Nasłuchiwanie na kliknięcie przycisku i wywołanie funkcji loadData
    loadButton.addEventListener('click', loadData);
</script>

</body>
</html>

W tym przykładzie, po kliknięciu przycisku “Załaduj dane”, wykonywane jest asynchroniczne zapytanie do pliku example.json (który powinien znajdować się na serwerze). Odpowiedź serwera jest przetwarzana, a wynik wyświetlany jest w elemencie dataContainer.

AJAX w JavaScript umożliwia tworzenie dynamicznych i responsywnych aplikacji webowych, które mogą komunikować się z serwerem bez konieczności przeładowywania strony. Dzięki temu użytkownicy mogą cieszyć się płynniejszym i szybszym doświadczeniem podczas korzystania z aplikacji internetowych.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video JavaScript w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Powiązane artykuły

Scroll to Top