До этой статьи на сайте был приведен
пример работы ajax, но я не считаю его исчерпывающим, поэтому давайте попытаемся написать маленький сайтик из пары страниц, переход между которыми осуществлялся бы при помощи ajax.
Для примера сделаем некоторое подобие сайта фотостудии. Главная страница будет содержать общую информацию о студии, страница "контакты" будет содержать способы связи со студией, страница "работы" будет содержать фотографии. Для первого раза хватит :)
Вот, как будет выглядеть код без аякса:
<?php
$go=$_GET['go']; //формируем имя короткой переменной из глобального массива
if ($go == "") { //если выбрана главная страница
$content="Информация о нас"; //содержимое страницы
$title="О нас"; //заголовок страницы
}
if ($go == "contacts") { //если выбрана страница контактов
$content="Связь с нами"; //содержимое страницы
$title="Контакты"; //заголовок страницы
}
if ($go == "works") { //если выбрана страница портфолио
$content="Наши работы"; //содержимое страницы
$title="Портфолио"; //заголовок страницы
}
echo <<<HTML
<html>
<head>
<title>Фотостудия - $title</title>
</head>
<body>
<a href="index.php">О нас</a> <a href="index.php?go=contacts">Контакты</a> <a href="index.php?go=works">Наши работы</a><br />
$content
</body>
</html>
HTML;
?>
Можете сохранить этот код и попробовать его. Все работает предельно просто. Через ссылку передаем значение переменной $go, а потом уже обрабатываем его и выводим соответственные заголовки и контент. Теперь попытаемся разбить содержимое страницы на несколько логических частей:
1) Заголовок - изменяется при переходе на новую страницу
2) Меню - везде неизменно
3) Содержимое - изменяется при переходе на новую страницу
В итоге можно сделать вывод, что менять то надо только заголовок и содержание. Сейчас я приведу пример, который демонстрирует, как можно изменять только содержание в зависимости от ссылки на ajax (с заголовком мы разберемся чуть позже). Для этого я буду использовать библиотеку jQuery. Ее скачать Вы можете где угодно. Она распространяется свободно (открытый исходный код) и бесплатно. Просто наберите в гугле "jQuery скачать". Я не буду выкладывать библиотеку, т. к. она постепенно обновляется.
<?php
$go=$_GET['go']; //формируем имя короткой переменной из глобального массива
if ($go == "") { //если выбрана главная страница
$content="Информация о нас"; //содержимое страницы
$title="О нас"; //заголовок страницы
}
if ($go == "contacts") { //если выбрана страница контактов
$content="Связь с нами"; //содержимое страницы
$title="Контакты"; //заголовок страницы
}
if ($go == "works") { //если выбрана страница портфолио
$content="Наши работы"; //содержимое страницы
$title="Портфолио"; //заголовок страницы
}
if ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') die ($content); //если запрос сделал по ajax
echo <<<HTML
<html>
<head>
<script language="javascript" src="jquery-1.2.6.pack.js"></script> <!--подключаем библиотеку-->
<script language="javascript">
$(document).ready(function(){ //если DOM готов к манипуляции
$("a").click(function(){ // если ссылка нажата
var id=$(this).attr('id'); //получаем id нажатой ссылки
$.ajax({
type: "GET", //метод отправки: GET или POST
data: "go="+id, //данные, которые отправляем серверу
cache: false, //функция кеширования
url: "index.php", //скрипт, которому отправляется запрос.
beforeSend: function(){
//перед отправкой запроса что-то делаем, например:
alert ("Отправляем запрос");
},
success: function(response){
//при успешном ответе сервера что-то делаем, например:
alert ("Ответ успешно получен");
$("#content").html (response);
}
});
return false;
});
});
</script>
<title>Фотостудия - $title</title>
</head>
<body>
<a href="index.php" id="about">О нас</a> <a href="index.php?go=contacts" id="contacts">Контакты</a> <a href="index.php?go=works" id="works">Наши работы</a><br />
<div id="content">
$content
</div>
</body>
</html>
HTML;
?>
А теперь разберемся, что же изменилось. Сначала я ко всем ссылкам добавил id, чтобы однозначно идентифицировать их. Затем для контента выделил "контейнер" - div c id="content". В нем у нас будет храниться контент, в него же и с помощью ajax мы будем кидать контент. А теперь объясню значение строчки
if ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') die ($content); //если запрос сделал по ajax
Определить, запрашивают ли PHP страницу с помощью ajax, можно этим условием. Если запрос идет по ajax, то переменная $_SERVER['HTTP_X_REQUESTED_WITH'] будет равна 'XMLHttpRequest'. die () я использую потому что нет надобности исполнять остальную часть кода. Если кто не знает, функция die () выполняет то, что ей передается и после этого выполняется завершение интерпретации. Если передается строка, то она и выводится, как в этом примере. В принципе в PHP коде больше нет изменений. Теперь подключаем библиотеку и пишем собственно код javascript. Подробный разбор javascript кода я написал
здесь.
