—»     —»   Хотите пользоваться преимуществом AJAX, но не знаете, как?
  Раздел: Ajax   Комментариев: 4  

Хотите пользоваться преимуществом AJAX, но не знаете, как?



AJAX всё чаще и чаще используется на различных веб-сайтах, иногда даже тогда, когда можно обойтись без его применения. Если вас привлекает эта технология, но вы не знаете, с чего начать, то эта статья, как раз, для вас. В двух максимально простеньких примерах вы научитесь основам, а также узнаете то, насколько легко это делается, благодаря современным средам разработки.

Что такое асинхронный вызов?

Если мы не используем AJAX, то для того, чтобы любое изменение информации вступило в силу, нам нужно перезагружать страницу.

Когда мы вписываем что-то в форму и нажимаем на кнопку «послать», например, то разрабатываемая страница посылает запрос с той информацией, которую мы ввели, на сервер, с которым мы имеем дело. Сервер обновляет информацию, и отсылает результат обратно.

В итоге, страница загружается уже как новый документ, который заменяет предыдущую страницу в нашем браузере.

Вместо этого, благодаря технологии Ajax, клиент и сервер могут взаимодействовать «в фоновом режиме», что означает работу при определенных временных интервалах или обработку конкретных событий на странице.

Например, нажатием на кнопку «послать» (что представляет собой событие подтверждения), отправляется запрос, который будет обработан сервером и, впоследствии, сервер отошлет результат обратно нашему браузеру. Изменения информации будет произведено, но без перезагрузки страницы.

Это именно то, что мы сегодня собираемся сделать. Мы собираемся воспользоваться jQuery – мощной библиотекой javascript, которая уже много раз была отмечена во многих статьях на нашем сайте. Благодаря jQuery, асинхронный вызов может быть крайне просто реализован.

Если у вас до сих пор нет jQuery, скачайте его на официальном веб-сайте.

Подготовка формы

Создаем страницу ajax.html и вставляем туда простую форму, которая запрашивает информацию «имя» и «фамилия».

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>

<form id="input_form" action="?">
    Insert name:<br />
    <input type="text" name="name" id="name"/><br />
    Insert last name:<br>
    <input type="text" name="lastname" id="lastname"/><br/ ><br/ >
    <input type="submit" value="send">
</form>

<div id="result"></div>

</body>
</html>

В этой HTML-разметке мы добавили элемент «результат», который отображает нам форму, куда будет внесен результат, полученный в ответ от сервера уже после обработки.

Подготовка страницы обработки на сервере

Теперь давайте создадим страницу result.php, которая будет принимать и обрабатывать данные, полученные из формы:

<?php
echo "You have inserted the following data: Name-><strong>$_POST[name]</strong> and Last name-><strong>$_POST[lastname]</strong>. You have executed an asynchronous call!";
?>

Как видно, здесь суть заключается в печати данных из формы на экран.

Внедрение jQuery и подготовка функции

Теперь давайте вернемся к файлу ajax.html. Мы внесем библиотеку jQuery и настроим её на функцию, требуемую для нашего примера. Нам нужно отредактировать шапку вот так:

<head>
    <script type="text/javascript" src="jquery-1.4.1.js"></script> <!-- The version could be different -->
    <script type="text/javascript">
    $(document).ready(function() {
    //Here we will write the necessary code
    });
</script>
</head>

Теперь давайте напишем нужный код jQuery, который далее подробно будет описан.

$("#input_form").submit(function(){
    var name = $("#name").attr('value');
    var lastname = $("#lastname").attr('value');
    $.post("result.php", {name:name,lastname:lastname}, function(data){
        $("div#result").html(data);
    });
return false;
});

Итак, в первой строке мы указываем:

