Голосование
Какую CMS Вы предпочитаете
AtomX
Fapos CMS
Drunya CMS
Топ новостей
- Генератор аватарок в стиле пиксель-арт
- Скачать Fapos CMS 1.1.8 Бесплатно
- Цунами в Японии. Последствия.
- Предварительная инфа о FAPOS 1.1.9. Часть 2
- Описание версии CMS Fapos 0.9.9
- Новая версия Fapos 1.3
- Половина россиян не смогла отличить легальный контент
- Что есть Fapos CMS
- Убийца Apache у вас на пороге
- Открытое тестирование Fapos 0.9.9
Последние комментарии
Топ пользователей
Сайты на AtomX CMS
И так, по просьбам некоторых пользователей, я наконец, дошел до написания этого мануала по AJAX. Мануалом это назвать вряд ли можно будет, но за то вы поймете как совершать асинхронные запросы при помощи технологии AJAX и как оживить свои странички и добавить им интерактивности. И самое приятное в этом то, что это почти ничего не стоит. Всего пара строк кода)
AJAX - это технология, позволяющая совершать асинхронные запросы к базе данных, например MySQL. То есть вы можете получить данные без перезагрузки страницы. А так же отобразить загрузки статусбаром(вращающейся картинкой или чем то подобным).
Очень просто. По сути все что нам для этого надо, это основной скрипт - наша страничка, которую мы будем показывать пользователю, и небольшой вспомогательный скрипт, который будет отдавать нам нужные данные. Отдавать данные он будет, просто выводя их на экран, сразу в нужном нам виде. В более сложных примерах, данные отдаются в JSON'е и уже на лету из них формируется нужное представление, но я считаю, что в большинстве случаев это лишнее усложнение.
Страница index.php
Как видите, мы использовали JQuery что бы упростить задачу. Это нормально, и так поступают почти всегда. Ведь, если пытаться самому написать класс для отправки HTTP запросов, который будет работать в любом браузере, можно сойти с ума. По этому я рекомендую даже не думать о таких вещах, а просто использовать JQuery или Prototype. Их без труда можно скачать в интернете.
Файл data.php
И так, у нас есть страница с ссылкой, по нажатии на которую вызывается функция getData(). Разберем эту функцию по строчно.
$('#ajax_loader.gif').show(); Делаем видимым картинку статусбара
$.get('data.php', function(data) Делаем запрос на вспомогательную страницу
$('#testAjax').html(data); Помещаем контент полученный с вспомогательной страницы в див с ИД testAjax
$('#ajax_loader.gif').hide(); Скрываем статусбар
Вот и все. После нажатия на кнопку вы увидите gif'ку, символизирующую загрузку данных(конечно ее надо положить в паку со скриптами), после чего данные загрузятся в контейнер(див) и картинка пропадет, дав понять, что загрузка завершилась.
Хочу обратить внимание, что приведенный мной метод является простым и быстрым методом, но есть и более сложные методы, проверяющие статусы вернувшегося ответа. Я посчитал это лишним в рамках данной статьи, так как для простых задач этого метода вполне достаточно.
Для начала, разберемся что такое AJAX?
AJAX - это технология, позволяющая совершать асинхронные запросы к базе данных, например MySQL. То есть вы можете получить данные без перезагрузки страницы. А так же отобразить загрузки статусбаром(вращающейся картинкой или чем то подобным).
Как воспользоваться прелестями AJAX если я ничего об этом не знаю?
Очень просто. По сути все что нам для этого надо, это основной скрипт - наша страничка, которую мы будем показывать пользователю, и небольшой вспомогательный скрипт, который будет отдавать нам нужные данные. Отдавать данные он будет, просто выводя их на экран, сразу в нужном нам виде. В более сложных примерах, данные отдаются в JSON'е и уже на лету из них формируется нужное представление, но я считаю, что в большинстве случаев это лишнее усложнение.
Примеры использования AJAX
Страница index.php
Code:
<html>
<head>
<title>Заголовок AJAX страницы</title>
<script language="JavaScript" type="text/javascript" src="../sys/js/jquery-1.5.2.min.js"></script>
</head>
<body>
<img src="ajax_loader.gif" style="display:none;" id="ajaxLoader2" />
<div id="testAjax"></div><br />
<a href="javascript://" onClick="return getData();">Тынц</a>
<script type="text/javascript">
function getData() {
$('#ajaxLoader2').show();
$.get('data.php', function(data) {
$('#testAjax').html(data);
$('#ajaxLoader2').hide();
});
return;
}
</script>
</body>
</html>
<head>
<title>Заголовок AJAX страницы</title>
<script language="JavaScript" type="text/javascript" src="../sys/js/jquery-1.5.2.min.js"></script>
</head>
<body>
<img src="ajax_loader.gif" style="display:none;" id="ajaxLoader2" />
<div id="testAjax"></div><br />
<a href="javascript://" onClick="return getData();">Тынц</a>
<script type="text/javascript">
function getData() {
$('#ajaxLoader2').show();
$.get('data.php', function(data) {
$('#testAjax').html(data);
$('#ajaxLoader2').hide();
});
return;
}
</script>
</body>
</html>
Как видите, мы использовали JQuery что бы упростить задачу. Это нормально, и так поступают почти всегда. Ведь, если пытаться самому написать класс для отправки HTTP запросов, который будет работать в любом браузере, можно сойти с ума. По этому я рекомендую даже не думать о таких вещах, а просто использовать JQuery или Prototype. Их без труда можно скачать в интернете.
Файл data.php
1
2
3
4
5
<?php $sql = "SELECT * FROM `table`";
$query = mysql_query($sql);
while (false !== ($res = mysql_fetch_assoc($query))) {
echo $res['fieldd'] . '<br />';
}?>
Что тут происходит?
И так, у нас есть страница с ссылкой, по нажатии на которую вызывается функция getData(). Разберем эту функцию по строчно.
$('#ajax_loader.gif').show(); Делаем видимым картинку статусбара
$.get('data.php', function(data) Делаем запрос на вспомогательную страницу
$('#testAjax').html(data); Помещаем контент полученный с вспомогательной страницы в див с ИД testAjax
$('#ajax_loader.gif').hide(); Скрываем статусбар
Вот и все. После нажатия на кнопку вы увидите gif'ку, символизирующую загрузку данных(конечно ее надо положить в паку со скриптами), после чего данные загрузятся в контейнер(див) и картинка пропадет, дав понять, что загрузка завершилась.
На последок
Хочу обратить внимание, что приведенный мной метод является простым и быстрым методом, но есть и более сложные методы, проверяющие статусы вернувшегося ответа. Я посчитал это лишним в рамках данной статьи, так как для простых задач этого метода вполне достаточно.
Перестаем бояться AJAX. Все очень просто
Теги: Учим AJAX асинхронные запросы javascript для новичков;
Теги: Учим AJAX асинхронные запросы javascript для новичков;
Сейчас online: 2. Зарегистрированных: 0. Гостей: 2.
AtomX 2.8 Beta - Новая версия бесплатной CMS
AtomX 2.8 Beta - Новая версия бесплатной CMS
Программирование - что может быть проще.
Программирование - что может быть проще.
AtomX 2.8 Beta - Новая версия бесплатной CMS
AtomX 2.8 Beta - Новая версия бесплатной CMS
Написание простого вируса в блокноте
Что такое API и для чего они нужны
Классы в PHP для чайников
Написание простого вируса в блокноте