Урок за PHP Ajax с пример
Фиона Браун
⚡ Умно обобщение
Ajax в PHP позволява на уеб страница да обменя малки количества данни със сървъра и да актуализира част от страницата без пълно презареждане. Това ръководство изгражда търсене в рамка на живо, обяснявайки класическия подход XMLHttpRequest и съвременната алтернатива на Fetch API.
Какво е Ajax?
AJAX означава Асинхронен JavaСценарий & XML. Това е технология, която намалява взаимодействията между сървъра и клиента. Това се постига чрез актуализиране само на част от уеб страницата, а не на цялата страница. Асинхронните взаимодействия се инициират от JavaСкрипт. Целта на AJAX е да обменя малки количества данни със сървъра без обновяване на страницата.
JavaСценарий е скриптов език от страна на клиента. Той се изпълнява от страна на клиента от уеб браузъри, които поддържат JavaСценарий. JavaКодът на скрипта работи само в браузъри, които имат JavaСкриптът е активиран.
XML е акроним за Extensible Markup Language (Разширяем език за маркиране). Използва се за кодиране на съобщения както във формат, четим от човек, така и в машинно четим формат. Подобен е на HTML, но ви позволява да създавате свои собствени персонализирани тагове. За повече подробности относно XML вижте статията за XML.
Защо да използвате AJAX?
- Това позволява развитиетоping богати, интерактивни уеб приложения, точно както настолните приложения.
- Валидирането може да се извърши, докато потребителят попълва формуляр, без да го изпраща. Това може да се постигне чрез автоматично довършване. Думите, които потребителят въвежда, се изпращат на сървъра за обработка, а сървърът отговаря с ключови думи, които съответстват на въведеното от потребителя.
- Може да се използва за попълване на падащо меню в зависимост от стойността на друго падащо меню.
- Данните могат да бъдат извлечени от сървъра и само определена част от страницата да се актуализира, без да се зарежда цялата страница. Това е много полезно за части от уеб страница, които зареждат неща като:
- Tweets
- Коментари
- Потребители, посещаващи сайта, и подобни данни в реално време.
Как да създадете PHP Ajax приложение
Ще създадем просто приложение, което позволява на потребителите да търсят популярни PHP 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Функцията на скрипта показва името всеки път, когато се въведе клавиш в текстовото поле. Тази функция се нарича автоматично довършване.
Стъпка 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, останалата част от скрипта не се изпълнява.
- „ако (window.XMLHttpRequest)…“ Internet Explorer версии 5 и 6 използват ActiveXObject за AJAX имплементацията. Други версии и браузъри, като Chrome и Firefox използвайте XMLHttpRequest. Този код гарантира, че нашето приложение работи както в IE 5 и 6, така и в съвременни браузъри.
- „xmlhttp.onreadystatechange=function…“ проверява дали AJAX взаимодействието е завършено и дали статусът е 200, след което актуализира диапазона txtName с върнатите резултати.
Стъпка 4) Тестване на нашето PHP Ajax приложение
Ако сте запазили файла index.php в phptuts/ajax, отидете до URL http://localhost/phptuts/ajax/index.php
Въведете буквата C в текстовото поле. Ще получите следните резултати.
Горният пример демонстрира концепцията на AJAX и как тя може да ни помогне да създаваме богати, интерактивни приложения.
Модерен AJAX с Fetch API
Горният обект XMLHttpRequest все още работи, но неговият клон ActiveXObject за стария Internet Explorer вече не е необходим. Съвременните браузъри предоставят базиран на обещания Fetch API, който прави същата заявка с много по-малко код.
function showName(str) { if (str.length === 0) { document.getElementById("txtName").innerHTML = ""; return; } fetch("frameworks.php?name=" + encodeURIComponent(str)) .then(response => response.text()) .then(text => { document.getElementById("txtName").innerHTML = text; }); }
Тази версия върши същата работа: изпраща въведения текст към frameworks.php и поставя отговора в диапазона txtName. Също така използва encodeURIComponent за безопасно екраниране на входа, а веригата от обещания е лесна за разширяване с обработка на грешки, използвайки блок catch.
