PHP - AJAX и PHP

AJAX (асинхронный JavaScript и XML) — это технология, используемая для обмена данными с сервером без обновления всей страницы.

AJAX — это технология, позволяющая обновлять части веб-страницы без необходимости перезагружать всю страницу. Она обменивается данными с сервером в фоновом режиме и может обновлять часть содержимого веб-страницы.

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

AJAX обычно использует объект XMLHttpRequest для связи с сервером в фоновом режиме, хотя также может использовать современные методы, такие как fetch API.

Для получения дополнительной информации можно обратиться к:Учебник по AJAX

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

  • Отправить запрос: Пользователь каким-либо образом инициирует AJAX-запрос (например, нажав кнопку).
  • Создать запрос: JavaScript создаёт объект XMLHttpRequest для связи с сервером.
  • Отправка запроса: Отправить запрос на сервер через объект XMLHttpRequest.
  • Обработка на сервере: После получения запроса сервер обрабатывает данные.
  • Возврат ответа: Сервер возвращает результат обработки клиенту.
  • Обновление страницы: После того как JavaScript получает ответ сервера, он обновляет соответствующую часть веб-страницы.

Шаги по использованию AJAX в PHP

1. Фронтенд:JavaScript инициирует AJAX-запрос.

Используйте XMLHttpRequest или fetch для отправки запроса на сервер PHP.

2. Бэкенд:PHP получает и обрабатывает запрос.

PHP получает данные из AJAX-запроса и возвращает результат.

3. Фронтенд:Обработайте данные, возвращённые PHP.

Используйте JavaScript для разбора и отображения данных ответа, полученных от PHP.

Использование AJAX в PHP

1. Создайте HTML и JavaScript: Сначала вам нужна HTML-страница и код JavaScript для отправки AJAX-запросов.

Пример

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Пример AJAX</title>
    <script>
        function sendRequest() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                   document.getElementById("result").innerHTML = xhr.responseText;
                }
            };
            xhr.open("GET", "your_php_file.php?param=value", true);
            xhr.send();
        }
    </script>
</head>
<body>
    <button onclick="sendRequest()">Отправить AJAX-запрос</button>
    <div id="result"></div>
</body>
</html>

2. Напишите PHP-скрипт:На стороне сервера вам нужен PHP-файл для обработки запроса и возврата данных.

Пример

<?php
if (isset($_GET['param'])) {
    // Обработка параметров запроса
    $param = $_GET['param'];
    // Выполнить некоторые операции...
    // Вернуть ответ
    echo "Получен параметр: " . $param;
}
?>

3. Отправка запроса:Когда пользователь нажимает кнопку, вызывается функция JavaScript sendRequest. Она создаёт объект XMLHttpRequest и отправляет запрос на сервер.

4. Обработка ответа:После того как сервер обрабатывает запрос, он возвращает результат клиенту. Клиентский код JavaScript проверяет статус ответа и обновляет содержимое страницы, когда статус равен 200 (то есть запрос выполнен успешно).

Пример AJAX PHP

Следующий пример демонстрирует, как веб-страница взаимодействует с веб-сервером, когда пользователь вводит символы в поле ввода:

Пример

Попробуйте ввести имя в поле ввода, например: Anna:

Имя:

Возвращаемое значение:



Пояснение к примеру - HTML-страница

Когда пользователь вводит символы в поле ввода выше, выполняется функция "showHint()". Эта функция запускается событием "onkeyup":

Пример

<html>
<head>
<script>
function showHint(str)
{
        if (str.length==0)
        {
                document.getElementById("txtHint").innerHTML="";
                return;
        }
        if (window.XMLHttpRequest)
        {
// Код, выполняемый браузерами IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
        }
        else
        {      
// Код, выполняемый браузерами IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
                }
        }
        xmlhttp.open("GET","gethint.php?q="+str,true);
        xmlhttp.send();
}
</script>
</head>
<body>

<p><b>Введите имя в поле ввода:</b></p>
<форма>
Имя:<input type="text" onkeyup="showHint(this.value)">
</форма>
<p>Возвращаемое значение:<span id="txtHint"></span></p>

</body>
</html>

Пояснение исходного кода:

Если поле ввода пусто (str.length==0), функция очищает содержимое заполнителя txtHint и завершает работу функции.

