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

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

Co je Ajax?

AJAX plná forma je asynchronní JavaScénář & XML. Je to technologie, 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 JavaScript. Účelem AJAX je výměna malého množství dat se serverem bez obnovování stránky.

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

XML je zkratka pro Extensible Markup Language. Používá se ke kódování zpráv ve formátech čitelných člověkem i strojově. Je to jako HTML, ale umožňuje vám vytvářet vlastní značky. Další podrobnosti o XML naleznete v článku o XML

Proč používat AJAX?

  • Umožňuje vyvíjet bohaté interaktivní webové aplikace, stejně jako aplikace pro stolní počítače.
  • Ověření lze provést tak, že uživatel vyplní formulář bez jeho odeslání. Toho lze dosáhnout pomocí automatického dokončování. Slova, která uživatel zadá, jsou odeslána na server ke zpracování. Server odpoví klíčovými slovy, která odpovídají tomu, co uživatel zadal.
  • 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í věci jako
  • Tweets
  • Commens
  • Uživatelé navštěvující web atd.

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, do kterého uživatelé zadají názvy frameworku.

Poté použijeme mvc AJAX k vyhledání shody a poté zobrazíme úplný název rámce přímo pod vyhledávacím formulářem.

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 showName pokaždé, když je do textového pole napsána klávesa. Tato funkce se nazývá automatické dokončení

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)“ zkontrolujte délku řetězce. Pokud je 0, pak se zbytek skriptu neprovede.
  • „if (window.XMLHttpRequest)…“ Internet Explorer verze 5 a 6 používá ActiveXObject pro implementaci AJAX. Jiné verze a prohlížeče jako Chrome, FireFox použijte XMLHttpRequest. Tento kód zajistí, že naše aplikace bude fungovat jak v IE 5 a 6, tak v dalších vyšších verzích IE a prohlížečích.
  • „xmlhttp.onreadystatechange=function…“ zkontroluje, zda je interakce AJAX dokončena a stav je 200, a poté aktualizuje rozsah txtName vrácenými výsledky.

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

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

Testování naší PHP Ajax aplikace

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

Testování naší PHP Ajax aplikace

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

Shrnutí

  • AJAX je zkratka pro asynchronní JavaScénář a XML
  • AJAX je technologie používaná k vytváření aplikací s bohatými interakcemi, které snižují interakce mezi klientem a serverem tím, že aktualizují pouze části webové stránky.
  • Internet Explorer verze 5 a 6 používá ActiveXObject k implementaci operací AJAX.
  • Internet explorer verze 7 a vyšší a prohlížeče Chrome, Firefox, Operaa Safari používají XMLHttpRequest.

Máš rád: