Створення веб-додатків з підтримкою AJAX за допомогою PHP
Привіт, новачок-кодер! Сьогодні ми вирушаємо в дивовижну подорож. Надягайте свої гік-окуляри і готуйтеся до веселого, розумового пригоди!
PHP & AJAX: Ідеальна Пара
Кожна велика історія містить надзвичайну пару. Бетмен і Робін, арахісове масло і джем, Саймон і Гарфанкел, ви зрозуміли ідею. У світі кодування динамічною парою, яка працює бездоганно разом, є PHP та AJAX!
"Зачекайте, зачекайте! Але що ж таке AJAX і PHP?" Чую, як ви запитуєте.
Ви праві, що питаєте! Дозвольте мені швидко розкрити цю таємницю.
PHP, або Повноцінний Препроцесор Гіпертексту, – це мова скриптів з відкритим вихідним кодом, яка переважно використовується на серверах для створення динамічних веб-сайтів. AJAX — скорочення від Асинхронного JavaScript і XML — це набір технік веб-розробки, які використовуються для створення асинхронних веб-додатків. Ці двоє становлять надійну і ефективну команду.
Зробіть Глибокий Вдих: Як Працює AJAX
Перед тим як заглибитися в цей лабіринт, важливо зрозуміти, як працює AJAX. AJAX функціонує на моделі асинхронної передачі даних. Перекладаючи це з гік-мови на звичайну: веб-сторінка, яку переглядають користувачі, не повинна повністю перезавантажуватися для кожної запитуваної зміни. Натомість тільки маленька частина сторінки, яка містить запитані дані, оновлюється.
Якщо ви запитаєте будь-якого веб-розробника про AJAX, він, ймовірно, буде в захваті від його здатності покращувати взаємодію з користувачем в реальному часі. Але зберігайте свою ненаситну цікавість, ми лише почали розуміти, наскільки потужним є AJAX.
AJAX-розмова з PHP в Короткому Огляді
PHP та AJAX становлять виграшну команду! PHP переважно працює на стороні сервера, а AJAX — на стороні клієнта. Але якими ще способами вони працюють разом?
Простими словами, AJAX на фронтенді робить запити до PHP на серверній стороні. Браузер клієнта запитує: «Привіт PHP, отримай мені дані з бази даних MySQL!» (звичайно, ми повинні використовувати ввічливу мову). PHP на серверній стороні з радістю відповідає: "Все для тебе, приятелю", отримує дані і відправляє їх назад до AJAX. AJAX, почувши себе справжнім героєм, оновлює конкретні частини веб-сторінки без перезавантаження.
Слон у Кімнаті: Код, Код і Ще Код
Не бійтеся! Це не так страшно, як звучить. Ось зазирніть в код PHP і AJAX. Продовжимо нашу подорож до того, щоб стати легендою кодування.
Розкриття Коду PHP
Уявімо, що PHP-скрипт — це секретний агент коду, якому доручено отримати дані з бази даних MySQL. Перш ніж він рвоне на свою таємну місію, нам потрібно спочатку його закодувати.
php
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// Створити з’єднання
$conn = new mysqli($servername, $username, $password, $dbname);
// Перевірити з’єднання
if ($conn->connect_error) {
// Якщо з’єднання не вдалось, PHP вмирає, спочивай з миром, приятелю!
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id, firstName, lastName FROM MyTable";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// Вивести дані кожного рядка
while($row = $result->fetch_assoc()) {
echo "id: " . $row["id"]. " - Ім’я: " . $row["firstName"]. " " . $row["lastName"]. "<br>";
}
} else {
echo "0 results";
}
$conn->close();
?>
Отже, Що Тільки Щойно Сталося?
По-перше, ми створили з’єднання з нашою базою даних. Тут localhost, username, password та myDB замінюються на вашу реальну інформацію бази даних. З’єднання перевіряється, і якщо все гаразд, ми виконуємо SQL-запит і виводимо дані. Але якщо виникає помилка з’єднання, PHP краще помре! (Не буквально. Не панікуйте, це лише повідомлення про помилку.)
Ми побачили PHP в дії, тепер давайте поглянемо на AJAX.
Заглянемо в Код AJAX
html
<!DOCTYPE html>
<html>
<body>
<div id="demo">
Нехай AJAX Змінить цей Текст
<button type="button" onclick="loadDoc()">Змінити Контент</button>
</div>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
</script>
</body>
</html>
Цей код трохи простіший. Функція ;loadDoc()> активується, коли ви натискаєте «Змінити Контент». Чарівність відбувається, коли AJAX відкриває файл (в даному випадку, ajax_info.txt) і оновлює вміст у елементі ‘demo’.
Ось і все! Ви додали ще один аспект веб-розробки до свого інструментарію кодера. Пам’ятайте, практика — це ключ до вашої подорожі, щоб стати легендою кодування. До наступного разу, щасливого кодування!
