AJAX XML
Узнайте, как загружать XML-данные через AJAX из PHP-скрипта и отображать их на странице без перезагрузки. Пример с XMLHttpRequest и разбором DOM.
В этой главе показано, как загружать XML-данные из PHP-скрипта с помощью AJAX и отображать их на странице без полной перезагрузки. Вы создадите небольшой PHP-эндпоинт, возвращающий XML, запросите его в браузере через XMLHttpRequest, разберёте ответ с помощью DOM и вставите результат на страницу.
Если вы только знакомитесь с темой, сначала прочитайте главы Введение в AJAX и AJAX с PHP.
Что такое AJAX?
AJAX (Asynchronous JavaScript and XML) — это техника, позволяющая браузеру обмениваться данными с сервером в фоновом режиме и обновлять только часть страницы, не перезагружая весь документ. Браузер отправляет HTTP-запрос из JavaScript, получает ответ и использует его для изменения DOM. Это снижает воспринимаемую задержку и нагрузку на сервер.
Что такое XML?
XML (Extensible Markup Language) — текстовый формат для хранения и передачи структурированных данных с использованием вложенных тегов. Он понятен человеку и самоописывается, что делает его удобным транспортным форматом между PHP-сервером и браузером. Когда сервер отправляет XML с заголовком Content-Type: text/xml, браузер автоматически разбирает его и предоставляет как дерево DOM через свойство responseXML запроса.
Зачем использовать PHP, AJAX и XML вместе?
В этом паттерне PHP запрашивает данные из источника (базы данных или файла) и формирует XML-документ, браузер запрашивает этот документ через AJAX, а JavaScript преобразует XML-узлы в HTML. В результате страница обновляет часть содержимого по запросу. XML работает, однако большинство современных приложений теперь отправляют JSON, поскольку JavaScript разбирает его нативно — см. замечание в заключении.
Как использовать PHP, AJAX и XML вместе
Чтобы использовать PHP, AJAX и XML вместе, выполните следующие шаги:
- Создайте PHP-скрипт, который извлекает данные из базы данных или файла.
- Используйте AJAX для вызова PHP-скрипта и получения данных.
- Разберите XML-ответ в JavaScript, преобразуйте его в HTML-элементы и отобразите на веб-странице.
Шаг 1: Создание PHP-скрипта
Первый шаг — создать PHP-скрипт, который извлекает данные из базы данных или файла. Этот скрипт будет отвечать за получение данных, которые будут отображены на веб-странице.
Ниже приведён пример PHP-скрипта, извлекающего данные из базы данных:
Пример PHP-скрипта, извлекающего данные из базы данных
<?php
// Connect to database
$con = mysqli_connect("localhost","username","password","database");
if (!$con) {
die("Connection failed: " . mysqli_connect_error());
}
// Retrieve data from database
// Note: Ensure the database contains a table named 'table' with columns: title, description, price
// Note: In production, use prepared statements to prevent SQL injection
$result = mysqli_query($con,"SELECT * FROM table");
// Set content type to XML
header('Content-Type: text/xml');
echo '<?xml version="1.0"?>';
echo '<items>';
// Loop through the results and add them to XML
while($row = mysqli_fetch_array($result)) {
echo '<item>';
echo '<title>' . htmlspecialchars($row['title']) . '</title>';
echo '<description>' . htmlspecialchars($row['description']) . '</description>';
echo '<price>' . htmlspecialchars($row['price']) . '</price>';
echo '</item>';
}
echo '</items>';
?>Примечание: в продакшене замените жёстко заданные учётные данные переменными окружения и добавьте обработку ошибок подключения к базе данных.
Шаг 2: Вызов PHP-скрипта через AJAX
Следующий шаг — использовать AJAX для вызова PHP-скрипта и получения данных. Сначала убедитесь, что HTML-страница содержит контейнерный элемент, в который будут вставлены полученные данные:
<div id="data-container"></div>Ниже приведён пример AJAX-скрипта, вызывающего PHP-скрипт, созданный на шаге 1:
Пример использования AJAX для вызова PHP-скрипта и получения данных
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {
var xmlDoc = this.responseXML;
var items = xmlDoc.getElementsByTagName("item");
var container = document.getElementById("data-container");
container.innerHTML = ""; // Clear previous data
for (var i = 0; i < items.length; i++) {
var title = items[i].getElementsByTagName("title")[0].textContent;
var desc = items[i].getElementsByTagName("description")[0].textContent;
var price = items[i].getElementsByTagName("price")[0].textContent;
var div = document.createElement("div");
div.className = "item";
div.innerHTML = "<h3>" + title + "</h3><p>" + desc + "</p><span>" + price + "</span>";
container.appendChild(div);
}
} else {
console.error("Request failed with status: " + this.status);
var container = document.getElementById("data-container");
container.innerHTML = "<p>Error loading data.</p>";
}
}
};
xmlhttp.open("GET", "getdata.php", true);
xmlhttp.send();Примечание: убедитесь, что PHP-скрипт не выводит пробелы или BOM перед XML-декларацией, иначе this.responseXML вернёт null. При необходимости добавьте ob_clean(); в начало PHP-файла. Если ваш PHP-скрипт размещён на другом домене, убедитесь, что сервер отправляет соответствующие заголовки CORS (например, Access-Control-Allow-Origin: *).
Шаг 3: Форматирование данных и их отображение на веб-странице
Браузер предоставляет XML-ответ как дерево DOM через this.responseXML, поэтому JavaScript из шага 2 уже выполняет разбор: getElementsByTagName("item") возвращает узлы <item>, а textContent читает значение каждого дочернего элемента. Для типичного ответа сервера XML, сформированный PHP-скриптом из шага 1, выглядит следующим образом:
Пример форматирования и отображения XML-данных
<items>
<item>
<title>Item 1</title>
<description>This is the description of item 1.</description>
<price>$10.00</price>
</item>
<item>
<title>Item 2</title>
<description>This is the description of item 2.</description>
<price>$20.00</price>
</item>
<item>
<title>Item 3</title>
<description>This is the description of item 3.</description>
<price>$30.00</price>
</item>
</items>После разбора JavaScript создаёт стандартные HTML-элементы (такие как <div>, <h3> и <span>), которые затем можно стилизовать с помощью CSS. Ниже приведён пример CSS, соответствующего сгенерированной HTML-структуре:
Пример CSS для стилизации отображаемых данных
.item {
border: 1px solid #ccc;
padding: 10px;
margin: 10px 0;
border-radius: 4px;
}
.item h3 { margin: 0 0 5px; }
.item span { color: #2a9d8f; font-weight: bold; }Заключение
Совместное использование PHP, AJAX и XML позволяет разработчикам создавать динамические веб-страницы, обновляющие конкретный контент без полной перезагрузки. Следуя описанным выше шагам, вы сможете реализовать этот паттерн для улучшения пользовательского опыта и снижения нагрузки на сервер.
Примечание: несмотря на то что в этом руководстве XML и XMLHttpRequest используются в учебных целях, современные веб-приложения, как правило, предпочитают JSON и fetch API для обмена данными через AJAX благодаря нативной поддержке в JavaScript и более простому синтаксису. Чтобы формировать JSON из PHP, используйте json_encode().
Связанные главы
- Введение в AJAX — основы
XMLHttpRequestи жизненного цикла запроса. - AJAX и PHP — вызов PHP-скриптов из браузера.
- AJAX и база данных — получение строк из базы данных через AJAX.
- PHP SimpleXML — разбор XML на стороне сервера с помощью PHP.