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

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

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

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

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

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

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

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

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

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

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

Релиз Atom-M CMS 4

Автор: 0leg, в новости:

Релиз Atom-M CMS 4

Топ пользователей
Drunya
Репутация: 108
Сообщений: 3531
Сашка_из_Шебекино
Репутация: 87
Сообщений: 1803
boriska
Репутация: 65
Сообщений: 846
ARMI
Репутация: 46
Сообщений: 1859
BAH0
Репутация: 26
Сообщений: 544
Думаю я буду прав, если скажу, что AJAX - это камень преткновения многих программистов. Например, у меня с ним знакомство пошло как то туго и у многих моих коллег тоже. Но это по тому что я редко им занимался, да и желанием вникнуть в него на 100% никогда не горел. А на самом деле в AJAX и асинхронных запросах к базе данных нет ничего сложного. Особенно если использовать библиотеки вроде JQuery или Prototype. В своих примерах я буду использовать JQuery. Так, что советую сразу скачать эту библиотеку или как ее еще называют - фреймворк.

В этой статье я расскажу как сделать асинхронный запрос к базе. Это позволяет получать или обрабатывать информацию без перезагрузки всей страницы. Мы можем обновить содержимое так как нам это надо. Например, только содержимое одного divа. Поехали..
Создаем два файла. Один это наша страница, а ко второму мы будем обращаться через методы JQuery.

файл index.html - страница
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
<title>Тестовая страница - учимся использовать AJAX</title>
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
function getRecords() {
    $.get('ajax.php', {}, function(data){
       $('#content').html(data);
           setTimeout("getRecords()", 3000);
    });
}
getRecords();;
</script>
<div id="content"></div>
</body>
</html>

и второй файл ajax.php
 1 
 2 
 3 
 4 
 5 
 6 
 7 
<?php $output '';
$sql "SELECT * FROM `table`";
$query mysql_query($sql);
while (
false !== ($result mysql_fetch_assoc($query))) {
    
$output .= result['field'] . '<br>';
}
echo 
$output;?>

И так, что же происходит в наших скриптах? JavaScript в файле index.php посылает запрос на файл ajax.php каждые 3 секунды
Code:
setTimeout("getRecords()", 3000);
и просто подставляет полученный ответ в наш DIV с ID content. Работает это так:
1
2
3
4
$.get('ajax.php', {}, function(data){
       $('#content').html(data);
           setTimeout("getRecords()", 3000);
    });
$.get - функция JQuery для отправки GET запросов
{} - то что идет вторым параметром в функции - параметры GET запроса. У меня они пустые, так как мне нет нужды посылать какие либо параметры
function(data) - это функция которая будет выполнена после запроса. data - это то что вернул запрос.


В моем примитивном примере я просто вывожу все полученные данные на экран, но на самом деле возможностей море. Например можно возвращать данные в виде JSONа и парсить их. Таким образом можно использовать полученную инфу не только для вывода ее на экран но и для других действий. Например получить какие то настройки и т.д.

Пожалуй пока хватит, главное что вы теперь знаете как сделать асинхронный запрос. А усложнить его уже не проблема. В следующих статьях я расскажу как делать более сложные махинации с JQuery.

Надеюсь статья вам помогла.
Что такое AJAX и с чем его едят

Теги: Jquery? AJAX асинхронные запросы к базе данных;
Автор: Drunya
Категория: JavaScript
Просмотров: 2258
Комментариев: 1

Комментарии
  • User avatar

    Krevedko

    Как сделать, чтобы при обновлении, кидало в низ блока (также, как это реализовано в чатах)? В js ничего не понимаю, просто html якорь не помог.
    Дата отправления: 4 Авг 2011
Сейчас online: 6. Зарегистрированных: 0. Гостей: 6.
-->