
В данной статье речь пойдет о том, что же такое AJAX и jQuery и будут рассмотрены примеры, как их использовать.
AJAX – инструмент для построения веб-приложений, обменивающихся данными с сервером в фоновом режиме. При этом пользователь получает приложение с динамическим обновлением контента, без перезагрузки всей страницы.
jQuery – JavaScript-framework, библиотека, позволяющая более удобно использовать некоторые возможность Javascript, такие как: создание визуальных эффектов, обработка событий, работа с DOM и поддержка AJAX.
В данной статье мы будем рассматривать только одну функцию библиотеки jQuery, а именно функцию $.ajax(). Эта функция позволяет нам как передавать данные на сервер, так и получать ответы от сервера и все это в фоновом режиме, без перезагрузки страницы. Настройка приема или передачи данных зависит от параметров, с которыми вызывается функция $.ajax(). Основные из них будут рассмотрены ниже. Подробнее о параметрах можно прочесть в руководстве по jQuery.
Перейдем к рассмотрению примеров.
Важно!
Для того, чтобы примеры работали корректно, необходимо:
1. Все файлы должны быть записаны в кодировке UTF-8.
2. Скрипты должны выполняться на веб-сервере, а не запускаться в браузере, как файл.
Пример 1. Динамическое обновление контента по таймеру
Создадим простенькую программу, отображающую текущее время, обновляемое раз в секунду по таймеру. Особенностью данной программы будет получение информации о текущем времени из другого внешнего файла.
Содержимое файла index.html.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<html> <head> <meta http-equiv="Content-Type" content="text/html; Charset=UTF-8"> <script type="text/javascript" src="jquery.js"></script> </head> <body> <div id="content"></div> <script> function show() { $.ajax({ url: "time.php", cache: false, success: function(html){ $("#content").html(html); } }); } $(document).ready(function(){ show(); setInterval('show()',1000); }); </script> </body> </html> |
В коде имеются несколько особенностей, поясним их.
1. Подключение библиотеки jQuery происходит в заголовке HTML файла, для этого записана данная строка.
1 |
<script type="text/javascript" src="jquery.js"></script> |
Сам файл jquery.js – находится в той же папке, что и файлы примера. 2. В теле документа создается контейнер, в который мы будем загружать контент.
1 |
<div id="content"></div> |
3. Странная, на первый взгляд, функция $(document).ready() требуется для корректной работы jQuery, к тому же в ней мы можем выполнить все приготовления к работе программы. В нашем случае мы вызываем функцию show(), в которой прописан механизм получения контента из другого файла, и настраиваем таймер, так, чтобы функция show() вызывалась один раз в секунду.
1 2 3 4 |
$(document).ready(function(){ show(); setInterval('show()',1000); }); |
4. Функция show() состоит из обращения к функции $.ajax() с определенным рядом параметров, которая позволяет нам в фоновом режиме получить информацию из внешнего файла на сервере.
1 2 3 4 5 6 7 |
$.ajax({ url: "time.php", cache: false, success: function(html){ $("#content").html(html); } }); |
Рассмотрим используемые параметры функции $.ajax().
1 |
url: "time.php" |
Обращается к файлу time.php для получения контента.
1 |
cache: false |
Результаты запросов не кэшируются.
1 2 3 |
success: function(html){ $("#content").html(html); } |
При успешном выполнении запроса, управление переходит функции, которая получает контент в качестве параметра и записывает его контейнер. Запись в контейнер происходит вот в этой строке:
1 |
$("#content").html(html); |
Содержимое файла time.php.
1 |
<?php echo date("H:i:s"); ?> |
Смысл работы файла time.php – выводим текущее время на экран. Скачать исходные файлы примера (16,6 кб):
http://codething.ru/files/ajax_ex1.zip
Пример 2. Динамическое обновление контента по выбору пользователя
Программа, динамически загружающая контент, по выбору пользователя.
Содержимое файла index.html.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<html> <head> <meta http-equiv="Content-Type" content="text/html; Charset=UTF-8"> <script type="text/javascript" src="jquery.js"></script> </head> <body> <p>Какую страницу желаете открыть?</p> <form> <input id="btn1" type="button" value="Страница 1"> <input id="btn2" type="button" value="Страница 2"> </form> <div id="content"></div> <script> $(document).ready(function(){ $('#btn1').click(function(){ $.ajax({ url: "page1.html", cache: false, success: function(html){ $("#content").html(html); } }); }); $('#btn2').click(function(){ $.ajax({ url: "page2.html", cache: false, success: function(html){ $("#content").html(html); } }); }); }); </script> </body> </html> |
В теле документа создана форма, имеющая две кнопки, посредством которых пользователь осуществляет выбор желаемого контента. И контейнер для загрузки контента.
Загрузка динамического контента в контейнер осуществляется аналогично примеру 1. Разница лишь в том, что грузится различный контент, если происходят разные события.
Событие нажатия на кнопку “Страница 1” обрабатывается функцией $(‘#btn1’).click(), а событие нажатия на кнопку “Страница 2” обрабатывается функцией $(‘#btn2’).click().
Содержимое файлов page1.html и page2.html, которые загружаются в область контента динамически, представляет собой простые HTML-страницы или текстовые файлы с контентом.
Скачать исходные файлы примера (18,4 кб):
http://codething.ru/files/ajax_ex2.zip
Пример 3. Отправка данных на сервер в фоновом режиме и получение контента
Рассмотрим пример, отправляющий введенное имя пользователя на сервер. Сервер при получении имени выдает приветствие и подсчитывает количество символов в введенном имени.
Содержимое файла index.html.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<html> <head> <meta http-equiv="Content-Type" content="text/html; Charset=UTF-8"> <script type="text/javascript" src="jquery.js"></script> </head> <body> <form id="myForm"> Введите имя:<br/> <input id="username" type="text" size="20"><br/><br/> <input type="submit" value="Отправить"> </form> <div id="content"></div> <script> $(document).ready(function(){ $('#myForm').submit(function(){ $.ajax({ type: "POST", url: "greetings.php", data: "username="+$("#username").val(), success: function(html){ $("#content").html(html); } }); return false; }); }); </script> </body> </html> |
В теле документа создана форма для ввода имени пользователя. И контейнер для загрузки динамического контента.
Заметим, что сама форма не имеет привычных полей action и method. В качестве обработчика события нажатия на кнопку “Отправить”, выступает функция $(‘#myForm’).submit(). Рассмотрим эту функцию.
1 2 3 4 5 6 7 8 9 10 11 |
$('#myForm').submit(function(){ $.ajax({ type: "POST", url: "greetings.php", data: "username="+$("#username").val(), success: function(html){ $("#content").html(html); } }); return false; }); |
Как мы видим, основная работа опять связана с функцией $.ajax(). В этот раз появляются дополнительные параметры, не рассмотренные в примерах 1 и 2. А именно:
1 |
type: "POST" |
Тип передачи данных.
1 |
data: "username="+$("#username").val() |
Параметры, передаваемые серверу. В данном случае мы передаем содержимое поля username – имя пользователя. В общем случае, параметры записываются также, как в методе GET, одной строкой, например:
1 |
data: "username=Vasya&age=18&sex=male" |
Обратим внимание, что в конце написана строка:
1 |
return false; |
Это сделано для того, чтобы форма не пыталась передать данные файлу, из которого она запускается и не происходило перезагрузки страницы.
Содержимое файла greetings.php.
1 2 3 4 |
<?php echo "Приветствую, <b>".$_REQUEST['username']."</b>!<br>"; echo "В вашем имени букв: ".strlen($_REQUEST['username'])."."; ?> |
Выводим на экран приветствие и подсчитываем количество символов в имени.
Скачать исходные файлы примера (16,8 кб):
http://codething.ru/files/ajax_ex3.zip
В качестве еще одного примера использования AJAX и jQuery можно посмотреть гостевую книгу из статьи
«Гостевая книга своими руками на PHP и MySQL. Добавляем динамизма. AJAX + jQuery».
Стоит сказать в заключении, что кроме очевидных плюсов создания страниц с использованием динамического обновляющегося контента, есть ряд недостатков, которые следует учитывать при разработке сайта, а именно:
1. На страницах с динамическим обновлением контента, кнопка “Назад” в браузере не работает корректно.
2. Страницы с динамическим обновлением контента не меняют URL, в зависимости от своего содержимого, поэтому не могут быть добавлены в закладки.
3. Страницы с динамическим обновлением контента не индексируются поисковыми системами, т.к. они не выполняют команды JavaScript.
От приведенных недостатов можно избавиться программным путем. В данной статье такие способы не рассматриваются.
Источник: http://www.codething.ru
Статья хорошая, понятная. Но как при изменении контента менять URL, чтобы иметь возможность обращаться напрямую.