Samouczek PHP Ajax z przykładem

Spisie treści:

Anonim

Co to jest Ajax?

Pełna forma AJAX to asynchroniczny JavaScript i XML. Jest to technologia, która ogranicza interakcje między serwerem a klientem. Odbywa się to poprzez aktualizację tylko części strony internetowej, a nie całej strony. Asynchroniczne interakcje są inicjowane przez JavaScript. Celem AJAX jest wymiana niewielkich ilości danych z serwerem bez odświeżania strony.

JavaScript to język skryptowy po stronie klienta. Jest wykonywany po stronie klienta przez przeglądarki internetowe obsługujące JavaScript. Kod JavaScript działa tylko w przeglądarkach z włączoną obsługą JavaScript.

XML to skrót od Extensible Markup Language. Służy do kodowania wiadomości zarówno w formacie czytelnym dla człowieka, jak i dla komputera. To jest jak HTML, ale umożliwia tworzenie własnych tagów. Aby uzyskać więcej informacji na temat XML, zobacz artykuł na temat XML

Dlaczego warto korzystać z AJAX?

  • Umożliwia tworzenie bogatych, interaktywnych aplikacji internetowych, takich jak aplikacje desktopowe.
  • Walidację można przeprowadzić, gdy użytkownik wypełnia formularz bez jego przesyłania. Można to osiągnąć za pomocą automatycznego uzupełniania. Słowa wpisane przez użytkownika są przesyłane do serwera w celu przetworzenia. Serwer odpowiada słowami kluczowymi, które pasują do wpisanego przez użytkownika.
  • Można go użyć do wypełnienia pola rozwijanego w zależności od wartości innego pola rozwijanego
  • Dane można pobrać z serwera i zaktualizować tylko określoną część strony bez ładowania całej strony. Jest to bardzo przydatne w przypadku części stron internetowych, które ładują takie elementy, jak
    • Tweety
    • Commens
    • Użytkownicy odwiedzający witrynę itp.

Jak stworzyć aplikację PHP Ajax

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

Nasza aplikacja będzie miała pole tekstowe, które użytkownicy będą wpisywać w nazwy frameworka.

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

Krok 1) Utworzenie strony indeksu

Index.php

PHP MVC Frameworks - Search Engine

PHP MVC Frameworks - Search Engine


Type the first letter of the PHP MVC Framework








Matches:

TUTAJ,

  • „Onkeyup =" showName (this.value) "” wykonuje funkcję JavaScript showName za każdym razem, gdy w polu tekstowym zostanie wpisany klucz.

    Ta funkcja nosi nazwę autouzupełniania

Krok 2) Stworzenie strony frameworków

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

TUTAJ,

  • „If (str.length == 0)” sprawdź długość łańcucha. Jeśli jest to 0, reszta skryptu nie jest wykonywana.
  • „If (window.XMLHttpRequest)…” Internet Explorer w wersjach 5 i 6 używa ActiveXObject do implementacji AJAX. Inne wersje i przeglądarki, takie jak Chrome, FireFox, używają XMLHttpRequest. Ten kod zapewni, że nasza aplikacja będzie działać zarówno w IE 5 i 6, jak i innych wysokich wersjach IE i przeglądarek.
  • „Xmlhttp.onreadystatechange = function…” sprawdza, czy interakcja AJAX jest zakończona, a stan wynosi 200, a następnie aktualizuje zakres txtName za pomocą zwróconych wyników.

Krok 4) Testowanie naszej aplikacji PHP Ajax

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

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

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

Podsumowanie

  • AJAX to skrót od Asynchronous JavaScript and XML
  • AJAX to technologia używana do tworzenia rozbudowanych aplikacji interakcji, które zmniejszają interakcje między klientem a serwerem poprzez aktualizację tylko części strony internetowej.
  • Internet Explorer w wersji 5 i 6 używa ActiveXObject do implementacji operacji AJAX.
  • Internet Explorer w wersji 7 lub nowszej oraz przeglądarki Chrome, Firefox, Opera i Safari używają XMLHttpRequest.