PHP Ajax výukový program s příkladem

Od: Fiona Brownová Fiona Brownová
Hours aktualizováno

⚡ Chytré shrnutí

Ajax v PHP umožňuje webové stránce vyměňovat si malé objemy dat se serverem a aktualizovat část stránky bez úplného opětovného načtení. Tento návod vytváří vyhledávání v živém frameworku a vysvětluje klasický přístup XMLHttpRequest a moderní alternativu Fetch API.

  • 🔄 Co je Ajax: Ajax, asynchronní JavaSkript a XML aktualizují část stránky výměnou dat se serverem bez úplné aktualizace.
  • ⚡ Proč to používat: Ajax nabízí bohaté funkce podobné desktopovým, jako je automatické doplňování, živé ověřování a závislé rozbalovací nabídky.
  • 🖥️ Klient a server: JavaSkript běží v prohlížeči a volá PHP skript, který vrací pouze data potřebná k aktualizaci stránky.
  • 🔍 Živé vyhledávání: Obslužná rutina onkeyup odesílá každý stisk klávesy do PHP skriptu, který okamžitě vrací odpovídající názvy frameworků.
  • 📜 XMLHttpRequest: Klasický přístup vytvoří objekt XMLHttpRequest a po dokončení požadavku přečte responseText.
  • 🆕 API pro načítání: Moderní kód nahrazuje XMLHttpRequest funkcí fetch založenou na promisech pro čistší a čitelnější požadavky.
  • 🤖 AI Assist: Nástroje umělé inteligence dokáží převést starý kód XMLHttpRequest na fetch nebo AXIOS a pomoci s laděním selhávajících Ajax požadavků.
Přečíst více

PHP Ajax

Co je Ajax?

AJAX zkratka pro asynchronní JavaScénář & XML. Jedná se o technologii, která snižuje interakce mezi serverem a klientem. Dělá to tak, že aktualizuje pouze část webové stránky, nikoli celou stránku. Asynchronní interakce jsou iniciovány JavaSkript. Účelem AJAXu je výměna malých objemů dat se serverem bez nutnosti aktualizace stránky.

JavaScénář je skriptovací jazyk na straně klienta. Je spouštěn na straně klienta webovými prohlížeči, které podporují JavaSkript. JavaKód skriptu funguje pouze v prohlížečích, které mají JavaSkript povolen.

XML je zkratka pro Extensible Markup Language (rozšiřitelný značkovací jazyk). Používá se ke kódování zpráv v lidsky i strojově čitelném formátu. Je podobný HTML, ale umožňuje vytvářet si vlastní tagy. Více informací o XML naleznete v článku o XML.

Proč používat AJAX?

  • Umožňuje to vývojping bohaté, interaktivní webové aplikace, stejně jako desktopové aplikace.
  • Ověření lze provést, když uživatel vyplní formulář, aniž by jej odeslal. Toho lze dosáhnout pomocí automatického doplňování. Slova, která uživatel zadá, jsou odeslána na server ke zpracování a server odpoví klíčovými slovy, která odpovídají tomu, co uživatel zadal.
  • Lze jej použít k naplnění rozbalovacího seznamu v závislosti na hodnotě jiného rozbalovacího seznamu.
  • Data lze načíst ze serveru a aktualizovat pouze určitou část stránky, aniž by se načetla celá stránka. To je velmi užitečné pro části webových stránek, které načítají například:
    • Tweets
    • Komentáře
    • Uživatelé navštěvující web a podobná živá data.

Jak vytvořit PHP Ajax aplikaci

Vytvoříme jednoduchou aplikaci, která uživatelům umožní vyhledávat oblíbené PHP MVC frameworky.

Naše aplikace bude mít textové pole, kam uživatelé zadají názvy frameworků.

Poté pomocí AJAXu vyhledáme shodu a poté pod vyhledávacím formulářem zobrazíme celý název frameworku.

Krok 1) Vytvoření indexové stránky

index.php

<html>

<head>

<title>PHP MVC Frameworks - Search Engine</title>

<script type="text/javascript" src="auto_complete.js"></script>

</head>

<body>

<h2>PHP MVC Frameworks - Search Engine</h2>

<p><b>Type the first letter of the PHP MVC Framework</b></p>

<form method="POST" action="index.php">

<p><input type="text" size="40" id="txtHint" onkeyup="showName(this.value)"></p>

</form>

<p>Matches: <span id="txtName"></span></p>

</body>

</html>

TADY,

  • “onkeyup=”showName(this.value)”” spustí JavaFunkce skriptu zobrazuje název pokaždé, když je do textového pole zadána klávesa. Tato funkce se nazývá automatické dokončování.

