Читать онлайн «Основы программирования на JavaScript». Страница 16

[x]. массивы начинаются и заканчиваются с помощью символов [ и ] соответственно;

[x]. все строки заключаются в двойные кавычки ";

[x]. символы " в строке должны экранироваться: \".

Проще говоря, строка 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 определенно заслуживает рассмотрения.

В действительности уже есть все, что нужно для создания приложений AJAX, но мы рассмотрим достаточно простой пример. Мы собираемся написать небольшую таблицу данных (data grid), которая извлекает данные из трех различных файлов JSON. Для простоты эти файлы уже были сгенерированы. На практике эти файлы будут скорее всего генерироваться оперативно с помощью серверного сценария.

Файл 1

{contacts:[ {"firstname":"Steve" ,"lastname":"Smith", "phone":"555-1212"}, {"firstname":"Joe" ,"lastname":"Stevens", "phone":"555-0193"}, {"firstname":"Sam" ,"lastname":"Smith", "phone":"555-5120"}, {"firstname":"Dave" ,"lastname":"Stevens", "phone":"555-0521"}, {"firstname":"Suzy" ,"lastname":"Smith", "phone":"555-9410"}, {"firstname":"Jessica" ,"lastname":"Stevens", "phone":"555-8521"}, {"firstname":"James" ,"lastname":"Smith", "phone":"555-4781"}, {"firstname":"Jacob" ,"lastname":"Stevens", "phone":"555-9281"}, {"firstname":"Alex" ,"lastname":"Smith", "phone":"555-7261"}, {"firstname":"Tam" ,"lastname":"Stevens", "phone":"555-1820"} ]}

Файл 2

{contacts:[ {"firstname":"Nancy" ,"lastname":"Smith", "phone":"555-9583"}, {"firstname":"Elane" ,"lastname":"Stevens", "phone":"555-7281"}, {"firstname":"Shawn" ,"lastname":"Smith", "phone":"555-5782"}, {"firstname":"Jessie" ,"lastname":"Stevens", "phone":"555-7312"}, {"firstname":"Matt" ,"lastname":"Smith", "phone":"555-4928"}, {"firstname":"Jason" ,"lastname":"Stevens", "phone":"555-3917"}, {"firstname":"Daniel" ,"lastname":"Smith", "phone":"555-8711"}, {"firstname":"Shannon" ,"lastname":"Stevens", "phone":"555-0912"}, {"firstname":"Diana" ,"lastname":"Smith", "phone":"555-6172"}, {"firstname":"Mark" ,"lastname":"Stevens", "phone":"555-8831"} ]}

Файл 3

{contacts:[ {"firstname":"Laura" ,"lastname":"Stevens", "phone":"555-3915"}, {"firstname":"Jeff" ,"lastname":"Smith", "phone":"555-8614"}, {"firstname":"Frank" ,"lastname":"Stevens", "phone":"555-0213"}, {"firstname":"Elizabeth" ,"lastname":"Smith", "phone":"555-7531"}, {"firstname":"Jim" ,"lastname":"Stevens", "phone":"555-3951"} ]}

Эти файлы будут обеспечивать все данные для нашего списка контактов на AJAX. Построение списка контактов является в действительности вполне простым: создается таблица TABLE для хранения всех контактов и функция для очищения и повторного заполнения этой таблицы. Вот и все.

<table cellspacing="1" cellpadding="3" bgcolor="#000000" style="font-family:tahoma;font-size:10px;"> <tbody id="contactListTable"> <tr style="background-color:#CCF;"> <th>First Name</th> <th>Last Name</th> <th>Phone #</th> </tr> </tbody> </table> function loadContactListPage(n){ var oXML = getXMLHttpObj(); oXML.open('GET', '/img/10_json_file'+n+'.txt', true); oXML.onreadystatechange = function(){ doneLoading(oXML); } oXML.send(''); } function doneLoading(oXML){ if(oXML.readyState!=4) return; var json = eval('('+oXML.responseText+')'); var table = document.getElementById('contactListTable'); for(var i=table.childNodes.length-1; i>0; i--){ table.removeChild(table.childNodes[i]); } for(var i=0; i<json.contacts.length; i++){ var tr = document.createElement('TR'); var td1 = document.createElement('TD'); var td2 = document.createElement('TD'); var td3 = document.createElement('TD'); tr.style.backgroundColor = i%2?'#FFF':'#E6E6E6'; table.appendChild(tr); tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); td1.appendChild(document.createTextNode(json.contacts[i].firstname)); td2.appendChild(document.createTextNode(json.contacts[i].lastname)); td3.appendChild(document.createTextNode(json.contacts[i].phone)); } }

Демонстрационный пример

First Name Last Name Phone # Steve Smith 555-1212 Joe Stevens 555-0193 Sam Smith 555-5120 Dave Stevens 555-0521 Suzy Smith 555-9410 Jessica Stevens 555-8521 James Smith 555-4781 Jacob Stevens 555-9281 Alex Smith 555-7261 Tam Stevens 555-1820 Page 1 | Page 2 | Page 3

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

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

Следующая лекция будет посвящена обработке ошибок в JavaScript.

Вы написали приложение JavaScript, и оно работает отлично - пока вы не получите сообщение об ошибке. Это нечто неприглядное, выскакивающее на экране, что-нибудь вроде 'myObject.fields is null or not an object'. Что это значит? В этом уроке мы рассмотрим, как избавиться от ошибок, и покажем несколько различных методов для общей обработки ошибок.

JavaScript имеет два основных уровня обработки ошибок: синтаксические ошибки и ошибки времени выполнения. Синтаксические ошибки возникают до выполнения кода JavaScript, означая в основном, что код невозможно компилировать. Возьмем, например, следующий код:

for(var i=0; i<10; i++) // рабочий код здесь }

Обратите внимание, что здесь пропущена открывающая скобка {. Если попробовать выполнить этот код, то немедленно появится сообщение об ошибке, даже если код находится в функции, которая не выполняется сразу. Такие ошибки почти всегда легко находятся и исправляются. В этом случае будет получено сообщение, говорящее что-нибудь подобное " Ожидалась ')', строка 10, позиция 18". Если перейти к строке 10, то там обычно будет находиться достаточно очевидная ошибка, такая, как пропущенная ), дополнительный знак <или какая-то другая опечатка. С такими ошибками ничего нельзя сделать, кроме как просто исправить и двигаться дальше. Ниже представлен список некоторых наиболее распространенных синтаксических ошибок:

[x]. Пропущенные или непарные фигурные, круглые или квадратные скобки

Каждая фигурная {, круглая (, или квадратная [ скобка должна иметь свою закрывающую парную скобку. Если имеются вложенные скобки, то внутренние должны быть закрыты прежде, чем внешние. Например, набор скобок {[}] является недопустимым.