Главная » Блог » AJAX — WEB 2.0 за 5 минут

AJAX — WEB 2.0 за 5 минут 

Сегодня, в век WEB 2.0, строить сайты из статичных страниц просто пошло.

Суть WEB 2.0 заключается вовсе не в "стеклянных" кнопочках и раздвижных меню (как думают многие), а в интерактивности. А это значит, что страницы сайта должны реагировать на "внешние раздражители" (команды пользователя) без такой привычной и такой всем давно надоевшей полной перезагрузки. Добиться подобного функционала можно используя Flash или AJAX. Про флэш разговор отдельный, долгий и спорный, а вот AJAX — это как раз то, что нужно.

Сразу хочу обратить ваше внимание на две вещи:

  • во-первых, все примеры в этой статье на самом деле не совсем AJAX-овые. Это скорее AJAH, т.е. сервер возвращает простой HTML, вместо XML, как того требует технология AJAX.

  • во-вторых, я не стал размещать здесь действующих демонстраций — на мой взгляд примеры настолько просты и примитивны, что повторить их на своей локальной машине дело пары минут. А мне просто лень.

Если Вы никогда прежде не использовали AJAX, то может показаться, что все там сложно и запутанно. Но на самом деле все совсем не так. И в этой паре килобайт текста я вам дам всю необходимую информацию, чтобы начать использовать AJAX, даже если ваш сайт не имеет движка и состоит только из статичных HTML-страниц.

Приступим.

Для того, чтобы не лезть в дебри того, как выполняются HTTP-запросы, не рыться в форматах протоколов и не рвать себе волосы из-за несовместимости броузеров, я буду (и настоятельно рекомендую вам) использовать javascript-фреймфорк, имя которому jQuery. Это прекрасная библиотека, способная решить подавляющее большинство проблем, встающих перед дизайнером, создающим интерактивный сайт. Если у вас есть трудности с javascript, смело вставляйте в свои страницы команду загрузки jQuery и забудьте о своих проблемах. Анимация, визуальных эффекты, гибкое управление DOM, асинхронные запросы к серверу и многое-многое другое — все это больше не будет для вас проблемой — jQuery сделает всю черную работу за вас. Естественно, что из всех фантастических возможностей jQuery, в этой статье я остановлюсь только на работе с AJAX.

Итак, первое, что нужно сделать — подключить фреймворк к вашей странице. Поскольку вся библиотекуа представляет собой всего один обычный файл с java-скриптом, то и подключается он стандартным HTML-тэгом:

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

Обычно его располагают в секции <head> страницы.

Ок, библиотека подключена, что дальше?

Начнем с простейшей вещи — загрузки контента внутрь нашей страницы. Для примера вставим внутрь своей страницы такой код:

<div id="my_container" style="background: yellow; width: 300px; height: 200px;"></div>

Этот код создаст прямоугольную область 300х200 точек, залитую ядовитым желтым цветом. Эта область — наш контейнер, в который мы и будем загружать данные. Но эти данные кто-то должен предоставить... Поэтому сделаем файл, который будет посылать некий ответ на наш запрос. Для этого создадим HTML-файл, например, такого банального содержания:

Содержимое файла text.html
<H1>Hello from ajax!</h1>

Сохраним его на сервере под именем text.html (но вы, естественно, можете дать любое имя).

Теперь вернемся к нашей странице и добавим в нее функцию загрузки содержимого:

Скрипт загрузки контента
<script>
function mytest()
{
   $('#my_container').load('text.html');
}
</script>

О том, как работают селекторы jQuery можете прочесть в интернете, статей на эту тему уйма, я лишь скажу, что обратиться к любому элементу DOM (или набору элементов),можно просто передав в специальную функцию $(...) идентификатор или имя класса в формате CSS. Не понятно?

Ну смотрите, в CSS изменить свойства нашего контейнера (например, изменить его фоновый цвет) можно следующей "командой":

CSS замены цвета фона
#my_container { background: red;}

Броузер понимает запись #my_container как некую ссылку на элемент с id="my_container", точно так же работает и jQuery — запись $('#my_container') указывает фреймворку, что мы собираемся работать с элементом DOM, имеющим id="my_container".

Функция $('#my_container') вернет объект jQuery, который имеет массу методов, выполняющих самые разные действия. Но, поскольку нас интересует загрузка содержимого в наш контейнер, то мы воспользуемся методом load(). Ему в качестве параметра передается URL, с которого необходимо получить данные. В моем примере я обращаюсь к ранее созданному HTML-файлу text.html. Т.е. после выполнения функции mytest() внутри контейнера будет помещено содержимое нашего файла (в данном примере это будет надпись "Hello from ajax!").

Итак, функция загрузки готова, осталось как-то ее активировать (запустить). Не стану изобретать велосипед и просто добавлю на страницу ссылку, кликнув по которой пользователь запустит наш скрипт. Код:

Ссылка для запуска скрипта
<a href="javascript:void(0);"
onclick="mytest();">Run!</a>

Итак, полный код примера:

Полный код файла index.html
<html>
<head>
  <script type="text/javascript" src="jquery.js"></script>
  <script>
    function mytest() { $('#my_container').load('text.html'); }
  </script>
</head>
<body>
  <div id="my_container" 
       style="background: yellow; width: 300px; height: 200px;">
  </div>
  <a href="javascript:void(0);" onclick="mytest();">Run!</a>
</body>
</html>

Сохраните файлы index.html, jquery.js и text.html в одной папке, откройте index.html в вашем любимом броузере, кликните по ссылку Run! и насладитесь динамической загрузкой контента БЕЗ перезагрузки самой страницы!

Сложно? Не-а!

Думаю не стоит упоминать, что таким способом вы можете загружать контент в любой контейнер вашей страницы будь то div, span или любой другой тэг. Например командой $('body').load('text.html'); вы полностью замените все содержимое вашей страницы. А с использованием более сложных селекторов вы можете одновременно загрузить контент сразу в несколько контейнеров.

Ок, идем дальше.

Как правило от простой загрузки статичного контента в контейнеры проку не очень много. Гораздо чаще встречается ситуация, когда нужно отправить серверу какие-то данные и получить ответ, который, затем необходимо всунуть в контейнер. Решается эта задача так же просто, но сперва давайте создадим серверный скрипт, который будет получать данные с нашей страницы и отправлять ответ.

Продолжаю банальничать. Наш скрипт будет получать со страницы имя пользователя и отправлять назад приветствие. Файл будет зваться name.php. Код:

Файл name.php
<?php
  echo '<h1>Hello '.$_POST['n'],'</h1>';
?>

Мы будем отправлять данные (введенное имя) в скрипт методом POST (а почему бы и нет?) в переменной n и получать в ответ фразу 'Hello …' с вставленным туда именем.

Слегка модифицируем нашу страницу — добавим поле для ввода имени:

Поле ввода имени
Enter your name: <input id="n" value=""><br>

Так же придется изменить и функцию mytest(). Теперь она будет выглядеть вот так:

Измененная функция mytest()
function mytest()
{
    nnn = $('#n').attr('value');
    $('#my_container').load('name.php', {'n': nnn});
}

Первой командой мы считываем значение атрибута value из нашего поля ввода и сохраняем его в переменной nnn, а второй командой вызываем наш серверный скрипт с передачей ему считанного имени и занесением ответа в наш контейнер.

Внимание! Этот пример использует серверный скрипт, поэтому на вашей локальной машине (без установленного вэб-сервера и интерпретатора PHP) он не сработает. Имейте это в виду прежде чем материться в комментах :)

Ну вот мы уже имеем полностью интерактивную страницу с запрограммированным поведением. В принципе этой информации уже достаточно, чтобы соорудить сколько угодно сложное взаимодействие с пользователем. Но мы пойдем дальше и решим еще пару часто возникающих проблем. Начнем с человеческой лени. ;)

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

И тут нам на помощь приходит еще один метод jQuery — post(). Он делает тоже, что и load — передает данные на сервер и получает ответ, но при этом он не изменяет содержимое DOM. Вместо этого он позволяет создать функцию-обработчик полученных данных. Начнем, как и раньше, с серверного скрипта. Теперь он будет получать два значения: имя пользователя и его возраст и возвращать приветствие и год рождения пользователя (текущий год минус возраст).

Новый name.php

<?php
  echo '<h1>Hello '.$_POST['n'],'</h1>';
  echo '<p>You was born in '.(date("Y")-$_POST['a']).'.</p>';
?>

