Samouczek PHP Ajax z przykładem

Przez: Fiona Brown Fiona Brown
Hours Zaktualizowano

Co to jest Ajax?

AJAX pełna forma to Asynchronous JAVASCRIPT & XML. Jest to technologia, która redukuje interakcje między serwerem a klientem. Robi to poprzez aktualizację tylko części strony internetowej, a nie całej strony. Asynchroniczne interakcje są inicjowane przez JavaSkrypt. Celem AJAX jest wymiana niewielkich ilości danych z serwerem bez odświeżania strony.

JAVASCRIPT jest językiem skryptowym po stronie klienta. Jest wykonywany po stronie klienta przez obsługujące przeglądarki internetowe JavaScenariusz.JavaKod skryptu działa tylko w przeglądarkach, które mają JavaSkrypt włączony.

XML to skrót od Extensible Markup Language (język znaczników rozszerzalnych). Służy do kodowania wiadomości w formatach czytelnych zarówno dla człowieka, jak i maszyny. Jest podobny do HTML, ale pozwala tworzyć własne tagi. Więcej szczegółów na temat XML można znaleźć w artykule na XML

Dlaczego warto używać AJAX-a?

  • Umożliwia tworzenie bogatych, interaktywnych aplikacji internetowych, podobnie jak aplikacji desktopowych.
  • Walidacja może zostać przeprowadzona poprzez wypełnienie formularza bez jego przesyłania. Można to osiągnąć za pomocą automatycznego uzupełniania. Słowa wpisywane przez użytkownika są przesyłane do serwera w celu przetworzenia. Serwer odpowiada słowami kluczowymi pasującymi do wpisanych przez użytkownika.
  • Można go użyć do wypełnienia pola rozwijanego w zależności od wartości innego pola rozwijanego
  • Dane mogą być pobierane z serwera i aktualizowana tylko pewna część strony bez ładowania całej strony. Jest to bardzo przydatne w przypadku części stron internetowych, które ładują takie rzeczy jak
  • Tweets
  • Komentarze
  • Użytkownicy odwiedzający witrynę itp.

Jak utworzyć aplikację PHP Ajax

Stworzymy prostą aplikację, która pozwoli użytkownikom wyszukiwać popularne frameworki PHP MVC.

Nasza aplikacja będzie zawierać pole tekstowe, w którym użytkownicy będą wpisywać nazwy frameworków.

Następnie użyjemy mvc AJAX do wyszukania dopasowania, a następnie wyświetlimy pełną nazwę frameworka tuż pod formularzem wyszukiwania.

Krok 1) Tworzenie strony indeksowej

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>

TUTAJ,

  • „onkeyup=”showName(this.value)”” wykonuje JavaFunkcja skryptu showName za każdym razem, gdy w polu tekstowym zostanie wpisany jakiś klawisz. Ta funkcja nazywa się automatycznym uzupełnianiem

Krok 2) Tworzenie strony frameworków

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;

?>

POWIĄZANE ARTYKUŁY

Krok 3) Tworzenie skryptu JS

auto_uzupełnianie.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();

}

TUTAJ,

  • „if (str.length == 0)” sprawdza długość łańcucha. Jeśli wynosi 0, reszta skryptu nie jest wykonywana.
  • „if (window.XMLHttpRequest)…” Internet Explorer w wersji 5 i 6 używa ActiveXObject do implementacji AJAX. Inne wersje i przeglądarki, takie jak Chrome, FireFox użyj XMLHttpRequest. Ten kod zapewni, że nasza aplikacja będzie działać zarówno w IE 5 i 6, jak i innych wyższych wersjach IE i przeglądarek.
  • „xmlhttp.onreadystatechange=function…” sprawdza, czy interakcja AJAX została zakończona i ma status 200, a następnie aktualizuje zakres txtName zwróconymi wynikami.

Krok 4) Testowanie naszej aplikacji PHP Ajax

Zakładając, że zapisałeś plik indeks.php W phututs/ajax, przejdź do adresu URL http://localhost/phptuts/ajax/index.php

Testowanie naszej aplikacji PHP Ajax

Wpisz literę C w polu tekstowym. Otrzymasz następujące wyniki.

Testowanie naszej aplikacji PHP Ajax

Powyższy przykład ilustruje koncepcję AJAX i to, jak może nam pomóc w tworzeniu bogatych aplikacji interakcyjnych.

Podsumowanie

  • AJAX to skrót od asynchronicznego JAVASCRIPT i XML
  • AJAX to technologia używana do tworzenia bogatych aplikacji interakcyjnych, które redukują interakcje pomiędzy klientem a serwerem poprzez aktualizację tylko części strony internetowej.
  • Wersje 5 i 6 przeglądarki Internet Explorer wykorzystują obiekt ActiveXObject do implementacji operacji AJAX.
  • Internet Explorer w wersji 7 i wyższej oraz przeglądarki Chrome, Firefox, Operai Safari używają XMLHttpRequest.