AJAX 1. AJAX изнутри 2. Фреймворк JQuery 3. Формирование и разбор данных в формате XML 4. Передача данных в формате JSON 4. Селекторы 5. Фреймворк JForm. - презентация

1 AJAX 1. AJAX изнутри 2. Фреймворк JQuery 3. Формирование и разбор данных в формате XML 4. Передача данных в формате JSON 4. Селекторы 5. Фреймворк JForm

2 AJAX изнутри AJAX – это акроним, раскрывающийся как Asynchronous JavaScript And XML и означающий асинхронный JavaScript и XML. AJAX – это технология, включающая сценарии JavaScript в документе HTML, которые по мере необходимости в фоновом режиме выполняют запросы к серверу (серверным сценарием на каком либо языке web-программирования), и получают необходимые данные, обновляя отдельные части документа и тем самым исключая необходимость его повторной загрузки или загрузки другого документа. AJAX – это акроним, раскрывающийся как Asynchronous JavaScript And XML и означающий асинхронный JavaScript и XML. AJAX – это технология, включающая сценарии JavaScript в документе HTML, которые по мере необходимости в фоновом режиме выполняют запросы к серверу (серверным сценарием на каком либо языке web-программирования), и получают необходимые данные, обновляя отдельные части документа и тем самым исключая необходимость его повторной загрузки или загрузки другого документа.

3 AJAX изнутри Технология AJAX служит для создания более гибких и интерактивных web-приложений. Она позволяет выполнять асинхронные обращения к серверу, не прерывая работы пользователя и незаметно для него. Технология AJAX служит для создания более гибких и интерактивных web-приложений. Она позволяет выполнять асинхронные обращения к серверу, не прерывая работы пользователя и незаметно для него. Составные части технологии AJAX уже реализованы во всех современных браузерах, таких как Mozilla FireFox, Internet Explorer или Opera. Таким образом клиенту не требуется установка дополнительных модулей для взаимодействия с сайтами, построенными с применением технологии AJAX. Составные части технологии AJAX уже реализованы во всех современных браузерах, таких как Mozilla FireFox, Internet Explorer или Opera. Таким образом клиенту не требуется установка дополнительных модулей для взаимодействия с сайтами, построенными с применением технологии AJAX.

4 AJAX изнутри В состав AJAX входят следующие компоненты: В состав AJAX входят следующие компоненты: JavaScript – основной ингредиент AJAX, реализующий функциональность на стороне клиента. В функциях JavaScript для манипулирования отдельными частями документа задействуется объектная модель документа (DOM). JavaScript – основной ингредиент AJAX, реализующий функциональность на стороне клиента. В функциях JavaScript для манипулирования отдельными частями документа задействуется объектная модель документа (DOM). Объект XMLHttpRequest (встроенный в браузер) позволяет из JavaScriptорганизовать асинхронный доступ к серверу, благодаря чему пользователь имеет возможность продолжать работу с документом, в то время как она выполняет некоторые действия. Под доступом к серверу подразумеваются простые запросы HTTP на выполнение сценариев, размещенный на сервере. Объект XMLHttpRequest (встроенный в браузер) позволяет из JavaScriptорганизовать асинхронный доступ к серверу, благодаря чему пользователь имеет возможность продолжать работу с документом, в то время как она выполняет некоторые действия. Под доступом к серверу подразумеваются простые запросы HTTP на выполнение сценариев, размещенный на сервере.

5 AJAX изнутри Серверные сценарии, необходимые для обслуживания запросов поступающих из JavaScript со стороны клиента. Эти сценарии, как правило, возвращают результаты своей работы в формате XML. Серверные сценарии, необходимые для обслуживания запросов поступающих из JavaScript со стороны клиента. Эти сценарии, как правило, возвращают результаты своей работы в формате XML. Сценарий JavaScript на стороне клиента обеспечивает обращение к серверу посредством объекта XMLHttpRequest и передает данные в виде пары имя-значение с помощью методов GET или POST. Сценарий на стороне сервера отправляет свой ответ по протоколу HTTP. Ответ должен иметь такой формат, который может быть разобран кодом сценария JavaScript на стороне клиента. Сценарий JavaScript на стороне клиента обеспечивает обращение к серверу посредством объекта XMLHttpRequest и передает данные в виде пары имя-значение с помощью методов GET или POST. Сценарий на стороне сервера отправляет свой ответ по протоколу HTTP. Ответ должен иметь такой формат, который может быть разобран кодом сценария JavaScript на стороне клиента.