Krok 2) Vytvoření stránky rámců

frameworks.php

<?php

$frameworks = array("CodeIgniter","Zend Framework","Cake PHP","Kohana") ;

$name = $_GET["name"];

if (strlen($name) > 0) {

$match = "";

for ($i = 0; $i < count($frameworks); $i++) {

if (strtolower($name) == strtolower(substr($frameworks[$i], 0, strlen($name)))) {

if ($match == "") {

$match = $frameworks[$i];

} else {

$match = $match . " , " . $frameworks[$i];

}

}

}

}

echo ($match == "") ? 'no match found' : $match;

?>

SOUVISEJÍCÍ ČLÁNKY

Krok 3) Vytvoření skriptu JS

auto_complete.js

function showName(str){

if (str.length == 0){ // exit function if nothing has been typed in the textbox

document.getElementById("txtName").innerHTML=""; // clear previous results

return;

}

if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

} else {// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function() {

if (xmlhttp.readyState == 4 && xmlhttp.status == 200){

document.getElementById("txtName").innerHTML=xmlhttp.responseText;

}

}

xmlhttp.open("GET","frameworks.php?name="+str,true);

xmlhttp.send();

}

TADY,

  • „if (str.length == 0)“ kontroluje délku řetězce. Pokud je 0, zbytek skriptu se neprovede.
  • „if (window.XMLHttpRequest)…“ Internet Explorer verze 5 a 6 používá pro implementaci AJAX ActiveXObject. Jiné verze a prohlížeče, jako například Chrome a Firefox Použijte XMLHttpRequest. Tento kód zajišťuje, že naše aplikace bude fungovat v IE 5 a 6 i v moderních prohlížečích.
  • Funkce „xmlhttp.onreadystatechange=function…“ kontroluje, zda je interakce AJAX dokončena a zda je stav 200, a poté aktualizuje rozsah txtName o vrácené výsledky.

Krok 4) Testování naší PHP Ajax aplikace

Za předpokladu, že jste uložili soubor index.php do phptuts/ajax, přejděte do URL http://localhost/phptuts/ajax/index.php

Testování naší PHP Ajax aplikace

Zadejte písmeno C do textového pole. Získáte následující výsledky.

Testování naší PHP Ajax aplikace

Výše uvedený příklad demonstruje koncept AJAXu a to, jak nám může pomoci vytvářet bohaté a interaktivní aplikace.

Moderní AJAX s Fetch API

Výše uvedený objekt XMLHttpRequest stále funguje, ale jeho větev ActiveXObject pro starý Internet Explorer již není potřeba. Moderní prohlížeče poskytují Fetch API založené na promisech, které provádí stejný požadavek s mnohem menším množstvím kódu.

function showName(str) {
    if (str.length === 0) {
        document.getElementById("txtName").innerHTML = "";
        return;
    }
    fetch("frameworks.php?name=" + encodeURIComponent(str))
        .then(response => response.text())
        .then(text => {
            document.getElementById("txtName").innerHTML = text;
        });
}

Tato verze dělá totéž: odesílá zadaný text do frameworks.php a vkládá odpověď do rozsahu txtName. Také používá encodeURIComponent k bezpečnému escapování vstupu a jeho promise chain lze snadno rozšířit o zpracování chyb pomocí bloku catch.

Nejčastější dotazy

Synchronní požadavek blokuje prohlížeč, dokud server neodpoví, a tím zmrazí stránku. Asynchronní požadavek běží na pozadí, takže stránka zůstává responzivní a aktualizuje se po příchodu dat. Ajax používá asynchronní model.

S metodou fetch předejte metodě POST a body druhý argument a poté přečtěte $_POST v PHP. S XMLHttpRequest zavolejte open('POST', url), nastavte hlavičku Content-Type a odešlete zakódovaná data.

CORS (Cross-Origin Resource Sharing) blokuje požadavky prohlížeče na jinou doménu, pokud daný server neodešle správnou hlavičku Access-Control-Allow-Origin. Přidejte hlavičku na straně PHP nebo zavolejte metodu same-origin. URL opravit to.

Ano. Vložte kód XMLHttpRequest a umělá inteligence jej může přepsat pomocí API pro načtení založeného na promisech nebo systémů Axios, přidat ošetření chyb a zachovat stejné chování. Otestujte výsledek, protože ošetření odpovědí se mírně liší.

Ano. Sdílejte kód požadavku a chybu konzole prohlížeče nebo sítě a umělá inteligence dokáže odhalit chybu. URL, blok CORS, chybějící parametr nebo chyba serveru, pak navrhněte opravu, kterou je třeba vyzkoušet.

Shrňte tento příspěvek takto: