Підручник PHP Ajax із прикладом
Фіона Браун
⚡ Розумний підсумок
Ajax у PHP дозволяє веб-сторінці обмінюватися невеликими обсягами даних із сервером та оновлювати частину сторінки без повного перезавантаження. У цьому покроковому посібнику створено пошук у фреймворку, що працює в режимі реального часу, пояснюючи класичний підхід XMLHttpRequest та сучасну альтернативу Fetch API.
Що таке Ajax?
AJAX означає асинхронний JavaScript & XML. Це технологія, яка зменшує взаємодію між сервером і клієнтом. Вона досягає цього, оновлюючи лише частину веб-сторінки, а не всю сторінку. Асинхронні взаємодії ініціюються JavaСкрипт. Мета AJAX — обмін невеликими обсягами даних із сервером без оновлення сторінки.
JavaScript — це клієнтська мова сценаріїв. Вона виконується на стороні клієнта веббраузерами, які підтримують 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Функція скрипта 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, то решта скрипта не виконується.
- «якщо (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 більше не потрібна. Сучасні браузери надають 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 та поміщає відповідь у діапазон txtName. Вона також використовує encodeURIComponent для безпечного екранування вхідних даних, а її ланцюжок промісів легко розширити за допомогою обробки помилок за допомогою блоку catch.
