Ako na AJAX v PHP: Základy, ktoré posunú vaše weby na vyššiu úroveň

AJAX (Asynchronous JavaScript and XML) je technológia, ktorá umožňuje načítanie dát z webového servera bez nutnosti obnovy celej stránky. Umožňuje vytvárať dynamické aplikácie, ktoré poskytujú lepšiu používateľskú skúsenosť a znižujú záťaž servera. V tomto článku sa pozrieme na to, ako využiť AJAX v PHP na zlepšenie interaktivity a výkonu vašich webových stránok.

1. Čo je AJAX a prečo nie je potrebný full page reload

AJAX umožňuje asynchrónnu komunikáciu medzi klientom (prehliadačom) a serverom. Týmto spôsobom môžeme posielať a prijímať dáta bez toho, aby sa stránka musela znovu načítať. Tento proces sa vykonáva na pozadí, čím sa zlepšuje používateľský zážitok. Dnes je bežnou praxou pri implementácii chatovacích aplikácií, dynamických formulárov a interaktívnych elementov na stránkach.

Výhodou AJAXu je, že znižuje potrebu neustáleho načítavania celej stránky, čo šetrí šírku pásma a zvyšuje rýchlosť interakcie.

2. Príprava serverovej časti v PHP: Jednoduchá webová služba

Na serveri budete potrebovať PHP skript, ktorý spracuje požiadavky od používateľa. Tento skript môže pracovať s databázou, spracovávať dáta alebo poskytovať odpovede v JSON formáte. Ukážeme si príklad, ako vytvoriť jednoduchú webovú službu, ktorá vráti údaje na základe požiadavky od používateľa.

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

// Predstavte si, že tieto dáta môžeme získať z databázy
$data = array(
  "meno" => "Peter",
  "vek" => 30
);

// Odpoveď vo formáte JSON
echo json_encode($data);
?>

3. Volanie AJAXu vo JavaScripte: XMLHttpRequest, fetch API, jQuery .ajax

Na klientovi môžeme AJAX zavolať rôznymi spôsobmi. Tu sú tri hlavné metódy:

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.meno); // Peter
  }
};
xhr.send();
</script>

fetch API:

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

jQuery .ajax:

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

4. Spracovanie a zobrazenie odpovede (JSON, XML, plain text)

Odpoveď od servera môže byť v rôznych formátoch – najčastejšie JSON, XML alebo obyčajný text. JSON je najpopulárnejší formát, pretože je ľahko spracovateľný v JavaScripte.

Online kurz programovania v Jave

Programovanie nie je ťažké! Kódenie vlastných appiek v nástroji Java je veľká zábava. Do konca leta programujete vy sami alebo vaše bystré deti svoje prvé appky

Prvá hodina zadarmo!

7dňová výzva programovania Webu

Budete vedieť vytvárať pekné weby koncom budúceho týždňa? Áno, dá sa to! Radi vám s tým pomôžeme. Stačí prijať Sedemdňovú výzvu a rezervovať si tento kurz

Prvá hodina zadarmo!

Tu je príklad, ako spracovať odpoveď vo formáte JSON:

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

5. Príklad interaktívneho formulára alebo chatovacieho okna s AJAX funkciou

Teraz si ukážeme, ako vytvoriť jednoduchý interaktívny formulár, ktorý využíva AJAX na odosielanie a spracovanie údajov bez znovu načítania stránky.

<form id="myForm">
  Meno: <input type="text" id="meno" name="meno"><br>
  Vek: <input type="text" id="vek" name="vek"><br>
  <input type="submit" value="Odoslať">
</form>
<div id="response"></div>

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

  var formData = new FormData();
  formData.append("meno", document.getElementById("meno").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 = "Odoslané meno: " + data.meno;
  })
  .catch(error => console.error(error));
});
</script>

Záver

AJAX je kľúčovým nástrojom pre tvorbu dynamických, interaktívnych aplikácií. Pomocou PHP a JavaScriptu môžete vytvárať rýchle a efektívne aplikácie, ktoré nevyžadujú plné obnovenie stránky. Tento spôsob interakcie výrazne zlepšuje používateľskú skúsenosť a znižuje záťaž na serveri.

Chcete sa naučiť PHP a AJAX do hĺbky? Vyskúšajte náš kurz PHP – Programovanie dynamických webových stránok v PHP a úvod do AJAXu a získajte všetky potrebné zručnosti na tvorbu interaktívnych aplikácií.

Kurz UML - Základy jazyka UML v nástroji Enterprise Architect