На этом шаге мы рассмотрим метод, используемый для добавления разметки.

Приложения с поддержкой технологии AJAX зачастую просто запрашивают получение фрагментов разметки HTML. Этот прием, который иногда называется АНАН (Asynchronous HTTP and HTML - асинхронный HTTP и HTML), чрезвычайно просто реализуется с помощью jQuery. Во-первых, нам необходима некоторая разметка HTML для добавления в страницу, которую мы поместим в файл с именем a.html, находящийся в одном каталоге с нашим документом. Ниже приводится начало этого файла HTML:

<div class="entry">
  <h3 class="term">ABACUS</h3>
  <div class="part">Prog Rock</div>
  <div class="definition">
    Симфо-проговая, прогрессивная команда из Германии.
    <div class="quote">
      <div class="quote-line">В январе 1971 года Chris Williams основал с 
      Chris Barutzky, Charly Schade, Klaus Kohlhase и Felix Hans 
         группу Abacus.</div>
      <div class="quote-line">Название основано на греческом / римском названии 
      счет.</div>
      <div class="quote-line">После 3 месяцев репетиций, они выступали в первый раз 
      на поп-фестивале в Langselheim и привлекли внимание фирмы Polydor.</div>
      <div class="quote-line">Еще в августе того же года они записали свой первый 
      альбом, названный "Abacus"</div>
      <div class="quote-author">Сайты: http://de.wikipedia.org/wiki/Abacus_(Band); 
      http://hardrockcafe.narod.ru/a/abacus.htm</div>
    </div>
  </div>
</div>

<div class="entry">
  <h3 class="term">ABBA</h3>
  <div class="part">Pop Rock</div>
  <div class="definition">
    ABBA (на русском - АББА) - шведский музыкальный квартет, существовавший в 
    1972-1982 годах и названный по первым буквам имен исполнителей. 
    Является одним из наиболее успешных коллективов за всю историю популярной 
    музыки и самым успешным из числа созданных в Скандинавии: записи группы по 
    всему миру были проданы тиражом более 350 миллионов экземпляров. 
    Синглы квартета занимали первые места в мировых чартах с середины 1970-х 
    (Waterloo) до начала 1980-х (One of Us), а альбомы-сборники возглавляли мировые 
    хит-парады и в 2000-х. Они остались в плей-листах радиостанций, и их альбомы 
    продолжают продаваться по сей день.
  </div>
</div>

Страница содержит множество статей с такой же структурой разметки HTML. Будучи самостоятельной страницей, она выглядит очень просто, как показано на рисунке 1.

Рис.1. Внешний вид страницы со словарными статьями

Обратите внимание, что файл a.html не является настоящим документом HTML - в нем отсутствуют теги <html>, <head> и <body>, которые являются обязательными. Обычно мы называем такие файлы отрывками или фрагментами, их основное назначение - хранить разметку HTML, которая будет вставляться в другой документ HTML, которым мы сейчас и займемся:

 $(document).ready(function() {
   $('#letter-a a').click(function() {
     $('#dictionary').load('a.html');
     return false;
   });
 });

Метод .load() выполняет всю тяжелую работу! С помощью обычного селектора jQuery мы указали место, куда будет вставляться отрывок, и затем передали методу адрес URL загружаемого файла в виде аргумента. Теперь, когда на ссылке будет выполнен первый щелчок, файл будет загружен, а его содержимое вставлено в элемент <div id="dictionary">. Браузер отобразит новую разметку HTML после ее добавления в документ, как показано на рисунке 2.

Рис.2. Вид страницы после добавления нового фрагмента разметки HTML

Полный текст этого примера можно взять здесь.

Замечание. Обращаем ваше внимание на тот факт, что AJAX некорректно отображает кириллицу! На самом деле, в приведенном выше примере каждый кириллицеский символ заменен его шестнадцетеричным представлением, в чем можно убедиться, просмотрев содержимое файла a.html. Для перевода в шестнадцатеричное представление мы воспользовались следующим приложением.

Обратите внимание, что прежде простая разметка HTML приобрела оформление. Это обусловлено правилами CSS в основном документе - когда в документ вставляется новый фрагмент HTML, к его тегам применяются правила оформления, существующие в основном документе.

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

 $(document).ready(function() {
   $('#letter-a a').click(function() {
     $('#dictionary').load('a.html');
     alert ('Загружено!');
     return false;
   });
 });

Из структуры этого программного кода можно было бы предположить, что диалог будет отображаться только после того, как загрузка данных будет завершена. Программный код JavaScript обычно выполняется синхронно, действия происходят в строгой последовательности друг за другом.

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

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

Со следующего шага мы начнем рассматривать работу с объектами JavaScript.

Предыдущий шаг Содержание Следующий шаг