Výukový program pre PHP Ajax s príkladom

Obsah:

Anonim

Čo je Ajax?

Celá forma AJAX je asynchrónny JavaScript a XML. Je to technológia, ktorá obmedzuje interakcie medzi serverom a klientom. Robí to tak, že aktualizuje iba časť webovej stránky, a nie celú stránku. Asynchrónne interakcie sa inicializujú pomocou jazyka JavaScript. Účelom AJAX je výmena malého množstva údajov so serverom bez obnovenia stránky.

JavaScript je skriptovací jazyk na strane klienta. Vykonávajú ho na strane klienta webové prehľadávače podporujúce JavaScript. Kód JavaScript funguje iba v prehliadačoch, ktoré majú povolený JavaScript.

XML je skratka pre Extensible Markup Language. Používa sa na kódovanie správ v ľudskom aj strojovo čitateľnom formáte. Je to ako HTML, ale umožňuje vám vytvárať vlastné značky. Viac podrobností o XML nájdete v článku o XML

Prečo používať AJAX?

  • Umožňuje vývoj bohatých interaktívnych webových aplikácií, rovnako ako desktopové aplikácie.
  • Overenie je možné vykonať tak, že používateľ vyplní formulár bez jeho odoslania. To sa dá dosiahnuť pomocou automatického dokončovania. Slová, ktoré zadá užívateľ, sa odošlú na server na spracovanie. Server odpovie kľúčovými slovami, ktoré sa zhodujú s tým, čo zadal používateľ.
  • Môže sa použiť na vyplnenie rozbaľovacieho poľa v závislosti od hodnoty iného rozbaľovacieho poľa
  • Dáta je možné načítať zo servera a aktualizovať iba určitú časť stránky bez načítania celej stránky. To je veľmi užitočné pre časti webových stránok, ktoré načítajú napríklad veci
    • Tweety
    • Commens
    • Používatelia navštevujúci web atď.

Ako vytvoriť aplikáciu PHP Ajax

Vytvoríme jednoduchú aplikáciu, ktorá používateľom umožní vyhľadávať populárne rámce PHP MVC.

Naša aplikácia bude mať textové pole, ktoré budú používatelia zadávať do názvov rámca.

Potom použijeme mvc AJAX na vyhľadanie zhody a potom zobrazíme celý názov rámca priamo pod vyhľadávacím formulárom.

Krok 1) Vytvorenie indexovej stránky

Index.php

PHP MVC Frameworks - Search Engine

PHP MVC Frameworks - Search Engine


Type the first letter of the PHP MVC Framework








Matches:

TU,

  • “Onkeyup =" showName (this.value) "" vykoná funkciu JavaScript showName vždy, keď do textového poľa zadáte kľúč.

    Táto funkcia sa nazýva automatické dokončovanie

Krok 2) Vytvorenie stránky rámcov

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) Vytvorenie 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();}

TU,

  • „If (str.length == 0)“ skontrolujte dĺžku reťazca. Ak je 0, potom sa zvyšok skriptu nevykoná.
  • „If (window.XMLHttpRequest) ...“ Internet Explorer verzie 5 a 6 používa na implementáciu AJAX program ActiveXObject. Ostatné verzie a prehliadače, ako napríklad Chrome alebo FireFox, používajú XMLHttpRequest. Tento kód zabezpečí, že naša aplikácia bude fungovať v IE 5 aj 6 a ďalších vysokých verziách IE a prehliadačoch.
  • „Xmlhttp.onreadystatechange = function…“ kontroluje, či je interakcia AJAX dokončená a stav je 200, potom aktualizuje rozsah txtName o vrátené výsledky.

Krok 4) Testovanie našej aplikácie PHP Ajax

Za predpokladu, že ste uložili súbor index.php V priečinku phututs / ajax vyhľadajte adresu URL http: //localhost/phptuts/ajax/index.php

Do textového poľa zadajte písmeno C. Získate nasledujúce výsledky.

Vyššie uvedený príklad demonštruje koncept AJAX a to, ako nám môže pomôcť vytvoriť bohaté interakčné aplikácie.

Zhrnutie

  • AJAX je skratka pre asynchrónny JavaScript a XML
  • AJAX je technológia používaná na vytváranie bohatých interakčných aplikácií, ktoré znižujú interakcie medzi klientom a serverom aktualizáciou iba častí webovej stránky.
  • Internet Explorer verzie 5 a 6 používa na implementáciu operácií AJAX ActiveXObject.
  • Prehliadač Internet Explorer verzie 7 a vyššej a prehľadávače Chrome, Firefox, Opera a Safari používajú XMLHttpRequest.