AJAX и jQuery. Динамическое обновление контента. Основы

В данной статье речь пойдет о том, что же такое AJAX и jQuery и будут рассмотрены примеры, как их использовать.

AJAX – инструмент для построения веб-приложений, обменивающихся данными с сервером в фоновом режиме. При этом пользователь получает приложение с динамическим обновлением контента, без перезагрузки всей страницы.

jQuery – JavaScript-framework, библиотека, позволяющая более удобно использовать некоторые возможность Javascript, такие как: создание визуальных эффектов, обработка событий, работа с DOM и поддержка AJAX.

В данной статье мы будем рассматривать только одну функцию библиотеки jQuery, а именно функцию $.ajax(). Эта функция позволяет нам как передавать данные на сервер, так и получать ответы от сервера и все это в фоновом режиме, без перезагрузки страницы. Настройка приема или передачи данных зависит от параметров, с которыми вызывается функция $.ajax(). Основные из них будут рассмотрены ниже. Подробнее о параметрах можно прочесть в руководстве по jQuery.

Перейдем к рассмотрению примеров.

Важно!
Для того, чтобы примеры работали корректно, необходимо:
1. Все файлы должны быть записаны в кодировке UTF-8.
2. Скрипты должны выполняться на веб-сервере, а не запускаться в браузере, как файл.

Пример 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>

<html>

<head>

</head>

<body>

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>

1	<script type="text/javascript" src="jquery.js"></script>

Сам файл jquery.js – находится в той же папке, что и файлы примера. 2. В теле документа создается контейнер, в который мы будем загружать контент.

<div id="content"></div>

1	<div id="content"></div>

3. Странная, на первый взгляд, функция $(document).ready() требуется для корректной работы jQuery, к тому же в ней мы можем выполнить все приготовления к работе программы. В нашем случае мы вызываем функцию show(), в которой прописан механизм получения контента из другого файла, и настраиваем таймер, так, чтобы функция show() вызывалась один раз в секунду.

    $(document).ready(function(){  
        show();  
        setInterval('show()',1000);  
    });

$(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",

cache: false,

success: function(html){

$("#content").html(html);

}

});

Рассмотрим используемые параметры функции $.ajax().

url: "time.php"

1	url: "time.php"

Обращается к файлу time.php для получения контента.

cache: false

1	cache: false

Результаты запросов не кэшируются.

success: function(html){  
    $("#content").html(html);  
}

success: function(html){

$("#content").html(html);

}

При успешном выполнении запроса, управление переходит функции, которая получает контент в качестве параметра и записывает его контейнер. Запись в контейнер происходит вот в этой строке:

$("#content").html(html);

1	$("#content").html(html);

Содержимое файла time.php.

    <?php echo date("H:i:s"); ?>

1	<?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>

<html>

<head>

</head>

<body>

<p>Какую страницу желаете открыть?</p>

<form>

</form>

$(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>

<html>

<head>

</head>

<body>

Введите имя:<br/>

</form>

$(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;  
});

$('#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"

1	type: "POST"

Тип передачи данных.

    data: "username="+$("#username").val()

1	data: "username="+$("#username").val()

Параметры, передаваемые серверу. В данном случае мы передаем содержимое поля username – имя пользователя. В общем случае, параметры записываются также, как в методе GET, одной строкой, например:

data: "username=Vasya&age=18&sex=male"

1	data: "username=Vasya&age=18&sex=male"

Обратим внимание, что в конце написана строка:

return false;

1	return false;

Это сделано для того, чтобы форма не пыталась передать данные файлу, из которого она запускается и не происходило перезагрузки страницы.

Содержимое файла greetings.php.

    <?php   
        echo "Приветствую, <b>".$_REQUEST['username']."</b>!<br>";  
        echo "В вашем имени букв: ".strlen($_REQUEST['username']).".";  
    ?>

<?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

AJAX и jQuery. Динамическое обновление контента. Основы

Пример 1. Динамическое обновление контента по таймеру

Пример 2. Динамическое обновление контента по выбору пользователя

Пример 3. Отправка данных на сервер в фоновом режиме и получение контента

One thought on “AJAX и jQuery. Динамическое обновление контента. Основы”

Добавить комментарий Отменить ответ