Самый простой вариант решения вашей задачи - тег iframe
. Создаёте две страницы, - одну выводите пользователю:
<!DOCTYPE html> <!-- HTML5 -->
<html>
<head>
<!-- Заголовки страницы -->
</head>
<body>
<header>
<!-- Тут шапка сайта -->
</header>
<!-- Тег main обозначает основное содержимое сайта. Может быть только один на странице -->
<main>
<iframe src="main.php" seamless></iframe>
<!-- Параметр seamless говорит рассматривать содержимое фрейма, как часть
страницы-родителя. Размеры фрейма будут подогнаны под размер встраиваемой страницы,
границы и полосы прокрутки скрыты, к содержимому фрейма будут применены стили
страницы-родителя. -->
</main>
<footer>
<!-- А тут - подвал -->
</footer>
</body>
</html>
А на второй (main.php, в примере) формируете подгружаемые данные.
Оптимальный вариант - AJAX. Ничего сложного в этом нет, напротив, простое получение данных и вставка их внутрь указанного блока - это едва ли не основы JavaScript.
Для начала, вам следует усвоить два понятия:
- Back end (серверная часть) - код, отвечающий за обработку запросов пользователя и, в случае вебсайта, выполняемый на сервере, на котором этот сайт расположен.
- Front End (клиентская часть) - код, отвечающий за получение пользовательских команд для серверной части и вывод конечного результата её работы. В случае интернет-ресурсов, клиентская часть - это код, выполняемый браузером пользователя.
Здесь я привожу упрощённое частное определение вышеуказанных понятий, минимально необходимое для понимания этого ответа. Желающим глубже разобраться в вопросе рекомендую, для начала, обратиться в Википедию.
Чаще всего используемый в веб-разработке язык фронтенда, это JavaScript, так как он поддерживается всеми сколько-нибудь распространёнными браузерами, не требуя установки сторонних плагинов. Серверная часть, в вашем случае, написана на PHP, однако данный метод подойдёт для любого интерпретируемого серверного языка, так как фронтенд работает только с результатами работы бэкенда, но не с ним самим.
В вашем случае, фронтенд будет состоять, например, из HTML-страницы (main.html), скрипта JavaScript (script.js) и таблицы стилей, которые будут выглядеть примерно так:
main.html
<!DOCTYPE html> <!-- HTML5 -->
<html>
<head>
<title>
<!-- Здесь будет заголовок окна браузера -->
</title>
<!-- Задаём кодировку и тип данных страницы -->
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<!-- Прописываем таблицу стилей,... -->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- ...вспомогательную библиотеку и ваш скрипт -->
<script type="text/javascript" src="query-1.9.1.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready( //Выполнить, когда дерево элементов готово (jQuery)
function(){
load_main ();
}
);
</script>
<header>
<!-- Тут шапка сайта -->
</header>
<!-- Тег main обозначает основное содержимое сайта. Может быть только один на странице -->
<main>
<!-- Куда-то сюда будет загружаться изменяемый контент -->
</main>
<footer>
<!-- А тут - подвал -->
</footer>
</body>
</html>
script.js
В своём примере использовал метод ajax
кроссбраузерной JS-библиотеки jQuery, но это не означает, что вы прямо-таки обязаны поступить так же. Можете писать на чистом JavaScript (правда, это сложнее) или взять на вооружение любую другую подходящую библиотеку.
function load_main () { //Функция, получающая данные с сервера методом ajax
$.ajax({
type: "POST", //Метод передачи параметров на сервер: GET или POST
cache: false, //Кешировать ли полученные данные
url: "server.php", //Откуда берём данные
data: {
count: 5,
page: "game",
tab: "weekly_top"
}, //Какие-то параметры которые вы хотите передать на сервер.
async: true, //Асинхронная загрузка - грузить фронтенд не дожидаясь ответа сервера
success: function (html) { // Что делаем, если данные успешно получены.
$("main").prepend(html); //Добавить html код, сгенерированный сервером, в начало
//контейнера main
}
});
}
Если вам надо передать на сервер какие-либо параметры, просто впишите их в параметр data
метода $.ajax
. Например, приведённый код загрузит в main
результат такого запроса к серверу:
server.php?count=5&page=game&tab=weekly_top
Про таблицу стилей просто скажем, что она есть.
Ваша серверная часть будет состоять из файлов PHP, к одному из которых (server.php) мы с вами обращались методом $.ajax
в скрипте-примере. На серверной части для вас ничего не поменяется, кроме того, что вам надо будет генерировать лишь содержимое контейнера main
, а не весь документ.
Приведённый вариант загрузки данных далеко не идеален, его единственное достоинство - простота. Правильный подход к архитектуре веб-приложения предполагает, что бекэнд лишь передаст фронтенду данные, необходимые для генерации страницы, например, в виде объекта JSON, а уже фронтенд сгенерирует страницу, на основе этих данных. Такой метод требует более глубокого изучения JavaScript, но позволит вам минимизировать нагрузку на сервер, который будет лишь забирать данные от API, всю генерацию страниц оставляя компьютеру пользователя.