Основы приложений AJAX

XML, JSON или текст

Существует три возможных варианта получения данных: XML, JSON или обычный текст. При извлечении данных из базы данных, скорее всего, будет использоваться XML или JSON. Ни один из этих вариантов не имеет явных преимуществ. XML - широко распространенный стандарт, и поэтому существует много приложений, которые работают с файлами XML. JSON является более новой идеей, но быстро становится популярным. Его обычно легче прочитать (для человека), и он требует немного меньшую полосу пропускания для пересылки.

Предположим, что создается приложение для управления контактами. Cервер может возвращать информацию о людях. Одни и те же данные можно выразить в форме XML или JSON:

XML:

<xml>
  <contacts>
    <person firstname="Joe" lastname="Smith" phone="555-1212" />
    <person firstname="Sam" lastname="Stevens" phone="123-4567" />
  </contacts>
</xml>

JSON:

{contacts:[
  {"firstname":"Joe", "lastname":"Smith",   "phone":"555-1212"},
  {"firstname":"Sam", "lastname":"Stevens", "phone":"123-4567"}
]}

Можно видеть, что нотация XML выглядит очень похоже на HTML. По большей части это так и есть. HTML и XML оба являются основанными на тегах языками и могут даже анализироваться одинаковым образом (см. "Лекция 6" ).

Нотация JSON выглядит очень похоже на простой JavaScript. JSON означает JavaScript Object Notation и поэтому действительно является обычным JavaScript.

Данные в любой нотации можно посылать с Web-сервера просто как обычный текст. Никакие пробелы, имеющиеся в этих примерах, не нужны, за исключением одиночных пробелов между именами атрибутов в тегах person (в версии XML ).

Формат XML является совокупностью тегов, очень похожих на HTML. Можно иметь любое количество тегов, вложенных друг в друга, и каждый тег может иметь любое количество атрибутов: например, firstname, lastname и phone в примере выше. Однако имеется несколько вещей, за которыми необходимо следить.

• Каждый тег должен иметь закрывающий тег. Например, <contacts> закрывается с помощью расположенного ниже </contacts>. Теги person являются замкнутыми. /> в конце действует по сути как дополнительный закрывающий тег. Можно было так же легко написать один из них как <person... ></person>.
• XML имеет ограниченный набор символов, которые можно использовать. В частности следующие символы являются недопустимыми в узлах и атрибутах и должны заменяться специальными комбинациями:

  &	-->	&
  <	-->	&lt;
  >	-->	&gt;
  "	-->	&quot;
  '	-->	&#39;

  Например, узел <group name="Bill & Paul" /> является недопустимым и должен быть заменен на <group name="Bill &amp; Paul" />.
• Приходящие с сервера данные должны посылаться с content-type, заданным как text/xml. Если извлекается файл с расширением .xml, то это должно происходить автоматически. Если данные извлекаются из сценария, необходимо задавать это вручную.

  Для PHP добавьте следующее:

  <?php header('Content-type: text/xml'); ?>

  Для ASP добавьте:

  <% response.contentType = "text/xml" %>
• Для всех других языков добавьте эквивалентный заголовок content-type.

  Если этот заголовок не задан, свойство responseXML объекта XMLHttp будет пустым (это свойство будет описано далее).

JSON имеет аналогичный набор правил, и всю документацию по способам записи можно увидеть на http://www.json.org/. Однако упрощенно можно сказать, что:

• объекты начинаются и заканчиваются с помощью символов { и } соответственно;
• массивы начинаются и заканчиваются с помощью символов [ и ] соответственно;
• все строки заключаются в двойные кавычки " ;
• символы " в строке должны экранироваться: \".

Проще говоря, строка JSON должна представлять допустимый объект JavaScript.

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

function processingFunction(){
  if(oXml.readyState!=4) return; // запрос не выполнен 

  // Результаты обрабатываются здесь.  Подробнее дальше!
}

Когда скрипт попадает в тело функции, запрос XMLHttp будет выполнен. Объект XMLHttp имеет два метода для возврата данных: responseXML и responseText. Так как в данный момент мы работаем с файлом XML, то будем использовать responseXML:

function processingFunction(){
  if(oXml.readyState!=4) return;

  var xmlDoc   = oXml.responseXML;
  var contacts = xmlDoc.selectNodes('/xml/contacts/person');

  alert('There are '+contacts.length+' contacts!');

  for(var i=0; i<contacts.length; i++){
    alert('Contact #'+(i+1)+':\n\n'+
        'First Name: '+contacts[i].getAttribute('firstname')+'\n'+
        'Last Name:  '+contacts[i].getAttribute('lastname') +'\n'+
        'Phone #:    '+contacts[i].getAttribute('phone')    +'\n');
  }
}

Здесь имеется 3 функции вывода ( alert ). Одна сообщает, что имеется два контакта, а еще две выводят контактную информацию для каждого человека.

Посмотрим на тот же сценарий, использующий текст JSON:

function processingFunction(){
  if(oXml.readyState!=4) return;

  var json = eval('('+oXml.responseText+')');

  alert('There are '+json.contacts.length+' contacts!');

  for(var i=0; i<json.contacts.length; i++){
    alert('Contact #'+(i+1)+':\n\n'+
      'First Name: '+json.contacts[i].firstname+'\n'+
      'Last Name:  '+json.contacts[i].lastname +'\n'+
      'Phone #:    '+json.contacts[i].phone    +'\n');
  }
}

Как можно видеть, строки JSON можно преобразовать в JavaScript, используя просто встроенную в JavaScript команду eval(). Однако это можно делать, только если вы полностью доверяете источнику данных. Если это не так (если данные поступают из не вполне известного источника данных), то необходимо пропустить их в целях безопасности через JSON Parser (Анализатор JSON ).

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

Что использовать: XML или JSON? Здесь нет больших различий. XML имеет более широко распространенный формат и переносим почти на любую систему. Если создаваемый проект будет работать с внешними источниками, то, вероятно, лучше использовать XML. Однако JSON немного легче для понимания и в общем он быстрее для разработки кода, чем XML. Если эта технология применяется для персонального проекта или в начале нового проекта, которому не нужно взаимодействовать с другими приложениям, то JSON определенно заслуживает рассмотрения.