Язык
Контакты
GitHub
Поддержка
Регистрация
Войти
Логин: Пароль: Запомнить:
Пользователи
Голосование

    Какую CMS Вы предпочитаете

    AtomX
    Fapos CMS
    Drunya CMS
Последние комментарии
Автор: чайник, в новости:

Что такое API и для чего они нужны

Автор: HIshnik, в новости:

Классы в PHP для чайников

Автор: Аноним, в новости:

Написание простого вируса в блокноте

Автор: stream, в новости:

Создаем BB коды на PHP

Топ пользователей
Drunya
Репутация: 108
Сообщений: 3527
Сашка_из_Шебекино
Репутация: 87
Сообщений: 1803
boriska
Репутация: 65
Сообщений: 846
ARMI
Репутация: 46
Сообщений: 1858
BAH0
Репутация: 26
Сообщений: 544
И так, по просьбам некоторых пользователей, я наконец, дошел до написания этого мануала по AJAX. Мануалом это назвать вряд ли можно будет, но за то вы поймете как совершать асинхронные запросы при помощи технологии AJAX и как оживить свои странички и добавить им интерактивности. И самое приятное в этом то, что это почти ничего не стоит. Всего пара строк кода)



Для начала, разберемся что такое 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>

Как видите, мы использовали 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 для новичков;
Автор: Drunya
Категория: JavaScript
Просмотров: 3129
Комментариев: 0

Сейчас online: 19. Зарегистрированных: 1. Гостей: 18.
-->