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

Obsah:

Anonim

Co je Ajax?

Plná forma AJAX je asynchronní JavaScript a XML. Jedná se o technologii, která omezuje 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 JavaScriptem. Účelem AJAX je výměna malého množství dat se serverem bez obnovení stránky.

JavaScript je skriptovací jazyk na straně klienta. Na straně klienta je prováděn webovými prohlížeči, které podporují JavaScript. Kód JavaScript funguje pouze v prohlížečích, které mají povolený JavaScript.

XML je zkratka pro Extensible Markup Language. Používá se ke kódování zpráv v lidském i strojově čitelném formátu. Je to jako HTML, ale umožňuje vám vytvářet vlastní značky. Další informace o XML najdete v článku o XML

Proč používat AJAX?

  • Umožňuje vývoj bohatých interaktivních webových aplikací, stejně jako desktopové aplikace.
  • Ověření lze provést, když uživatel vyplní formulář bez jeho odeslání. Toho lze dosáhnout pomocí automatického dokončování. Slova, která uživatel zadá, se odešlou na server ke zpracování. Server reaguje pomocí klíčových slov, která odpovídají tomu, co zadal uživatel.
  • Lze jej použít k naplnění rozevíracího pole v závislosti na hodnotě jiného rozevíracího pole
  • Data lze načíst ze serveru a aktualizovat pouze určitou část stránky bez načtení celé stránky. To je velmi užitečné pro části webových stránek, které načítají podobné věci
    • Tweety
    • Commens
    • Uživatelé navštěvující web atd.

Jak vytvořit aplikaci PHP Ajax

Vytvoříme jednoduchou aplikaci, která uživatelům umožní vyhledávat populární rámce PHP MVC.

Naše aplikace bude mít textové pole, které uživatelé zadají do názvů rozhraní.

Poté použijeme mvc AJAX k vyhledání shody a poté zobrazíme kompletní název rámce těsně pod vyhledávacím formulářem.

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

Index.php

PHP MVC Frameworks - Search Engine

PHP MVC Frameworks - Search Engine


Type the first letter of the PHP MVC Framework








Matches:

TADY,

  • “Onkeyup =" showName (this.value) "" provede JavaScriptovou funkci showName pokaždé, když zadáte klíč do textového pole.

    Tato funkce se nazývá automatické dokončení

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

frameworks.php

 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;?>

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 textboxdocument.getElementById("txtName").innerHTML; //clear previous resultsreturn;}if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();} else {// code for IE6, IE5xmlhttp=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)“ zkontrolujte délku řetězce. Pokud je 0, pak se zbytek skriptu neprovede.
  • „If (window.XMLHttpRequest) ...“ Internet Explorer verze 5 a 6 používá pro implementaci AJAX ActiveXObject. Jiné verze a prohlížeče, jako je Chrome, FireFox, používají XMLHttpRequest. Tento kód zajistí, že naše aplikace bude fungovat v IE 5 a 6 i v dalších vysokých verzích IE a prohlížečů.
  • „Xmlhttp.onreadystatechange = function…“ zkontroluje, zda je interakce AJAX dokončena a stav je 200, poté aktualizuje rozsah txtName o vrácené výsledky.

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

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

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

Výše uvedený příklad ukazuje koncept AJAX a jak nám může pomoci vytvořit bohaté interakční aplikace.

souhrn

  • AJAX je zkratka pro asynchronní JavaScript a XML
  • AJAX je technologie používaná k vytváření bohatých interakčních aplikací, které snižují interakce mezi klientem a serverem aktualizací pouze částí webové stránky.
  • Internet Explorer verze 5 a 6 používá k implementaci operací AJAX ActiveXObject.
  • Internetový prohlížeč verze 7 a vyšší a prohlížeče Chrome, Firefox, Opera a Safari používají XMLHttpRequest.