Если поле ввода не пусто, то showHint() выполнит следующие шаги:

  • Создать объект XMLHttpRequest
  • Создать функцию, которая будет выполнена, когда ответ сервера будет готов
  • Отправить запрос к файлу на сервере
  • Обратите внимание на параметр (q), добавленный в конец URL-адреса (содержащий содержимое поля ввода)

Серверная страница, вызываемая через JavaScript выше, — это PHP-файл с именем "gethint.php".

Исходный код в "gethint.php" проверяет массив имён и затем возвращает соответствующее имя (имена) браузеру:

Пример

<?php
// Заполните массив именами
$a[]="Анна";
$a[]="Бриттани";
$a[]="Золушка";
$a[]="Диана";
$a[]="Ева";
$a[]="Фиона";
$a[]="Гунда";
$a[]="Хеге";
$a[]="Инга";
$a[]="Йоханна";
$a[]="Китти";
$a[]="Линда";
$a[]="Нина";
$a[]="Офелия";
$a[]="Петуния";
$a[]="Аманда";
$a[]="Ракель";
$a[]="Синди";
$a[]="Дорис";
$a[]="Ева";
$a[]="Эвита";
$a[]="Суннива";
$a[]="Тове";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";

// Получить параметр q из URL-адреса запроса
$q=$_GET["q"];

// Проверить, есть ли совпадающее значение, если q>0
if (strlen($q) > 0)
{
        $hint="";
        for($i=0; $i<count($a); $i++)
        {
                if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
                {
                        if ($hint=="")
                        {
                                $hint=$a[$i];
                        }
                        else
                        {
                                $hint=$hint." , ".$a[$i];
                        }
                }
        }
}

// Если нет совпадающего значения, установите вывод в "no suggestion"
if ($hint == "")
{
        $response="no suggestion";
}
else
{
        $response=$hint;
}

// Вывести возвращаемое значение
echo $response;
?>

Пояснение: Если JavaScript отправляет любой текст (т.е. strlen($q) > 0), то происходит следующее:

  1. Поиск имён, соответствующих символам, отправленным JavaScript
  2. Если совпадений не найдено, установите строку ответа в "no suggestion"
  3. Если найдено одно или несколько совпадающих имён, установите строку ответа со всеми именами
  4. Отправить ответ в заполнитель "txtHint"

Реализация AJAX с fetch и PHP

HTML + JavaScript:

Пример

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример AJAX с PHP</title>
</head>
<body>

<h1>Пример AJAX</h1>
<button id="ajaxButton">Получить данные из PHP</button>
<div id="result"></div>

<script>
    document.getElementById('ajaxButton').addEventListener('click', function() {
// Отправить AJAX-запрос
        fetch('server.php', {
method: 'POST', // Использовать POST-запрос
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ message: "Hello from client" })
        })
.then(response => response.json()) // Разобрать как JSON
        .then(data => {
document.getElementById('result').innerHTML = data.response; // Обновить страницу
        })
        .catch(error => console.error('Ошибка:', error));
    });
</script>

</body>
</html>

PHP-сервер (server.php):

Пример

<?php
// Установить заголовки ответа для поддержки JSON
header('Content-Type: application/json');

// Получить входные данные из AJAX-запроса
$request = json_decode(file_get_contents("php://input"), истина);

// Обработать данные и вернуть ответ
if ($request['message'] === "Привет от клиента") {
    $response = array('response' => 'Привет от PHP-сервера!');
} else {
    $response = array('response' => 'Неверное сообщение');
}

// Вернуть результат клиенту
echo json_encode($response);
?>

Пояснение:

  1. Фронтенд: Когда пользователь нажимает кнопку, JavaScript используетfetch()отправляет POST-запрос наserver.php, и отправляет фрагмент JSON-данных.
  2. Бэкенд: PHP-сервер читает запрос, отправленный клиентом, обрабатывает его и возвращает JSON-ответ.
  3. Обработка ответа: После того как JavaScript получает ответ от PHP-сервера, он обновляет содержимое страницы.

Решения проблем кросс-доменных запросов PHP Ajax

Если вашим асинхронным запросам требуется кросс-доменность, вы можете проверить:Решения проблем кросс-доменных запросов PHP Ajax。

Другие расширения