$("#input_form").submit(function(){

В элементе с id «input_form» в области с событием «submit», нужно выполнить функцию.

Во второй и третьей строке:

var name = $("#name").attr('value');
var lastname = $("#lastname").attr('value');

мы подчеркиваем переменные name и last name, отодвигая атрибут «value» от элементов с Id name и last name (которые относятся к полям ввода текста формы).

На данном этапе мы подходим к запросу Ajax. У jQuery есть три основных метода управления асинхронными вызовами: $.post, $.get и $.ajax. В первом примере мы воспользуемся $.post, который, что очевидно, будет послать данные на сервер посредством метода POST.

Посмотрите на код:

$.post(“name_of_file”, {name1:value1,name2:value2( passed parameters)}, function(data){

- нам нужно сделать чтобы ответ, который будет прислан нам сервером, составил параметр «data».

});

В нашем случае, мы посылаем запрос в result.php, предоставляя данные в качестве параметра name и переменной name (ранее расширенной содержимым поля ввода name на форме), а также параметр и переменную last name.

Мы вносим результат в элемент «result».

Наконец, если мы используем формы, нам всегда нужно учитывать функцию прерывания процедуры.

Проверяя данный код (смотрите пример) на форме, вы сможете отобразить фразу без перезагрузки страницы. Данные будут отправлены на сервер асинхронным способом, что будет реализовано посредством PHP-страницы. Данные страницы будут отосланы клиенту и внесены в DOM.

Если бы нам нужно было использовать $.ajax для реализации той же процедуры, то нам нужно переписать функцию примерно так:

$.ajax({
    url: 'result.php',
    type: "POST",
    data: "name="+name+"&lastname="+lastname,
    success: function(data) {
        $("div#result").html(data);
        }
});

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

Давайте сделаем еще один пример. Некоторое время назад, веб-разработчик по имени Николас написал отличную статью под названием «Хотите использовать Json, но не знаете, с чего начать?» (оригинальное название: «You want to use Json but don’t know where to start from?»). Если вы не знакомы с форматом Json, то мы советуем вам перечитать эту статью, а потом продолжить с этим текстом.

Как добиться формата Json в запросах Ajax?

Во втором примере мы воспользуемся кнопкой подтверждения (submit) в форме для того, чтобы осуществить запрос к серверу. Более того, мы запросим его отослать нам данные о времени: текущее время и дату. Вы увидите результат на странице примера. Давайте приступим к разработке страницы PHP (result2.php).

<?php
$time = time();
$hour = date("H:i:s");
$day = date("j/n/Y");
echo "{'timestamp':'$time','hour':'$hour','day':'$day'}";
?>

Берём индикатор времени, время и дату, затем выводим его на экран в формате Json (name:value – имя:значение).

Теперь давайте перейдем к странице ajax-json.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script type="text/javascript" src="jquery-1.3.2.js"></script>
    <style>
        #result{
            width: 250px;
            height: 100px;
            border: 1px solid gray;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function() {
            // here we will write the function
        });
    </script>
</head>
<body>
<form id="input_form" action="?">
    <input type="submit" value="request data">
</form>

<div id="result">
    The actual timestamp is: <span id="timestamp"></span><br />
    which corresponds to time: <span id="hour"></span><br />
    of day: <span id="day"></span>
</div>
</body>
</html>

Как вы можете видеть, форма состоит только лишь из кнопки. В элементе #result у нас подготовлены фразы, которые отправляются запросом на сервера. Далее они будут завершены отправленными данными. Давайте посмотрим, как это реализовать.

$("#input_form").submit(function(){
    $.ajax({
    url: 'result2.php',
    dataType: "json",
    success: function(data) {
        $("#timestamp").html(data.timestamp);
        $("#hour").html(data.hour);
        $("#day").html(data.day);
        }
    });
return false;
});

Что означает данный код?

В элементе #input_form, при определении события submit, выполняется следующая функция:

Создается ajax-запрос к странице result2.php.

Теперь мы установили параметр dataType посредством значения json. Это сообщает jQuery о том, что ответ должен быть именно в таком формате, следовательно, ответ от сервера будет вставлен в объект «data». По этой причине, например, значение, которое мы отправили с названием дня (‘day’:'$day’), мы получим в виде data.day.

Таким образом, мы можем внести три значения (здесь интересно то, что относительно предыдущего примера, в котором результат являлся отдельным блоком, теперь мы можем управлять данными по отдельности) в позицию, основанную на заданных значениях id.

Ajax и удобство использования

При использовании Ajax, всегда нужно быть очень внимательным. Предположим, что запрос достаточно сложен и/или то, что сервер работает очень медленно или в данный момент перегружен. Процесс может занять даже несколько секунд.

С обычными запросами, мы хотя бы видим в строке состояния браузера сообщения о том, что следует подождать ответа сервера. Если же запрос реализован посредством ajax, эти сообщения не отображены. В результате, пользователь может подумать, что ничего не происходит, и закроет страницу или «тыкнет» по кнопке несколько раз подряд.

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

По этой причине, нам просто нужно отключить кнопку на протяжении всей процедуры отправки и получения запроса, а также добавить небольшое изображение, которое будет указывать на то, что что-то всё-таки происходит. Например, вот так:

Хотите пользоваться преимуществом AJAX, но не знаете, как?

Давайте возьмем последний пример (ajax-json.html) и кое-что в нём изменим:

Вставляем изображение рядом с кнопкой

<input type="submit" value="request data" class="button"> <img src="loading.gif" border="0" class="loading">

Делаем изображение невидимым посредством данного класса в нашем CSS:

.loading{
    display: none;
}

Теперь, при определении события submit, мы отключаем кнопку и отображаем изображение:

$(".button").attr("disabled", "disabled");
$(".loading").show();

И как только процесс завершается, мы снова включаем кнопку и прячем изображение:

$(".button").removeAttr("disabled");
$(".loading").hide();

Вот так будет выглядеть код уже исправленной страницы:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script type="text/javascript" src="jquery-1.3.2.js"></script>
    <style>
         #result{
            width: 250px;
            height: 100px;
            border: 1px solid gray;
        }

        .loading{
            display: none;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#input_form").submit(function(){
                $(".button").attr("disabled", "disabled");
                $(".loading").show();
                $.ajax({
                    url: 'result2.php',
                    dataType: "json",
                    success: function(data) {
                        $("#timestamp").html(data.timestamp);
                        $("#hour").html(data.hour);
                        $("#day").html(data.day);
                        $(".button").removeAttr("disabled");
                        $(".loading").hide();
                        }
                     });
                return false;
                });
            });
    </script>
