Jak na AJAX v PHP: Základy, které posunou vaše weby na vyšší úroveň

AJAX (Asynchronous JavaScript and XML) je technologie, která umožňuje načítání dat z webového serveru bez nutnosti znovu načítat celou stránku. Umožňuje vytvářet dynamické aplikace, které poskytují lepší uživatelský zážitek a snižují zátěž serveru. V tomto článku se podíváme na to, jak využít AJAX v PHP pro zlepšení interaktivity a výkonu vašich webových stránek.

1. Co je AJAX a proč není nutný full page reload

AJAX umožňuje asynchronní komunikaci mezi klientem (prohlížečem) a serverem. Tento způsob nám umožňuje posílat a přijímat data, aniž by bylo nutné znovu načítat celou stránku. Tento proces probíhá na pozadí, což zlepšuje uživatelskou zkušenost. Dnes je běžnou praxí při implementaci chatovacích aplikací, dynamických formulářů a interaktivních prvků na stránkách.

Výhodou AJAXu je, že snižuje potřebu neustálého načítání celé stránky, což šetří šířku pásma a zvyšuje rychlost interakce.

2. Příprava serverové části v PHP: Jednoduchá webová služba

Na serveru budete potřebovat PHP skript, který zpracuje požadavky od uživatele. Tento skript může pracovat s databází, zpracovávat data nebo poskytovat odpovědi ve formátu JSON. Ukážeme si příklad, jak vytvořit jednoduchou webovou službu, která vrátí data na základě požadavku od uživatele.

<?php
// api.php
header('Content-Type: application/json');

// Představte si, že tato data získáváme z databáze
$data = array(
  "jmeno" => "Petr",
  "vek" => 30
);

// Odpověď ve formátu JSON
echo json_encode($data);
?>

3. Volání AJAXu v JavaScriptu: XMLHttpRequest, fetch API, jQuery .ajax

Na klientské straně můžeme AJAX volat různými způsoby. Zde jsou tři hlavní metody:

XMLHttpRequest:

<script>
var xhr = new XMLHttpRequest();
xhr.open("GET", "api.php", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var response = JSON.parse(xhr.responseText);
    console.log(response.jmeno); // Petr
  }
};
xhr.send();
</script>

fetch API:

<script>
fetch("api.php")
  .then(response => response.json())
  .then(data => console.log(data.jmeno)) // Petr
  .catch(error => console.error(error));
</script>

jQuery .ajax:

<script>
$.ajax({
  url: 'api.php',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    console.log(data.jmeno); // Petr
  },
  error: function(xhr, status, error) {
    console.error(error);
  }
});
</script>

4. Zpracování a zobrazení odpovědi (JSON, XML, plain text)

Odpověď od serveru může být v různých formátech – nejčastěji JSON, XML nebo obyčejný text. JSON je nejběžnější formát, protože je snadno zpracovatelný v JavaScriptu.

Ukázka, jak zpracovat odpověď ve formátu JSON:

<script>
fetch("api.php")
  .then(response => response.json())
  .then(data => {
    document.getElementById("jmeno").innerText = data.jmeno;
  })
  .catch(error => console.error(error));
</script>
<div id="jmeno"></div>

5. Příklad interaktivního formuláře nebo chatovacího okna s AJAX funkcí

Ukážeme si, jak vytvořit jednoduchý interaktivní formulář, který využívá AJAX k odesílání a zpracování dat bez znovu načítání stránky.

<form id="myForm">
  Jméno: <input type="text" id="jmeno" name="jmeno"><br>
  Věk: <input type="text" id="vek" name="vek"><br>
  <input type="submit" value="Odeslat">
</form>
<div id="response"></div>

<script>
document.getElementById("myForm").addEventListener("submit", function(e) {
  e.preventDefault();

  var formData = new FormData();
  formData.append("jmeno", document.getElementById("jmeno").value);
  formData.append("vek", document.getElementById("vek").value);

  fetch("api.php", {
    method: "POST",
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    document.getElementById("response").innerText = "Odeslané jméno: " + data.jmeno;
  })
  .catch(error => console.error(error));
});
</script>

Závěr

AJAX je klíčovým nástrojem pro vytváření dynamických, interaktivních aplikací. Pomocí PHP a JavaScriptu můžete vytvářet rychlé a efektivní aplikace, které nevyžadují plné obnovení stránky. Tento způsob interakce výrazně zlepšuje uživatelský zážitek a snižuje zátěž na serveru.

Chcete se naučit PHP a AJAX do hloubky? Vyzkoušejte náš kurz PHP – Programování dynamických webových stránek v PHP a úvod do AJAXu a získejte všechny potřebné dovednosti pro tvorbu interaktivních aplikací.

Viac informacií preberáme na kurze:

Kurz PHP - Programování dynamických webových stránek v PHP a úvod do AJAXu

Marián Knězek