Введение в AJAX с PHP

Здравствуйте,野心勃勃 веб-разработчики! Сегодня мы погружаемся в захватывающий мир AJAX с PHP. Как ваш доброжелательный соседский компьютерный учитель, я здесь, чтобы провести вас через это путешествие, даже если вы никогда не писали ни строчки кода. Так что возьмите杯咖啡(или чай, если это ваше дело), и давайте начнем!

PHP - AJAX Introduction

Что такое AJAX?

AJAX означает Asynchronous JavaScript and XML. Не пугайтесь этой фразы! Это на самом деле довольно классная технология, которая делает веб-страницы более интерактивными и удобными для пользователей.

Представьте, что вы в ресторане. Без AJAX каждый раз, когда вы хотите увидеть меню, вам пришлось бы leave ваш стол, идти к прилавку, спрашивать меню и затем возвращаться. С AJAX это как если бы у вас был официант, который может принести вам только ту информацию, которая вам нужна, не нарушая вашего whole обеденного опыта.

В веб-терминах AJAX позволяет вашей веб-странице запрашивать и получать данные с сервера, не перезагружая всю страницу. Это как магия, но лучше, потому что мы можем понять, как она работает!

Как работает AJAX

В веб-странице occurs событие (например, щелчок по кнопке)
JavaScript создает объект XMLHttpRequest
Объект XMLHttpRequest отправляет запрос на веб-сервер
Сервер обрабатывает запрос
Сервер отправляет ответ обратно на веб-страницу
JavaScript читает ответ
JavaScript выполняет соответствующее действие на основе ответа

Что нужно для запуска AJAX?

Для запуска AJAX needed три основные компоненты:

Веб-браузер, который поддерживает JavaScript и объект XMLHttpRequest
Веб-сервер (например, Apache), который может обрабатывать запросы AJAX
Язык программирования на серверной стороне (в нашем случае, PHP)

Хорошая новость! Большинство современных веб-браузеров поддерживают AJAX, так что мы уже на третьем пути!

Настройка вашей среды

Прежде чем мы начнем программировать, убедитесь, что у вас все настроено:

Установите XAMPP (он включает веб-сервер Apache и PHP)
Создайте новую папку в каталоге htdocs вашей установки XAMPP
Откройте ваш любимый текстовый редактор (я лично люблю Visual Studio Code)

Теперь, когда мы все настроили, давайте напишем код!

Ваш первый AJAX запрос

Давайте начнем с простого примера. Мы создадим кнопку, при нажатии на которую будет получено приветствие с сервера, не перезагружая страницу.

Сначала создайте HTML-файл с именем index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First AJAX Request</title>
</head>
<body>
<h1>Welcome to AJAX!</h1>
<button onclick="getGreeting()">Get Greeting</button>
<p id="greetingText"></p>

<script>
function getGreeting() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("greetingText").innerHTML = this.responseText;
}
};
xhttp.open("GET", "greeting.php", true);
xhttp.send();
}
</script>
</body>
</html>

Теперь давайте разберем это:

У нас есть кнопка с событием onclick, которое вызывает функцию getGreeting().
В функции getGreeting() мы создаем объект XMLHttpRequest.
Мы настраиваем функцию для обработки ответа с сервера.
Мы открываем соединение с greeting.php и отправляем запрос.

Далее создайте PHP-файл с именем greeting.php:

<?php
$greetings = array("Hello!", "Bonjour!", "Hola!", "Ciao!", "Konnichiwa!");
echo $greetings[array_rand($greetings)];
?>

Этот PHP-скрипт просто возвращает случайное приветствие из массива.

Когда вы нажимаете кнопку, JavaScript отправляет запрос на greeting.php, который отвечает случайным приветствием. JavaScript затем обновляет страницу с этим приветствием, не перезагружая страницу!

Отправка данных на сервер

Теперь, когда мы освоили получение данных, давайте try отправку данных на сервер. Мы создадим простую форму, которая отправляет имя на сервер и получает персонализированное приветствие обратно.

Обновите ваш index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX Form Example</title>
</head>
<body>
<h1>Personalized Greeting</h1>
<input type="text" id="nameInput" placeholder="Enter your name">
<button onclick="getPersonalizedGreeting()">Get Greeting</button>
<p id="greetingText"></p>

<script>
function getPersonalizedGreeting() {
var name = document.getElementById("nameInput").value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("greetingText").innerHTML = this.responseText;
}
};
xhttp.open("POST", "personalized_greeting.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("name=" + name);
}
</script>
</body>
</html>

И создайте новый personalized_greeting.php:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST["name"];
$greetings = array("Hello", "Bonjour", "Hola", "Ciao", "Konnichiwa");
$greeting = $greetings[array_rand($greetings)];
echo "$greeting, $name!";
}
?>

В этом примере мы используем POST-запрос для отправки имени на сервер. PHP-скрипт затем использует это имя для создания персонализированного приветствия.

Common AJAX Methods

Вот таблица часто используемых методов AJAX:

Method	Description
open()	Указывает тип запроса и URL
send()	Отправляет запрос на сервер
setRequestHeader()	Добавляет пары меток/значений в заголовок для отправки

Заключение

Поздравляю! Вы только что сделали свои первые шаги в мир AJAX с PHP. Мы рассмотрели основы отправки и получения данных асинхронно, что является основой многих современных веб-приложений.

Помните, что обучение кодированию похоже на изучение нового языка. Это требует времени и практики, но с каждой строчкой кода, которую вы пишете, вы становитесь лучше. Не бойтесь экспериментировать, совершать ошибки и учиться на них.

За годы了我的 преподавания я видел countless студентов, перешедших от complete новичков к опытным разработчикам. Ключом к этому является persistence и好奇心. Так что продолжайте программировать, продолжайте учиться, и sooner чем вы знаете, вы будете создавать потрясающие интерактивные веб-приложения!

В следующий раз мы рассмотрим более продвинутые техники AJAX и как обрабатывать разные типы данных. Пока что, happy coding!

Credits: Image by storyset

Предыдущий учебник:

PHP - Вспомогательные сообщения

Следующий учебник:

PHP - AJAX поиск