6 AJAX изнутри Традиционно используется формат XML, но можно использовать и другой формат, даже простой текст. Наиболее популярная альтернатива XML – JavaScript Object Notation (JSON), представление объектов в JavaScript. Традиционно используется формат XML, но можно использовать и другой формат, даже простой текст. Наиболее популярная альтернатива XML – JavaScript Object Notation (JSON), представление объектов в JavaScript. Применяя AJAX необходимо помнить, что на стороне клиента JavaScript может быть отключен, что сделает приложения AJAX нефункциональными. Применяя AJAX необходимо помнить, что на стороне клиента JavaScript может быть отключен, что сделает приложения AJAX нефункциональными.

7 AJAX изнутри Вначале рассмотрим применение объекта XMLHttpRequest. Для этого создадим простой пример. Он состоит из HTML-формы, содержащей текстовое поле, файла сценариев JavaScript и файла на PHP, который будет формировать ответ клиенту, зависящий от содержимого текстового поля. Для того, чтобы отобразить ответ, не требуется повторной загрузки HTML- страницы, даже несмотря на то, что за получением ответа необходимо обращаться к серверу. Без помощи AJAX достигнуть такого эффекта крайне сложно, и в этом его основное преимущество. Вначале рассмотрим применение объекта XMLHttpRequest. Для этого создадим простой пример. Он состоит из HTML-формы, содержащей текстовое поле, файла сценариев JavaScript и файла на PHP, который будет формировать ответ клиенту, зависящий от содержимого текстового поля. Для того, чтобы отобразить ответ, не требуется повторной загрузки HTML- страницы, даже несмотря на то, что за получением ответа необходимо обращаться к серверу. Без помощи AJAX достигнуть такого эффекта крайне сложно, и в этом его основное преимущество.HTML-формыJavaScriptPHP эффектаHTML-формыJavaScriptPHP эффекта

8 AJAX изнутри Файлы на JS и PHP требуют ряда комментариев. Файлы на JS и PHP требуют ряда комментариев. Файл JS содержит 3 функции: createXmlHttpRequestObject() – для создания объекта XmlHttpRequest, process() – для чтения содержимого текстового поля формы и отправки данных серверу, handleServerResponse() – для получения ответа сервера, его разбора и вывода в документ HTML. Файл JS содержит 3 функции: createXmlHttpRequestObject() – для создания объекта XmlHttpRequest, process() – для чтения содержимого текстового поля формы и отправки данных серверу, handleServerResponse() – для получения ответа сервера, его разбора и вывода в документ HTML. Первая функция создает объект XmlHttpRequest одним из трех методов, в зависимости от браузера, в котором открыт документ. Первая функция создает объект XmlHttpRequest одним из трех методов, в зависимости от браузера, в котором открыт документ.

9 AJAX изнутри Вторая функция анализирует готовность этого объекта, в случае готовности читает содержимое текстового поля формы, формирует строку запроса к серверному сценарию с передачей ему содержимого текстового поля, определяет метод, который будет обрабатывать ответ сервера (функция handleServerResponse()), и отправляет асинхронный запрос серверу методом xmlHttp.send(null). Если соединение с сервером занято, функция вызывает саму себя через 1000 миллисекунд. Вторая функция анализирует готовность этого объекта, в случае готовности читает содержимое текстового поля формы, формирует строку запроса к серверному сценарию с передачей ему содержимого текстового поля, определяет метод, который будет обрабатывать ответ сервера (функция handleServerResponse()), и отправляет асинхронный запрос серверу методом xmlHttp.send(null). Если соединение с сервером занято, функция вызывает саму себя через 1000 миллисекунд.

10 AJAX изнутри Третья функция определяет наличие ответа сервера, его статус (код ошибки, 200 означает ОК), извлекает из ответа в формате XML содержимое первого вложенного тега, и изменяет содержимое (innerHTML) целевого тега документа, обращаясь к нему по идентификатору (ID), а затем снова, с задержкой в 1000 миллисекунд, вызывает функцию process(). Третья функция определяет наличие ответа сервера, его статус (код ошибки, 200 означает ОК), извлекает из ответа в формате XML содержимое первого вложенного тега, и изменяет содержимое (innerHTML) целевого тега документа, обращаясь к нему по идентификатору (ID), а затем снова, с задержкой в 1000 миллисекунд, вызывает функцию process().

11 AJAX изнутри Файл на PHP формирует XML-документ в кодировке UTF-8 (рекомендуемая кодировка XML- документов, документы в других кодировках могут обрабатываться некорректно), извлекается параметр запроса, и в зависимости от его значения формируется один из трех вариантов ответа. Заметим, что данный сценарий отработает при любом обращении к нему, как из приложения AJAX, так и из браузера. Для того, чтобы серверный сценарий отрабатывал только запрос AJAX, рекомендуется добавить проверку клиента через переменную окружения: if($_SERVER["HTTP_X_REQUESTED_WITH"] == "XMLHttpRequest") {... } Файл на PHP формирует XML-документ в кодировке UTF-8 (рекомендуемая кодировка XML- документов, документы в других кодировках могут обрабатываться некорректно), извлекается параметр запроса, и в зависимости от его значения формируется один из трех вариантов ответа. Заметим, что данный сценарий отработает при любом обращении к нему, как из приложения AJAX, так и из браузера. Для того, чтобы серверный сценарий отрабатывал только запрос AJAX, рекомендуется добавить проверку клиента через переменную окружения: if($_SERVER["HTTP_X_REQUESTED_WITH"] == "XMLHttpRequest") {... }

12 Фреймворк JQuery Непосредственное применение методов и свойств объекта XMLHttpRequest, равно как и его создание в зависимости от текущего браузера, заметно увеличивает объем кода и затрудняет его разработку. Непосредственное применение методов и свойств объекта XMLHttpRequest, равно как и его создание в зависимости от текущего браузера, заметно увеличивает объем кода и затрудняет его разработку. Инструмент (Фреймворк) QJuery существенно упрощает жизнь разработчику приложений AJAX. Рассмотрим основные методы, реализованные в библиотеке jquery js. Часто для вызова jQuery-методов используется сокращенный вариант, функция $ (знак доллара). Инструмент (Фреймворк) QJuery существенно упрощает жизнь разработчику приложений AJAX. Рассмотрим основные методы, реализованные в библиотеке jquery js. Часто для вызова jQuery-методов используется сокращенный вариант, функция $ (знак доллара).

13 Фреймворк JQuery jQuery(..).load jQuery(..).load Начнем с самого простого - загрузка HTML кода в необходимый нам DOM элемент на странице. Для этой цели нам подойдет метод load. Данный метод может принимать следующие параметры: Начнем с самого простого - загрузка HTML кода в необходимый нам DOM элемент на странице. Для этой цели нам подойдет метод load. Данный метод может принимать следующие параметры: url запрашиваемой страницы передаваемые данные (необязательный параметр) функция, которой будет скормлен результат (необязательный параметр)

