AJAX и JavaScript. Загрузка контента без перезагрузки страницы (версия 1.0) Автор: Михаил Пестречихин Источник: http://www.codething.ru/ajax_js.php В данной статье речь пойдет о том, как сделать обновление контента без перезагрузки страницы, используя только JavaScript. AJAX - инструмент для построения веб-приложений, обменивающихся данными с сервером в фоновом режиме. При этом пользователь получает приложение с динамическим обновлением контента, без перезагрузки всей страницы. Как видно из аббревиатуры, основным элементом AJAX является язык программирования JavaScript. На нем-то мы и реализуем возможность загрузки контента без перезагрузки страницы. Простой пример программного кода на AJAX и JavaScript Программа загружает на странице контент по выбору пользователя, без перезагрузки всей страницы полностью. Содержимое файла index.html. <html> <head> <meta http-equiv="Content-Type" content="text/html; Charset=UTF-8"> <script> function showContent(link) { var cont = document.getElementById('contentBody'); var loading = document.getElementById('loading'); cont.innerHTML = loading.innerHTML; var http = createRequestObject(); if( http ) { http.open('get', link); http.onreadystatechange = function () { if(http.readyState == 4) { cont.innerHTML = http.responseText; } } http.send(null); } else { document.location = link; } } // создание ajax объекта function createRequestObject() { try { return new XMLHttpRequest() } catch(e) { try { return new ActiveXObject('Msxml2.XMLHTTP') } catch(e) { try { return new ActiveXObject('Microsoft.XMLHTTP') } catch(e) { return null; } } } } </script> </head> <body> <p>Какую страницу желаете открыть?</p> <form> <input onclick="showContent('page1.html')" type="button" value="Страница 1"> <input onclick="showContent('page2.html')" type="button" value="Страница 2"> </form> <div id="contentBody"> </div> <div id="loading" style="display: none"> Идет загрузка... </div> </body> </html> Рассмотрим принцип работы примера. 1. Функция createRequestObject() создает объект XMLHttpRequest() для браузеров Firefox, Opera и т.п. и его аналог для различных версий браузеров Internet Explorer. Этот объект нужен для передачи данных на сервер и получения от него ответа в фоновом режиме, без перезагрузки страницы. 2. Как видно в теле документа имеются два контейнера - contentBody и loading. В контейнер contentBody загружается непосредственно контент, а контейнер loading содержит контент, который служет заставкой и появляется на время загрузки основного требуемого контента. 3. Функция showContent() выводит контент в основной контейнер contentBody. Делает она это с использованием объекта XMLHttpRequest(). Методом open() осуществляется описание передачи данных на сервер. В качестве параметров указавается тип запроса (у нас - GET) и строка, передаваемая серверу (у нас - URL загружаемой страницы). 4. В силу особенностей объекта XMLHttpRequest(), для получения всего контента требуется дождаться, пока свойство readyState примет значение 4. Как только мы дожидаемся этого - сразу изменяем тело контейнера. Это и указано в функцииобработчике события onreadystatechenge(). 5. После открытия запроса его надо отправить на сервер, это делается методом send(). 6. Если создать объект XMLHttpRequest() по каким-либо причинам не вышло, то выполняется простая переадресация на указанную страницу, тем самым функция showContent() сохраняет свою работоспособность. В тексте примере упоминаются ссылки на файлы page1.html и page2.html, которые загружаются в область контента. Они представляют собой простые HTML-страницы или текстовые файлы с контентом. Скачать исходные файлы примера (2,8 кб): http://codething.ru/files/ajax_js_ex.zip AJAX и jQuery. Динамическое обновление контента. Основы (версия 1.0) Автор: Михаил Пестречихин Источник: http://www.codething.ru/ajax.php В данной статье речь пойдет о том, что же такое AJAX и jQuery и будут рассмотрены примеры, как их использовать. AJAX - инструмент для построения веб-приложений, обменивающихся данными с сервером в фоновом режиме. При этом пользователь получает приложение с динамическим обновлением контента, без перезагрузки всей страницы. jQuery - JavaScript-framework, библиотека, позволяющая более удобно использовать некоторые возможность Javascript, такие как: создание визуальных эффектов, обработка событий, работа с DOM и поддержка AJAX. Скачать последнюю версию jQuery и подробно ознакомиться со всеми возможностями можно на сайте разработчика: http://www.jquery.com/ В данной статье мы будем рассматривать только одну функцию библиотеки jQuery, а именно функцию $.ajax(). Эта функция позволяет нам как передавать данные на сервер, так и получать ответы от сервера и все это в фоновом режиме, без перезагрузки страницы. Настройка приема или передачи данных зависит от параметров, с которыми вызывается функция $.ajax(). Основные из них будут рассмотрены ниже. Подробнее о параметрах можно прочесть в руководстве по jQuery. Перейдем к рассмотрению примеров. Пример 1. Динамическое обновление контента по таймеру Создадим простенькую программу, отображающую текущее время, обновляемое раз в секунду по таймеру. Особенностью данной программы будет получение информации о текущем времени из другого внешнего файла. Содержимое файла index.html. <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 файла, для этого записана данная строка. <script type="text/javascript" src="jquery.js"></script> Сам файл jquery.js - находится в той же папке, что и файлы примера. 2. В теле документа создается контейнер, в который мы будем загружать контент. <div id="content"></div> 3. Странная, на первый взгляд, функция $(document).ready() требуется для корректной работы jQuery, к тому же в ней мы можем выполнить все приготовления к работе программы. В нашем случае мы вызываем функцию show(), в которой прописан механизм получения контента из другого файла, и настраиваем таймер, так, чтобы функция show() вызывалась один раз в секунду. $(document).ready(function(){ show(); setInterval('show()',1000); }); 4. Функция show() состоит из обращения к функции $.ajax() с определенным рядом параметров, которая позволяет нам в фоновом режиме получить информацию из внешнего файла на сервере. $.ajax({ url: "time.php", cache: false, success: function(html){ $("#content").html(html); } }); Рассмотрим используемые параметры функции $.ajax(). url: "time.php" Обращается к файлу time.php для получения контента. cache: false Результаты запросов не кэшируются. success: function(html){ $("#content").html(html); } При успешном выполнении запроса, управление переходит функции, которая получает контент в качестве параметра и записывает его контейнер. Запись в контейнер происходит вот в этой строке: $("#content").html(html); Содержимое файла time.php. <?php echo date("H:i:s"); ?> Смысл работы файла time.php - выводим текущее время на экран. Скачать исходные файлы примера (16,6 кб): http://codething.ru/files/ajax_ex1.zip Пример 2. Динамическое обновление контента по выбору пользователя Программа, динамически загружающая контент, по выбору пользователя. Содержимое файла index.html. <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. <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(). Рассмотрим эту функцию. $('#myForm').submit(function(){ $.ajax({ type: "POST", url: "greetings.php", data: "username="+$("#username").val(), success: function(html){ $("#content").html(html); } }); return false; }); Как мы видим, основная работа опять связана с функцией $.ajax(). В этот раз появляются дополнительные параметры, не рассмотренные в примерах 1 и 2. А именно: type: "POST" Тип передачи данных. data: "username="+$("#username").val() Параметры, передаваемые серверу. В данном случае мы передаем содержимое поля username - имя пользователя. В общем случае, параметры записываются также, как в методе GET, одной строкой, например: data: "username=Vasya&age=18&sex=male" Обратим внимание, что в конце написана строка: return false; Это сделано для того, чтобы форма не пыталась передать данные файлу, из которого она запускается и не происходило перезагрузки страницы. Содержимое файла greetings.php. <?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. Гостевая книга своими руками на PHP и MySQL. Добавляем динамизма. AJAX + jQuery (версия 1.01) Автор: Михаил Пестречихин Источник: http://www.codething.ru/guestbook2.php В статье рассмотрено применение библиотеки jQuery и технологии AJAX для динамического обновления содержимого гостевой книги без перезагрузки страницы. В качестве материала для разбора возьмем исходный код работающей гостевой книги из нашей предыдущей статьи «Гостевая книга своими руками на PHP и MySQL»: исходный код примеров (2 Кб) Для начала поймем, что же такое AJAX и jQuery и зачем они нужны? AJAX - это технология, позволяющая обмениваться данными между браузером и сервером без перезагрузок страницы, что бывает весьма удобно. jQuery – это JavaScript-библиотека, расширяющая и упрощающая разработку веб-сайтов. Помимо технологии AJAX в ней реализовано множество функций для работы с объектами (контейнерами) на веб-страницах. Официальный сайт jQuery: http://www.jquery.com/ Подробнее о динамическом обновлении контента средствами AJAX и jQuery читайте статью «AJAX и jQuery. Динамическое обновление контента. Основы». Приступим к разбору кода. Добавим в начало файла index.php строки с подключением библиотеки jQuery: <head> <script type="text/javascript" src="jquery.js"></script> </head> Далее, вынесем из файла index.php фрагмент кода, который отвечает за вывод содержимого гостевой книги, в отдельный файл show.php: <!-- блок отображения сообщений--> <?php include ("dbconnect.php"); $c=0; // выбор всех записей из БД, отсортированных так, что самая последняя отправленная запись // будет всегда первой. $r=mysql_query ("SELECT * FROM gb ORDER BY dt DESC"); while ($row=mysql_fetch_array($r)) // для каждой записи организуем вывод. { if ($c%2) $col="bgcolor='#f9f9f9'"; // цвет для четных записей else $col="bgcolor='#f0f0f0'"; // цвет для нечетных записей ?> <table border="0" cellspacing="3" cellpadding="0" width="90%" <? echo $col; ?> style="margin: 10px 0px;"> <tr> <td width="150" style="color: #999999;">Имя пользователя:</td> <td><?php echo $row['username']; ?></td> </tr> <tr> <td width="150" style="color: #999999;">Дата опубликования:</td> <td><?php echo $row['dt']; ?></td> </tr> <tr> <td colspan="2" style="color: #999999;"> --------------------------------------------------------------</td> </tr> <tr> <td colspan="2"> <?php echo $row['msg']; ?> <br> </td> </tr> </table> <?php $c++; } if ($c==0) // если ни одной записи не встретилось echo "Гостевая книга пуста!<br>"; ?> Как видим, в коде все осталось без изменений, просто теперь он находится в отдельном файле (поэтому добавилось подключение модуля dbconnect.php для соединения с БД). В файле index.php, в месте, где раньше располагался вывод, размещаем контейнер: <div id="messages"> </div> В этот контейнер мы будем динамически загружать информацию с записями гостевой книги. Далее в файле index.php следует форма ввода сообщения, её код остался практически без изменений, но: 1. Мы убрали атрибуты name, action и method, и функцию splash(), вызываемую по событию onClick (контроль заполнения формы остался, просто теперь эта проверка выполняется в другой части кода) из строки и добавили параметр id: <form id="myForm"> 2. Убрали строку со скрытым полем action <input type="hidden" name="action" value="add"> 3. Подписали id для всех полей ввода. Как видно из изменений в форме, в нашем примере полностью изменилась процедура отправки данных на сервер и получение результатов с него. Отправка данных и получение содержимого гостевой книги описано в следующем скрипте: <script> // загрузка сообщений из БД в контейнер messages function show_messages() { $.ajax({ url: "show.php", cache: false, success: function(html){ $("#messages").html(html); } }); } $(document).ready(function(){ show_messages(); // контроль и отправка данных на сервер в фоновом режиме // при нажатии на кнопку "отправить сообщение" $("#myForm").submit(function(){ var name = $("#username").val(); var msg = $("#msg").val(); if (name =='') { alert ("Заполните имя пользователя!"); return false; } if (msg =='') { alert ("Заполните текст сообщения!"); return false; } $.ajax({ type: "POST", url: "action.php", data: "username="+name+"&msg="+msg+"&action=add", success: function(msg){ show_messages(); } }); return false; }); }); </script> Для того, чтобы событие submit не приводило к обновлению страницы в браузере, функция $("#myForm").submit() всегда должа возвращать значение false; Использование библиотеки jQuery в данном примере заключается в вызове функции $.ajax(), а также для простой адресации к объектам и их параметрам, например $(“#username”).val() – получает значение из поля ввода имени пользователя (id=”username”). Функция $.ajax() отрабатывает по разному в зависимости от параметров. Например, в функции show_messages() с помощью функции $.ajax() происходит загрузка данных из файла show.php в фоновом режиме: $.ajax({ url: "show.php", cache: false, success: function(html){ $("#messages").html(html); } }); При успешной загрузке (параметр success), выполняется функция, заполняющая контейнер messages этими данными: function(html){ $("#messages").html(html); } А при обработке события нажатия на кнопку «Отправить сообщение» функция $.ajax() отправляет данные на сервер, опять же в фоновом режиме, не перегружая всю страницу: $.ajax({ type: "POST", url: "action.php", data: "username="+name+"&msg="+msg+"&action=add", success: function(msg){ show_messages(); } }); Как мы видим, здесь используется метод POST (type: "POST") для отправки данных, как и в исходном примере. Данные из параметра data передаются файлу action.php (url: "action.php"). При успешной передаче данных, выполняется функция, описанная в параметре success, т.е. мы отображаем уже новые записи гостевой книги: function(msg){ show_messages(); } Как видно из примера, загрузка и отправка сообщений гостевой книги происходит без полного обновления страницы, что экономит нам время и трафик. Скачать полные исходные коды гостевой книги с динамическим обновлением содержимого без перезагрузки страницы можно здесь, http://www.codething.ru/files/gb2.zip 19 кб.