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

    До этого момента мы использовали только методы объекта jQuery, создаваемого фабричной функцией $(). Селекторы позволяли нам определять множество требуемых узлов дерева DOM, а методы давали возможность воздействовать на них тем или иным способом. Однако функция $.getJSON() - это совсем другое дело. Здесь нет элемента DOM, к которому логично было применить эту функцию - возвращаемый объект должен передаваться сценарию, а не добавляться в страницу. По этой причине функция getJSON() определена как метод глобального объекта jQuery (единственный объект с именем jQuery, или $, определяемый библиотекой jQuery), а не как метод конкретного экземпляра объекта jQuery (объекты, которые создаются с помощью функции $()).

    Если бы в JavaScript имелись классы, похожие на классы в других объектно-ориентированных языках программирования, мы бы назвали $.getJSON() методом класса. В дальнейшем обсуждении методы такого типа мы будем назвать глобальными функциями. В действительности - это функции, использующие пространство имен jQuery, чтобы избежать конфликтов с именами других функций.

    При использовании этой функции ей передается имя файла, так же как и прежде:

$(document).ready(function() {
  $('#letter-b a').click(function() {
    $.getJSON('b.json');
    return false;
  });
});

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

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

$(document).ready(function() {
  $('#letter-b a').click(function() {
    $.getJSON('b1.json', function(data) {
    });
    return false;
  });
});

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

    Внутри этой функции мы можем использовать переменную data для обхода структуры с данными. Нам потребуется выполнить итерации по элементам массива и для каждого из них создать разметку HTML. Это можно было бы реализовать с помощью стандартного цикла for, но вместо этого мы познакомимся с другой глобальной функцией jQuery - $.each(). На 72 шаге уже встречались с родственным ей методом .each(). Но в отличие от него, эта функция работает не с объектом jQuery, а принимает массив или отображение в первом аргументе и функцию обратного вызова - во втором. На каждой итерации производится обращение к функции обратного вызова, которой в виде двух аргументов передаются текущий порядковый номер итерации и текущий элемент массива или отображения.

$(document).ready(function() {
  $('#letter-b a').click(function() {
    $.getJSON('b1.json', function(data) {
      $('#dictionary').empty();
      $.each(data, function(entryIndex, entry) {
        var html = '<div class="entry">';
        html += '<h3 class="term">' + entry['term'] + '</h3>';
        html += '<div class="part">' + entry['part'] + '</div>';
        html += '<div class="definition">';
        html += entry['definition'];
        html += '</div>';
        html += '</div>';
        $('#dictionary').append(html);
      });
    });
    return false;
  });
});

    Перед началом цикла выполняется очистка содержимого элемента <div id="dictionary">, чтобы мы могли наполнить его вновь созданной разметкой HTML. Затем с помощью функции $.each() поочередно извлекается каждый элемент массива и на основе его содержимого создается структура HTML. В заключение полученная разметка HTML вставляется в дерево DOM посредством добавления ее в элемент <div>.

    Все, что осталось сделать, - это предусмотреть обработку статей с цитатами, которая выполняется с помощью другого цикла $.each():

$(document).ready(function() {
  $('#letter-b a').click(function() {
    $.getJSON('b1.json', function(data) {
      $('#dictionary').empty();
      $.each(data, function(entryIndex, entry) {
        var html = '<div class="entry">';
        html += '<h3 class="term">' + entry['term'] + '</h3>';
        html += '<div class="part">' + entry['part'] + '</div>';
        html += '<div class="definition">';
        html += entry['definition'];
        if (entry['quote']) {
          html += '<div class="quote">';
          $.each(entry['quote'], function(lineIndex, line) {
            html += '<div class="quote-line">' + line + '</div>';
          });
          if (entry['author']) {
            html += '<div class="quote-author">' + entry['author'] + '</div>';
          }
          html += '</div>';
        }
        html += '</div>';
        html += '</div>';
        $('#dictionary').append(html);
      });
    });
    return false;
  });
});

    Добавив этот программный код, можно попробовать щелкнуть на ссылке В и увидеть результаты, как показано на рисунке 1.

Рис.1. Вид страницы после загрузки данных в формате JSON

    На следующем шаге мы рассмотрим запуск сценария.

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