14 Фреймворк JQuery Приведем пример JavaScript кода: Приведем пример JavaScript кода: $(document).ready(function(){ $(document).ready(function(){ // по окончанию загрузки страницы // по окончанию загрузки страницы $('#example-1').click(function(){ $('#example-1').click(function(){ // вешаем на клик по элементу с id = example-1 // вешаем на клик по элементу с id = example-1 $(this).load('ajax/example.html'); $(this).load('ajax/example.html'); // загрузку HTML кода из файла example.html // загрузку HTML кода из файла example.html }) }) }); });

15 Фреймворк JQuery Пример сценария Пример сценариясценария Пример подгружаемых данных Пример подгружаемых данныхданных Работа сценария Работа сценария Работа

16 Фреймворк JQuery jQuery.ajax jQuery.ajax Это самый основной метод, а все последующие методы лишь обертки для метода jQuery.ajax. У данного метода лишь один входной параметр – объект, включающий в себя все настройки (выделены параметры, которые стоит запомнить): Это самый основной метод, а все последующие методы лишь обертки для метода jQuery.ajax. У данного метода лишь один входной параметр – объект, включающий в себя все настройки (выделены параметры, которые стоит запомнить): async - асинхронность запроса, по умолчанию true cache - вкл/выкл кэширование данных браузером, по умолчанию true contentType - по умолчанию application/x-www- form-urlencoded data - передаваемые данные - строка иль объект dataFilter - фильтр для входных данных

17 Фреймворк JQuery dataType - тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default) global – тригер, отвечает за использование глобальных AJAXовых событий, по умолчанию true ifModified – триггер, проверяет были ли изменения в ответе сервера, дабы не слать еще запрос, по умолчанию false jsonp - переустановить имя callback функции для работы с JSONP (по умолчанию генерируется на лету)

18 Фреймворк JQuery processData - по умолчанию отправляемые данные заворачиваются в объект, и отправляются как application/x-www-form- urlencoded, если надо иначе – отключаем. scriptCharset - кодировка ( актуально для JSONP и подгрузки JavaScript). timeout - время таймаут в миллисекундах type - GET либо POST url - url запрашиваемой страницы

19 Фреймворк JQuery Локальные события AJAX: Локальные события AJAX: beforeSend - срабатывает перед отправкой запроса beforeSend - срабатывает перед отправкой запроса error - если произошла ошибка error - если произошла ошибка success - если ошибок не возникло success - если ошибок не возникло complete - срабатывает по окончанию запроса complete - срабатывает по окончанию запроса Для организации HTTP авторизации: Для организации HTTP авторизации: username - логин username - логин password - пароль password - пароль

20 Фреймворк JQuery Пример javaScript: Пример javaScript:javaScript $.ajax({ url: '/example.json',// указываем URL и dataType : "json", // тип загружаемых данных success: function (data, textStatus) { // вешаем свой обработчик на функцию success $.each(data, function(i, val) { // обрабатываем полученные данные /*... */ });}}); Его работа: работа

21 Фреймворк JQuery jQuery.get jQuery.get Загружает страницу, используя для передачи данных GET запрос. Может принимать следующие параметры: Загружает страницу, используя для передачи данных GET запрос. Может принимать следующие параметры: url запрашиваемой страницы url запрашиваемой страницы передаваемые данные (необязательный параметр) передаваемые данные (необязательный параметр) callback функция, которой будет скормлен результат (необязательный параметр) callback функция, которой будет скормлен результат (необязательный параметр) тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default) тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default) Применим этот метод для решения задачи из первого примера. Применим этот метод для решения задачи из первого примера.задачи Файл index.html почти не изменился, лишь кроме своего файла сценария подключаем и библиотеку jquery js. Файл серверного сценария на PHP не изменяется вовсе. Файл Start.js стал существенно меньше Файл index.html почти не изменился, лишь кроме своего файла сценария подключаем и библиотеку jquery js. Файл серверного сценария на PHP не изменяется вовсе. Файл Start.js стал существенно меньшеindex.htmlStart.jsindex.htmlStart.js

22 Фреймворк JQuery jQuery.post jQuery.post Данный метод аналогичен предыдущему, лишь передаваемые данные уйдут на сервер методом POST. Может принимать следующие параметры: Данный метод аналогичен предыдущему, лишь передаваемые данные уйдут на сервер методом POST. Может принимать следующие параметры: url запрашиваемой страницы url запрашиваемой страницы передаваемые данные (необязательный параметр) передаваемые данные (необязательный параметр) callback функция, которой будет скормлен результат (необязательный параметр) callback функция, которой будет скормлен результат (необязательный параметр) тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default) тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default) Код примера и результат работы Код примера и результат работы Кодрезультат Кодрезультат

23 Фреймворк JQuery jQuery.getJSON jQuery.getJSON Загружает данные в формате JSON (удобней и быстрее нежели XML). Может принимать следующие параметры: Загружает данные в формате JSON (удобней и быстрее нежели XML). Может принимать следующие параметры: url запрашиваемой страницы url запрашиваемой страницы передаваемые данные (необязательный параметр) передаваемые данные (необязательный параметр) callback функция, которой будет скормлен результат (необязательный параметр) callback функция, которой будет скормлен результат (необязательный параметр) Код примера и результат работы Код примера и результат работы Кодрезультат Кодрезультат

24 Фреймворк JQuery jQuery.getScript jQuery.getScript Данная функция загружает и выполняет локальный JavaScript. Может принимать следующие параметры: Данная функция загружает и выполняет локальный JavaScript. Может принимать следующие параметры: url запрашиваемого скрипта url запрашиваемого скрипта callback функция, которой будет скормлен результат (необязательный параметр) callback функция, которой будет скормлен результат (необязательный параметр) Код примера, сценария и результат работы Код примера, сценария и результат работы Кодсценариярезультат Кодсценариярезультат

25 Формирование и разбор данных в формате XML Ранее рассмотренные примеры получали в ответ от сервера документ XML всего с одним тегом, однако в реальных условиях объем передаваемых данных много больше. Приведем пример динамического создания списка по выбору значения в другом списке. Ранее рассмотренные примеры получали в ответ от сервера документ XML всего с одним тегом, однако в реальных условиях объем передаваемых данных много больше. Приведем пример динамического создания списка по выбору значения в другом списке.примерсозданияпримерсоздания Рассмотрим формирование документа XML в сценарии PHP. Это можно сделать вручную, печатая тэги XML, а можно с помощью методов и свойств объекта DOMDocument, доступного в PHP версий выше 5. Рассмотрим формирование документа XML в сценарии PHP. Это можно сделать вручную, печатая тэги XML, а можно с помощью методов и свойств объекта DOMDocument, доступного в PHP версий выше 5.вручнуюDOMDocumentвручнуюDOMDocument

26 Передача данных в формате JSON Применение метода JQuery.getJSON требует обсуждения этого формата данных и особенностей их подготовки. Применение метода JQuery.getJSON требует обсуждения этого формата данных и особенностей их подготовки. Перед тем как углубиться в детали JSON, следует понять, зачем вообще нужно тратить усилия на изучение другого формата данных, особенно, когда вы уже освоили использование XML и обычного текста с парами "имя/значение". В двух словах это довольно просто: чем шире ваш выбор, тем больше вариантов решения той или иной проблемы вы можете найти, и тем выше шанс найти не просто какое-нибудь, а наилучшее решение. Перед тем как углубиться в детали JSON, следует понять, зачем вообще нужно тратить усилия на изучение другого формата данных, особенно, когда вы уже освоили использование XML и обычного текста с парами "имя/значение". В двух словах это довольно просто: чем шире ваш выбор, тем больше вариантов решения той или иной проблемы вы можете найти, и тем выше шанс найти не просто какое-нибудь, а наилучшее решение.

27 Передача данных в формате JSON При использовании пар "имя/значение" или XML вы фактически с помощью JavaScript берёте данные из приложения и помещаете их в соответствующий формат. При этом JavaScript в основном работает как язык преобразования данных, извлекающий их из Web-форм и конвертирующий в формат, удобный для отправки серверной программе. При использовании пар "имя/значение" или XML вы фактически с помощью JavaScript берёте данные из приложения и помещаете их в соответствующий формат. При этом JavaScript в основном работает как язык преобразования данных, извлекающий их из Web-форм и конвертирующий в формат, удобный для отправки серверной программе.

28 Передача данных в формате JSON Иногда JavaScript используется не только как форматирующий язык. В этом случае данными для представления являются объекты JavaScript. В этом случае JavaScript приходится работать больше, так как сначала данные надо извлечь из объектов в JavaScript, а затем преобразовать их в пары "имя/значение" или XML. И вот тут на помощь приходит JSON: он позволяет легко конвертировать JavaScript-объекты в данные, которые можно отправлять как часть запроса (как синхронного, так и асинхронного). Иногда JavaScript используется не только как форматирующий язык. В этом случае данными для представления являются объекты JavaScript. В этом случае JavaScript приходится работать больше, так как сначала данные надо извлечь из объектов в JavaScript, а затем преобразовать их в пары "имя/значение" или XML. И вот тут на помощь приходит JSON: он позволяет легко конвертировать JavaScript-объекты в данные, которые можно отправлять как часть запроса (как синхронного, так и асинхронного).

29 Передача данных в формате JSON В простейшем случае JSON позволяет преобразовывать данные, представленные в объектах JavaScript, в строку, которую можно легко передавать от одной функции к другой или - в случае асинхронного приложения - от Web-клиента к серверной программе. JSON также позволяет формировать более сложные структуры, чем простые пары "имя/значение". Например, можно представлять массивы и сложные объекты, а не только простые списки ключей и значений. В простейшем случае JSON позволяет преобразовывать данные, представленные в объектах JavaScript, в строку, которую можно легко передавать от одной функции к другой или - в случае асинхронного приложения - от Web-клиента к серверной программе. JSON также позволяет формировать более сложные структуры, чем простые пары "имя/значение". Например, можно представлять массивы и сложные объекты, а не только простые списки ключей и значений. Например, пара "имя/значение" в JSON выглядит так:{ "firstName": "Brett" } Например, пара "имя/значение" в JSON выглядит так:{ "firstName": "Brett" }

30 Передача данных в формате JSON Удобство JSON проявляется тогда, когда необходимо объединить несколько пар "имя/значение" в одну строку. Во-первых, вы, по сути, можете создавать своего рода записи с данными, содержащие несколько пар "имя/значение", вот так: Удобство JSON проявляется тогда, когда необходимо объединить несколько пар "имя/значение" в одну строку. Во-первых, вы, по сути, можете создавать своего рода записи с данными, содержащие несколько пар "имя/значение", вот так: {"firstName": "Brett", "lastName":"McLaughlin", " ": } {"firstName": "Brett", "lastName":"McLaughlin", " ": } Здесь преимущества в синтаксисе JSON по сравнению с парами "имя/значение" проявляются ещё не так явно, но теперь данные значительно проще использовать, да и читаются они легче. Здесь преимущества в синтаксисе JSON по сравнению с парами "имя/значение" проявляются ещё не так явно, но теперь данные значительно проще использовать, да и читаются они легче.

31 Передача данных в формате JSON Если же вам нужно сформировать некий список значений, то JSON становится не только более удобным для чтения, но и более компактным. Допустим, вы хотите создать список людей. В XML вы столкнулись бы с большим количеством открывающих и закрывающих тэгов, а при использовании обычных пар "имя/значение" просто преобразовали бы имена ключей, например, к такому виду: person1-firstName. Если же вам нужно сформировать некий список значений, то JSON становится не только более удобным для чтения, но и более компактным. Допустим, вы хотите создать список людей. В XML вы столкнулись бы с большим количеством открывающих и закрывающих тэгов, а при использовании обычных пар "имя/значение" просто преобразовали бы имена ключей, например, к такому виду: person1-firstName.

32 Передача данных в формате JSON В JSON можно просто группировать несколько записей, заключив их в фигурные скобки: В JSON можно просто группировать несколько записей, заключив их в фигурные скобки: { "people": [ { "people": [ { "firstName": "Brett", "lastName":"McLaughlin", " ": }, { "firstName": "Brett", "lastName":"McLaughlin", " ": }, { "firstName": "Jason", "lastName":"Hunter", " ": }, { "firstName": "Jason", "lastName":"Hunter", " ": }, { "firstName": "Elliotte", "lastName":"Harold", " ": } { "firstName": "Elliotte", "lastName":"Harold", " ": } ]} ]}

33 Передача данных в формате JSON Из примера хорошо видно, что можно создавать структуры данных, в которой каждый элемент основного списка также является списком. Ещё следует отметить, что ключи в парах "имя/значение" различны для каждого элемента основного списка. JSON полностью динамичен и позволяет изменять способ представления данных прямо внутри JSON-структуры. Из примера хорошо видно, что можно создавать структуры данных, в которой каждый элемент основного списка также является списком. Ещё следует отметить, что ключи в парах "имя/значение" различны для каждого элемента основного списка. JSON полностью динамичен и позволяет изменять способ представления данных прямо внутри JSON-структуры.

34 Передача данных в формате JSON Если вы захотите сформировать эту структуру данных как-то по-другому, то вам не нужно следовать какой-нибудь предопределённой системе ограничений по работе с JSON- отформатированными данными, так как её просто-напросто нет. Таким образом, в JSON можно не только представлять данные различными способами, но даже использовать несколько способов представления внутри одной структуры. Если вы захотите сформировать эту структуру данных как-то по-другому, то вам не нужно следовать какой-нибудь предопределённой системе ограничений по работе с JSON- отформатированными данными, так как её просто-напросто нет. Таким образом, в JSON можно не только представлять данные различными способами, но даже использовать несколько способов представления внутри одной структуры.

35 Передача данных в формате JSON JSON - это родной формат для JavaScript. Это значит, что для работы с JSON-данными в JavaScript нам не нужен какой-нибудь специальный инструментарий (toolkit) или API. JSON - это родной формат для JavaScript. Это значит, что для работы с JSON-данными в JavaScript нам не нужен какой-нибудь специальный инструментарий (toolkit) или API. Например, можно довольно легко создать новую JavaScript-переменную и затем непосредственно присвоить ей строку с данными, отформатированными в JSON. Например, можно довольно легко создать новую JavaScript-переменную и затем непосредственно присвоить ей строку с данными, отформатированными в JSON.

36 Передача данных в формате JSON Так, для доступа к фамилии (lastname) первого элемента в списке (people) в JavaScript-программе можно использовать такой код: Так, для доступа к фамилии (lastname) первого элемента в списке (people) в JavaScript-программе можно использовать такой код: people[0].lastName; people[0].lastName; Заметьте, что индексация массива начинается с нуля. Пользуясь этим простым синтаксисом, можно работать с любыми структурами JSON- форматированных данных, и всё это без привлечения каких-либо дополнительных инструментариев (toolkit'ов) или API для JavaScript. Заметьте, что индексация массива начинается с нуля. Пользуясь этим простым синтаксисом, можно работать с любыми структурами JSON- форматированных данных, и всё это без привлечения каких-либо дополнительных инструментариев (toolkit'ов) или API для JavaScript.

37 Передача данных в формате JSON Так же как мы получили доступ к данным с помощью точек и скобок, как показано выше, мы можем легко модифицировать данные в нашей переменной: Так же как мы получили доступ к данным с помощью точек и скобок, как показано выше, мы можем легко модифицировать данные в нашей переменной: people[1].lastName = "Rachmaninov"; people[1].lastName = "Rachmaninov"; Конечно же, наши изменения были бы почти бесполезными, если бы мы не могли легко конвертировать данные обратно в текстовый формат. К счастью, в JavaScript это также довольно тривиальная задача:String newJSONtext = people.toJSONString(); Конечно же, наши изменения были бы почти бесполезными, если бы мы не могли легко конвертировать данные обратно в текстовый формат. К счастью, в JavaScript это также довольно тривиальная задача:String newJSONtext = people.toJSONString();

38 Передача данных в формате JSON Вероятно, ещё более важно, что мы можем конвертировать любой JavaScript-объект в JSON-отформатированный текст. То есть работать таким образом можно не только с теми переменными, которым изначально были присвоены JSON-отформатированные данные. Для преобразования, например, объекта myObject в JSON-строку надо выполнить такую же команду: Вероятно, ещё более важно, что мы можем конвертировать любой JavaScript-объект в JSON-отформатированный текст. То есть работать таким образом можно не только с теми переменными, которым изначально были присвоены JSON-отформатированные данные. Для преобразования, например, объекта myObject в JSON-строку надо выполнить такую же команду: String myObjectInJSON = myObject.toJSONString(); String myObjectInJSON = myObject.toJSONString();

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

40 Передача данных в формате JSON Следует иметь в виду, что формат JSON предполагает передачу данных в кодировке UTF-8. В случае других кодировок текста работоспособность сценария зависит от браузера. Предыдущий пример реализован в кодировке UTF-8 и работоспособен в любых браузерах. Другой пример - в кодировке Windows-1251 и работоспособен в браузере Opera, но не в Internet Explorer. Следует иметь в виду, что формат JSON предполагает передачу данных в кодировке UTF-8. В случае других кодировок текста работоспособность сценария зависит от браузера. Предыдущий пример реализован в кодировке UTF-8 и работоспособен в любых браузерах. Другой пример - в кодировке Windows-1251 и работоспособен в браузере Opera, но не в Internet Explorer.пример

41 Передача данных в формате JSON Использовать готовые файлы данных (или создавать их по мере необходимости) возможно не всегда. Рассмотрим формирование данных в формате JSON на стороне сервера. Использовать готовые файлы данных (или создавать их по мере необходимости) возможно не всегда. Рассмотрим формирование данных в формате JSON на стороне сервера.Рассмотрим Сценарий на стороне клиента не изменяется, а серверный сценарий выгладит так. Сценарий на стороне клиента не изменяется, а серверный сценарий выгладит так.так Из примера видно, что преобразование массива в формат JSON производится одной из двух функций: json_encode или array_to_json. Их различие в том, что первая включена в библиотеки PHP версии 5 и выше, а вторая применяется в предыдущих версиях, но не как библиотечная функция, а в исходном коде. Из примера видно, что преобразование массива в формат JSON производится одной из двух функций: json_encode или array_to_json. Их различие в том, что первая включена в библиотеки PHP версии 5 и выше, а вторая применяется в предыдущих версиях, но не как библиотечная функция, а в исходном коде.