Учебное пособие по PHP Ajax с примером
Фиона Браун
⚡ Умное резюме
Ajax в PHP позволяет веб-странице обмениваться небольшими объемами данных с сервером и обновлять часть страницы без полной перезагрузки. В этом пошаговом руководстве показан пример использования фреймворка для поиска в реальном времени, объясняется классический подход с использованием XMLHttpRequest и современная альтернатива — Fetch API.
Что такое Аякс?
AJAX означает асинхронный JavaСценарий XML. Это технология, которая уменьшает взаимодействие между сервером и клиентом. Она делает это, обновляя только часть веб-страницы, а не всю страницу целиком. Асинхронное взаимодействие инициируется JavaСкрипт. Цель AJAX — обмен небольшими объемами данных с сервером без перезагрузки страницы.
JavaСценарий Это язык сценариев на стороне клиента. Он выполняется на стороне клиента веб-браузерами, поддерживающими этот язык. JavaСценарий. JavaКод скрипта работает только в браузерах, в которых есть JavaСкрипт включен.
XML XML — это аббревиатура от Extensible Markup Language (расширяемый язык разметки). Он используется для кодирования сообщений как в удобочитаемом для человека, так и в машиночитаемом формате. Он похож на HTML, но позволяет создавать собственные пользовательские теги. Более подробную информацию об XML см. в статье о XML.
Зачем использовать AJAX?
- Это позволяет разрабатыватьping Многофункциональные интерактивные веб-приложения, ничем не уступающие настольным приложениям.
- Проверка может выполняться по мере заполнения пользователем формы без ее отправки. Этого можно добиться с помощью автозаполнения. Слова, которые вводит пользователь, отправляются на сервер для обработки, и сервер отвечает ключевыми словами, соответствующими введенным пользователем данным.
- Его можно использовать для заполнения выпадающего списка в зависимости от значения другого выпадающего списка.
- Данные можно получить с сервера, и при этом обновлять только определенную часть страницы, не загружая всю страницу целиком. Это очень полезно для частей веб-страницы, которые загружают, например:
- твиты
- Комментарии
- Пользователи, посещающие сайт, и аналогичные данные в режиме реального времени.
Как создать 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Функция скрипта showName должна выполняться каждый раз, когда в текстовое поле вводится клавиша. Эта функция называется автозаполнением.
Шаг 2) Создание страницы фреймворков
framework.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 для реализации AJAX используется ActiveXObject. Другие версии и браузеры, такие как Chrome и другие, используют AJAX. Firefox Используйте XMLHttpRequest. Этот код гарантирует, что наше приложение будет работать как в Internet Explorer 5 и 6, так и в современных браузерах.
- Функция “xmlhttp.onreadystatechange=function…” проверяет, завершено ли AJAX-взаимодействие и равен ли статус 200, после чего обновляет элемент span с именем txtName полученными результатами.
Шаг 4) Тестирование нашего приложения PHP Ajax
Предположим, вы сохранили файл index.php в папке phptuts/ajax. Перейдите по указанному пути. URL http://localhost/phptuts/ajax/index.php
Введите букву С в текстовое поле. Вы получите следующие результаты.
Приведенный выше пример демонстрирует концепцию AJAX и то, как она может помочь нам создавать многофункциональные интерактивные приложения.
Современный AJAX с использованием Fetch API
Объект XMLHttpRequest, описанный выше, по-прежнему работает, но его ветка ActiveXObject для старых версий Internet Explorer больше не нужна. Современные браузеры предоставляют основанный на промисах API Fetch, который выполняет тот же запрос с гораздо меньшим количеством кода.
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 и помещает ответ в тег span с именем txtName. Она также использует encodeURIComponent для безопасного экранирования ввода, а ее цепочку промисов легко расширить обработкой ошибок с помощью блока catch.
