Урок за PHP Ajax с пример

по: Фиона Браун Фиона Браун
Hours Обновено

Какво е Ajax?

AJAX пълната форма е асинхронна JavaСценарий & XML. Това е технология, която намалява взаимодействията между сървър и клиент. Той прави това, като актуализира само част от уеб страница, а не цялата страница. Асинхронните взаимодействия се инициират от JavaСкрипт. Целта на AJAX е да обменя малки количества данни със сървъра без опресняване на страницата.

JavaСценарий е скриптов език от страна на клиента. Изпълнява се от страна на клиента от уеб браузърите, които поддържат JavaСценарий.JavaКодът на скрипта работи само в браузъри, които имат JavaСкриптът е активиран.

XML е акронимът на Extensible Markup Language. Използва се за кодиране на съобщения както в човешки, така и в машинно четим формат. Това е като HTML, но ви позволява да създавате персонализирани тагове. За повече подробности относно XML вижте статията за XML

Защо да използвате AJAX?

  • Позволява разработването на богати интерактивни уеб приложения точно като настолни приложения.
  • Валидирането може да се извърши, като потребителят попълни формуляр, без да го изпраща. Това може да се постигне с помощта на автоматично довършване. Думите, които потребителят въвежда, се изпращат на сървъра за обработка. Сървърът отговаря с ключови думи, които съответстват на въведеното от потребителя.
  • Може да се използва за попълване на падащо поле в зависимост от стойността на друго падащо поле
  • Данните могат да бъдат извлечени от сървъра и да се актуализира само определена част от страница, без да се зарежда цялата страница. Това е много полезно за части от уеб страници, които зареждат неща като
  • Tweets
  • Коментари
  • Потребители, посещаващи сайта и др.

Как да създадете PHP Ajax приложение

Ще създадем просто приложение, което позволява на потребителите да търсят популярни PHP MVC рамки.

Нашето приложение ще има текстово поле, в което потребителите ще въвеждат имената на рамката.

След това ще използваме mvc AJAX за търсене на съвпадение, след което ще покажем пълното име на рамката точно под формата за търсене.

Стъпка 1) Създаване на индексната страница

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>

ТУК,

  • “onkeyup=”showName(this.value)”” изпълнява JavaСкрипт функция showName всеки път, когато се въведе ключ в текстовото поле. Тази функция се нарича автоматично завършване

Стъпка 2) Създаване на страницата с рамки

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;

?>

СВЪРЗАНИ СТАТИИ

Стъпка 3) Създаване на 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();

}

ТУК,

  • “if (str.length == 0)” проверете дължината на низа. Ако е 0, тогава останалата част от скрипта не се изпълнява.
  • „if (window.XMLHttpRequest)…“ Internet Explorer версии 5 и 6 използват ActiveXObject за внедряване на AJAX. Други версии и браузъри като Chrome, FireFox използвайте XMLHttpRequest. Този код ще гарантира, че нашето приложение работи както в IE 5 и 6, така и в други по-високи версии на IE и браузъри.
  • „xmlhttp.onreadystatechange=function…“ проверява дали взаимодействието с AJAX е завършено и състоянието е 200, след което актуализира обхвата txtName с върнатите резултати.

Стъпка 4) Тестване на нашето PHP Ajax приложение

Ако приемем, че сте запазили файла index.php В phututs/ajax, прегледайте URL адреса http://localhost/phptuts/ajax/index.php

Тестваме нашето PHP Ajax приложение

Въведете буквата C в текстовото поле. Ще получите следните резултати.

Тестваме нашето PHP Ajax приложение

Горният пример демонстрира концепцията на AJAX и как може да ни помогне да създаваме приложения с богато взаимодействие.

Oбобщение

  • AJAX е акронимът на Asynchronous JavaСценарий и XML
  • AJAX е технология, използвана за създаване на приложения за богато взаимодействие, които намаляват взаимодействията между клиента и сървъра, като актуализират само части от уеб страницата.
  • Internet Explorer версия 5 и 6 използват ActiveXObject за изпълнение на AJAX операции.
  • Internet Explorer версия 7 и по-нова и браузъри Chrome, Firefox, Operaи Safari използват XMLHttpRequest.