Голосование
Какую 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 - это камень преткновения многих программистов. Например, у меня с ним знакомство пошло как то туго и у многих моих коллег тоже. Но это по тому что я редко им занимался, да и желанием вникнуть в него на 100% никогда не горел. А на самом деле в AJAX и асинхронных запросах к базе данных нет ничего сложного. Особенно если использовать библиотеки вроде JQuery или Prototype. В своих примерах я буду использовать JQuery. Так, что советую сразу скачать эту библиотеку или как ее еще называют - фреймворк.
В этой статье я расскажу как сделать асинхронный запрос к базе. Это позволяет получать или обрабатывать информацию без перезагрузки всей страницы. Мы можем обновить содержимое так как нам это надо. Например, только содержимое одного divа. Поехали..
Создаем два файла. Один это наша страница, а ко второму мы будем обращаться через методы JQuery.
файл index.html - страница
и второй файл ajax.php
И так, что же происходит в наших скриптах? JavaScript в файле index.php посылает запрос на файл ajax.php каждые 3 секунды
и просто подставляет полученный ответ в наш DIV с ID content. Работает это так:
$.get - функция JQuery для отправки GET запросов
{} - то что идет вторым параметром в функции - параметры GET запроса. У меня они пустые, так как мне нет нужды посылать какие либо параметры
function(data) - это функция которая будет выполнена после запроса. data - это то что вернул запрос.
В моем примитивном примере я просто вывожу все полученные данные на экран, но на самом деле возможностей море. Например можно возвращать данные в виде JSONа и парсить их. Таким образом можно использовать полученную инфу не только для вывода ее на экран но и для других действий. Например получить какие то настройки и т.д.
Пожалуй пока хватит, главное что вы теперь знаете как сделать асинхронный запрос. А усложнить его уже не проблема. В следующих статьях я расскажу как делать более сложные махинации с 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);
1
2
3
4
$.get('ajax.php', {}, function(data){
$('#content').html(data);
setTimeout("getRecords()", 3000);
});
{} - то что идет вторым параметром в функции - параметры GET запроса. У меня они пустые, так как мне нет нужды посылать какие либо параметры
function(data) - это функция которая будет выполнена после запроса. data - это то что вернул запрос.
В моем примитивном примере я просто вывожу все полученные данные на экран, но на самом деле возможностей море. Например можно возвращать данные в виде JSONа и парсить их. Таким образом можно использовать полученную инфу не только для вывода ее на экран но и для других действий. Например получить какие то настройки и т.д.
Пожалуй пока хватит, главное что вы теперь знаете как сделать асинхронный запрос. А усложнить его уже не проблема. В следующих статьях я расскажу как делать более сложные махинации с JQuery.
Надеюсь статья вам помогла.
Комментарии
-
Krevedko
Как сделать, чтобы при обновлении, кидало в низ блока (также, как это реализовано в чатах)? В js ничего не понимаю, просто html якорь не помог.Дата отправления: 4 Авг 2011
Сейчас online: 8. Зарегистрированных: 0. Гостей: 8.
AtomX 2.8 Beta - Новая версия бесплатной CMS
AtomX 2.8 Beta - Новая версия бесплатной CMS
Программирование - что может быть проще.
Программирование - что может быть проще.
AtomX 2.8 Beta - Новая версия бесплатной CMS
AtomX 2.8 Beta - Новая версия бесплатной CMS
Написание простого вируса в блокноте
Что такое API и для чего они нужны
Классы в PHP для чайников
Написание простого вируса в блокноте