</head>
<body>

<form id="input_form" action="?">
    <input type="submit" value="request data" class="button"> <img src="loading.gif" border="0" class="loading">
</form>

<div id="result">
    The current timestamp is: <span id="timestamp"></span><br>
    That corresponds to hours: <span id="hour"></span><br>
    of day: <span id="day"></span>
</div>
</body>
</html>

Очевидно, наш запрос настолько прост, что здесь порой сложно будет заметить появление изображения и отключение кнопки. Но если вы хотите протестировать данную функцию, добавьте следующий код в начало кода страницы result2.php.

sleep(2);

Таким образом, выполнение запроса займет пару секунд, тем самым дав нам посмотреть результат.

В заключение

В этой статье мы ознакомились с двумя примерами асинхронных запросов с использованием jQuery. Как вы, наверное, заметили, внедрение данной среды даёт нам возможность достичь некоторых целей посредством всего нескольких строчек кода.

В следующей статье мы немного расширим диапазон: постараемся создать более продвинутое приложение. Попробуем объяснить: наверняка вы когда-нибудь «игрались» на веб-сайте, скажем, где продаются автомобили. Там у вас есть возможность в реальном времени выбирать модель и цвет авто. Вот именно это мы и постараемся сделать.

Думали, что использовать ajax гораздо сложнее, не правда ли?
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, javascript, ajax
Опубликовал Mysterious Master   Прочитано (раз): 10560   |   Оставлено комментариев: 4
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 21 ноября 2011 @ 23:39
Написал: Александр — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Пробовал делать.

Проблема в том-что данные в БД записывает в UTF-8 как исправить?!
Комментарий #2: 10 февраля 2012 @ 11:52
Написал: senator3821 — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Спасибо сайту за качественно подобранную информацию, а также за ссылку jQuery, еще во многом предстоит разобраться, но благодаря данной информации хоть стала понятна основа для моей работы с сайтом.
Комментарий #3: 22 февраля 2012 @ 11:21
Написал: Алексей — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Скажите, а как вставить на сайт такие кнопки социальных сетей как у вас? Это вы вручную делали или есть готовый сервис?
Комментарий #4: 22 февраля 2012 @ 11:35
Написал: Mysterious Master — группа: Администраторы  
На сайте с: 11.07.2009   |   Публикаций: 1491   |   Комментариев: 177
ICQ: --- не указано ---
Алексей, есть готовый набор, найти можете в Гугле по запросу "sexy bookmarks". Для вордпресс есть готовое решение, для других движков нужно будет кастомизоровать вручную.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930