AJAX i Komunikacja z Serwerem

INF.03.6 (3) — Asynchroniczne ładowanie danych i JSON

DefinicjaAsynchronous JavaScript and XML (AJAX)

AJAX to technika pozwalająca na wysyłanie i pobieranie danych z serwera w tle, bez przeładowywania całej strony, co umożliwia tworzenie dynamicznych interfejsów użytkownika. [web:31][web:37]

  • Asynchroniczność: operacja serwerowa działa w tle, nie blokując reszty kodu JavaScript.
  • API: w nowoczesnym JS komunikację sieciową realizuje się głównie za pomocą Fetch API. [web:30][web:31]

StandardFormat danych JSON

JSON (JavaScript Object Notation) to lekki tekstowy format wymiany danych, powszechnie używany w komunikacji klient–serwer. [web:36][web:39]

  • Składnia przypomina obiekty JS, ale wszystkie klucze są w cudzysłowach.
  • JS ma wbudowane metody:
    • JSON.parse(string) — tekst JSON → obiekt JS.
    • JSON.stringify(object) — obiekt JS → tekst JSON (np. do wysłania na serwer).

Przykład struktury JSON

{
  "id": 1,
  "tytul": "Podręcznik INF.03",
  "autor": "Jan Kowalski",
  "dostepny": true
}

Fetch APIAsynchroniczne pobieranie danych

Fetch API jest nowoczesnym interfejsem do wykonywania zapytań HTTP i zastępuje starszy obiekt XMLHttpRequest. [web:30][web:31]

Proste pobieranie danych (GET)

fetch('https://api.example.com/dane/1')
  .then(response => {
    // Sprawdzenie statusu odpowiedzi
    if (!response.ok) {
      throw new Error('Błąd HTTP ' + response.status);
    }
    return response.json(); // konwersja ciała na JSON
  })
  .then(dane => {
    document.getElementById('wynik').textContent = dane.tytul;
  })
  .catch(error => {
    console.error('Wystąpił błąd:', error);
  });

PonadpodstawoweMetody HTTP i wysyłanie danych (POST)

Aby wysłać dane na serwer, używa się innych metod HTTP (np. POST) i zazwyczaj przesyła dane w formacie JSON. [web:30][web:31]

const noweDane = { login: 'user1', email: 'u1@example.com' };

fetch('/api/rejestracja', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(noweDane)
})
  .then(response => response.json())
  .then(dane => console.log('Serwer odpowiedział:', dane.status));

ĆwiczenieZadania praktyczne

Zadanie 1: Wyświetlanie danych z fake API

Użyj publicznego API jsonplaceholder.typicode.com/todos/1, aby pobrać pojedyncze zadanie. [web:38]

document.getElementById('zad1-btn').addEventListener('click', () => {
    const display = document.getElementById('todo-display');
    display.textContent = 'Ładowanie...';

    fetch('https://jsonplaceholder.typicode.com/todos/1')
        .then(response => response.json())
        .then(dane => {
            display.textContent = 'Tytuł zadania: ' + dane.title;
        })
        .catch(error => {
            display.textContent = 'Błąd połączenia z API';
            console.error('Wystąpił błąd:', error);
        });
});

Zadanie 2: Formatowanie JSON i obsługa błędów

Rozszerz zadanie 1 o pełną obsługę błędów i kolorowy status ukończenia.

document.getElementById('zad1-btn').addEventListener('click', () => {
    const display = document.getElementById('todo-display');
    display.textContent = 'Ładowanie...';
    display.style.color = '#0b2338'; // reset koloru (taki jak --text)

    fetch('https://jsonplaceholder.typicode.com/todos/2')
        .then(response => {
            if (!response.ok) {
                throw new Error('Błąd HTTP: ' + response.status);
            }
            return response.json();
        })
        .then(dane => {
            display.textContent = 'Tytuł zadania: ' + dane.title;

            if (dane.completed) {
                display.style.color = 'green';
                display.textContent += ' (Ukończone)';
            } else {
                display.style.color = 'red';
                display.textContent += ' (Nieukończone)';
            }
        })
        .catch(error => {
            display.textContent = 'Błąd połączenia z API: ' + error.message;
            display.style.color = 'orange';
            console.error('Wystąpił błąd:', error);
        });
});

MateriałyNarzędzia i linki

  • MDN Web Docs: dokumentacja Fetch API. [web:30][web:31]
  • JSONPlaceholder: darmowe API do ćwiczeń. [web:38]
  • Asynchroniczność: hasła „JavaScript Promises then catch” i „async/await” w dokumentacji. [web:30][web:37]
Materiały: AJAX i Komunikacja z Serwerem · Opracowanie na podstawie wymagań INF.03