AJAX и JavaScript
advertisement
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 кб.