Код страницы так же будет изменен. Приведу его полностью, чтобы было меньше путаницы:

Новый index.html
<html>
  <head>
     <script type="text/javascript" src="jquery.js"></script>
     <script>
       function mytest()
       {
          $.post('name.php', $('#myform').serialize(), function(data)
          {
            $('#my_container').html(data);
          });
       }
     </script>
  </head>
  <body>
    <div id="my_container" style="background: yellow;
       width: 300px; height: 200px;"></div>
    <form id="myform">
      Enter your name: <input name="n" value=""><br>
      Enter your age: <input name="a" value=""><br>
    </form>
    <a href="javascript:void(0);" onclick="mytest();">Run!</a>
  </body>
</html>

Как видите, теперь я создал форму и использовал два поля — для имени и для возраста. И теперь эти поля не имеют идентификаторов, зато имеют имена.Причина проста — идентификаторы нам не нужны, т.к. мы больше не будем "вручную" считывать данные из полей, этим займется метод serialize(), который сам соберет все данные из формы и упакует их в формат, понятный для метода post(). В свою очередь, метод post() (в отличии от load()) не требует обязательного определения целевого контейнера. Вместо этого он принимает третьим параметром функцию, которая будет обрабатывать полученные с сервера данные. В данном примере она просто помещает их в наш старый контейнер.

Теперь, если вам нужно передать на сервер больше данных, то просто добавьте в форму сколько угодно полей различных типов (радио-кнопки, текстовые области, пароли, чек-боксы). Больше никаких изменений в странице производить не нужно — фреймворк сам определит количество и типы полей и сам соберет из них данные для отправки. Выходит, что для расширения функционала никаких лишних телодвижений с вашей стороны не потребуется. Просто добавь воды... ;)

Ну вот, на этом можно было бы и закончить, если бы не одно "но". При всей простоте, гибкости, мощности и привлекательности, описанный выше способ имеет одно ограничение — вы не сможете с его помощью закачать на сервер файлы. А очень хочется...

Но решение, как всегда, уже давно существует! Просто придется подключить к jquery один маленький (всего 18 килобайт) плагин — jquery.form.js. Он упрощает отправку данных на сервер до предела — вам вообще ничего не придется программировать :)

Не станем здесь городить огород с реальной загрузкой файлов, просто выведем данные о загруженном файле. Код скрипта (файл file.php):

Файл file.php
<?php
  var_dump($_FILES);
?>
	

И полный код страницы:

index.html - загрузка файлов
<html>
  <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.form.js"></script>
    <script>
     $(document).ready(function()
     {
        $('#myform').ajaxForm(
        {
            beforeSubmit: function() { alert('start uploading'); },
            success: function(data) { $('#my_container').html(data);}
        });
     });
    </script>
  </head>
  <body>
    <div id="my_container" style="background: yellow; 
         width: 300px; height: 200px;"></div>
      <form id="myform" method="POST" 
            enctype="multipart/form-data" 
            action="file.php">
        File: <input type="file" name="img"><br>
        <input type="submit" name="upload" value="Upload!">
      </form>
  </body>
</html>

Чуть комментариев к коду.

  1. как уже было сказано, сразу за библиотекой jquery загружаем плагин jquery.form.js

  2. "жуткая" конструкция $(document).ready(...); всего навсего указывает функцию, которую необходимо выполнить сразу после загрузки страницы. Здесь нам это нужно, чтобы указать плагину, какую именно форму ему придется обрабатывать.

  3. $('#myform).ajaxForm(...) — выбираем форму и задаем для нее две функции. Первая будет вызвана перед началом отправки данных (в данном примере она покажет alert-окно с надписью 'start uploading'), а вторая — после получения ответа (она поместит ответ в наш контейнер).

  4. все, больше ничего делать не нужно. Всю необходимую информацию (список полей, их типы, адрес серверного скрипта и т.д.) плагин возьмет из формы.

Надеюсь, что этот скромный пост (и пол-часа ваших собственных экспериментов) навсегда закроют для вас тему использования AJAX на ваших сайтах. Читайте, изучайте, экспериментируйте, пишите комменты... 

{global_content section="socials"}
Просто совет
Два месяца бесплатного использования VPS-сервера с 20Гб SSD на борту. Интересует?
Тогда жми сюда.
Твиттер-лента
Follow TanitaCMS in Twitter