Динамическая обработка данных

11 February 2014 г. 23:46:46

Получение данных из файла или сервера

Обычно, чтобы передать данные между клиентом и сервером, web приложения используют JSON(JavaScript Object Notation). Данные могут быть серриализованы в JSON строку, которая потом передается между сервером и клиентом и преобразуется в целевой объект. Эта статья покажет вам как использовать функции из библиотеки для использования данных JSON data:convert. Так как данные JSON обычно загружаются динамически, в этой статье будет показано как приложения могут использовать HTTP запросы для получения данных с HTTP сервера. Для web приложений, HTTP запросы обслуживаются тем браузером в котором приложение запущено, учитывая ограничения безопасности браузера.

Немного о JSON

Серриализация данных в JSON

Парсинг данных в формте JSON

HTTP запросы и URI

Использование функции getString() для загрузки файла

Использование объекта HttpRequest для загрузки файла

 

Немного о JSON

 

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

Попробуйте! Ниже представлено приложение its_all_about_you, отображающее JSON строки из данных различных типов. Измените значение элеменов и посмотрите как каждый тип данных представлен в JSON.

 

Приложение its_all_about_you

 

Библиотека dart:convert содержит 2 удобные функции для работы со строками JSON

Функция dart:convertОписание
**JSON.decode**() Создает объект Dart из строки содержащей JSON
**JSON.encode**() Создает объект Dart из строки содержащей JSON

Для использования этих функций, вам необходимо импортировать dart:convert в код Dart

import 'dart:convert';

Функции JSON.encode() и JSON.decode() могут обрабатывать следующие тыпы Dart:

  • num
  • String
  • bool
  • null
  • List
  • Map

Серриализация данных в JSON

 

Используйте функцию JSON.encode() для серриализации поддерживаемых JSON объектов. Вот функция showJson, из примера its_all_about_you  которая преобразует все данные в JSON.

Ниже результирующая строка в формате JSON из кода использующих значения по умолчанию из its_all_about_you app.

Значение булевский полей и числа преобразуются в таком виде как если бы они были написаны в коде без кавычек и выделения. То есть значения булевcкого типа может быть true или false. Объект типа null будет представлен как null Строки помещаются в двойные кавычки. Списки выделяются квадратными скобками, а элементы разделяются запятыми. Этот список содержит строки. Словари выделяются фигурными скобками и содержит разделенные запятыми пары ключ/значение, где ключ выводится первым, затем двоеточие и далее следует значение. В этом прмере, ключи в словаре являются строками. Значение в словаре зависит от типа, но они должны быть понятны JSON.

Парсинг данных в формте JSON

 

Для создания Dart объектов из строк JSON предназначена функция JSON.decode. Пример its_all_about_you заполняет начальные значения полученные из строки JSON:

String jsonDataAsString = ''' { 
"favoriteNumber":44,
"valueOfPi":3.141592,
"chocolate":true,
"horrorScope":"весы",
"favoriteThings":["капли дождя", "усы", "варежки"] }
''';

Map jsonData = JSON.decode(jsonDataAsString);

В этом коде вызывается функция JSON.decode использующая соответственно размеченную стрку JSON. Заметте что строки в Dart могут использовать как одинарные кавычки так и двойные. JSON требует двойные кавычки*.

В этом примере, строка захардкодана в код Dart, но она может быть так же создана из чтения каких-то данных из файла или с сервера. В качестве примера позже в этой статье будет показано как динамически обрабатывать данные JSON из файла который так же расположен вместе с приложением.

Функция JSON.decode() читает строку и создает из нее объект Dart. В этом примере функция JSON.decode() создает объект словаря основанные на данных из строки JSON. Словарь содержит различные типы объектов включая, integer, double, boolean, строки и списки. Все колючи в словаре являются строками.

HTTP запросы и URI

 

Чтобы сделать HTTP GET запрос из web приложения, вам надо предоставить URI (Uniform Resource Identifier) ресурса. URI (Uniform Resource Identifier) является строкой которас содержит уникальное имя ресурса. URL (Uniform Resource Locator) является частным случаем URI который так-же предоставляет местонахождение ресурса. Согласно спецификации World Wide Web, URL содержит три части информации.

  • Используемый протокол обмена данных
  • Hostname сервера
  • Путь к ресурсу

Например URL разбивается следующим образом:

Данный URL использует HTTP протокол. В общем случае, когда вы вводите HTTP адрес в браузер, браузер отправляет HTTP GET запрос на сервер, и сервер отправляет HTTP ответ, с содержанием страницы (или сообщение об ошибке).

Большинство HTTP запросов браузер это простые GET запросы запрашивающие содержание страницы. Однако HTTP протокол разрешает и некоторые другие типы запросов, такие как POST для отправки данных клиента.

Приложение Dart, выполняющиеся внутри браузера может отправлять HTTP запросы. Эти запросы обрабатываются браузером внутри которого приложение работает. Несмотря на то что сам по себе браузер может делать HTTP запросы куда угодно в вебе, приложение Dart, запущенное внутри браузера может выполнять лишь ограниченные HTTP запросы из-за ограничений безопасности. Из-за ограничений безопасности, на практике используются только запросы которые могут данные которые расположены там же где и приложение.

Замечание по безопасности: Браузеры используют жесткие ограничения для HTTP запросов создаваемых встроенными приложения. В частности, любые ресурсы запрашиваемые приложением должны быть на том-же сервере что и приложение. Это значит что Ваше веб приложение не может запрашивать любые ресурсы для HTTP запросов через браузер, даже если они кажутся совем безобидными (такие как GET). Некоторые сервера разрешают межсерверные запросы, этот механизм называется CORS (Cross-origin resource sharing), который использует заголовки HTTP запросов чтобы узнать и получить права. CORS зависит от сервера и пока не используется широко.

SDK предоставляет полезные классы для создания и отправки HTTP запросов:

Код DartБиблиотекаОписание
Uri  Библиотека ядра  Объект представляющий URI.
HttpRequest  dart:html  Объект реализующий HTTP запросы на клиенте. Для использования в web приложениях.  
HttpRequest  dart:io  Объект реализующий HTTP запросы на сервере. Не работает внутри web приложения.  

 

Использование функции getString() для загрузки файла

 

Один из полезных HTTP запросов который Вы можете использовать в web приложении это GET запрос одного из файлов расположенного там же где и приложение. Ниже пример приложения portmanteaux_simple, включающий данные из файла portmanteauxsimple.json, который содержит список слов в формате JSON. Когда Вы нажимаете кнопку приложение выполняет GET запрос на сервер и загружает файл.

Попробуйте! нажмите кнопку.

Приложение portmanteaux

Эта программа использует соответствующий метод getString(), предоставленный классом HttpRequest для запроса файла с сервера.

Метод getString использует фьючерс для обработки запроса. Фиьючерс это способ для предотвращения потенциально-возможной задержки по времени операций, таких как HTTP запрос, использующий асинхронное выполнение Если Вы еще не ознакомились с фьючерсами, Вы можете узнать больше в статье Использование API для фьючерсов. А пока вы можете использовать код выше как образец для своего собсвенного кодв в теле функции processString и Вашего кода для обработки ошибок.

 

Использование относительных URI

 

URI использует в запросе GET собственное имя файла portmanteux_simple.json. Давайте разберемся как это работает.

Откройте в редакторе Dart директорий приложения, выберите файл portmanteux_simple.html и запустите программу. Прежде всего отметим URI для программы в Dartium

  • Адрес сервера 127.0.0.1, это станндартная ссылка на тот компьютер в котором программы запускается (localhost это более дружественный синоним для 127.0.0.1)
  • 3030 это номер порта. Компьютер может работать с несколькими серверами одновременно, поэтому для избежания конфликтов сервер должен использовать свой собственный порт). Порты от 0 до 1024 называются “хорошо известными” портами и зарегистрированы для использования системными процессами, котораы предоставляют широкий набор сетевых сервисов. Обычно HTTP сервер слушает 80 порт. На большинстве систем порты от 1024 до 49151 могут быть использованы любыми программами. Редактор Dart использует порт 3030.
  • Остальная часть URI это абсолютный пут до реьд файла, в котором расположено приложение.

На основании URI текущей страницы объект HttpRequest находит абсолютный путь к файлу.

Запрос GET в этом примере проходит успешно, потому что приложение запрагивает ресурс по тому же адресу.

Использование объекта HttpRequest для загрузки файла

 

Метод getString() хорош для GET и возвращает строку загруженную из ресурса. В других случаях вам надо создать объект HttpRequest, и настроить его заголовочную информацию. Метод send() используется для отправки ответа.

Обратите внимание на изменения в примере portmanteaux, вызов portmanteaux был переписан для использования объекта HttpRequest.

Настройка объекта HttpRequest

Обработчик нажатия кнопки создает экземпляр объекта HttpRequest, настраивает его используя URI и функцию обратного вызова и отправляет запрос. Давайте взглянем на код Dart:

Отправка запроса

 

Метод отправляет запрос на сервер

httpRequest.send('');

Так как в этом примере используется простой GET запрос, для отправки можно использовать пустую строку. Для других типов запросов, например POST запрос, строка должна содержать дополнительную информацию или соответсвующие данные. Также вы модете настроить объект HttpRequest используя различные параметры заголовков используя метод setRequestHeader().

 

Обработка ответов

 

Для обработки ответа на запрос, Вам надо настроить функцию колбэк перед вызовом метода sent(). В Нашем примере колбэк функция указывается одной строкой, при обработке события onLoadEnd, который в свою очередь вызывает requestComplete(). Эта колбэк функция вызывается при завершении обработки запроса успешного или с ошибкой.

Колбэк функция requestComplete() в нашем примере, проверяет статус код для запроса. Если статус код равен 200, файл был найден и успешно загружен. Содержимое запрашиваемого файла portmanteaux.json находится в свойстве responseText объекта HttpRequest. Функция JSON.decode из библиотеки dart:convert просто конвертирует список из формате JSON в список строк, затем для каждого элемента списка создается новый LIElement элемент и помещается на страницу внутри элемента <ul>

Заполнение пользовательского интерфейса из JSON

 

Данные файла portmanteaux.json из примера portmanteaux содержит список строк

 [
"portmanteau",
"fantabulous",
"spork",
"smog",
"spanglish",
"gerrymander",
"turducken",
"stagflation",
"Brangelina",
"freeware",
"oxbridge",
"palimony",
"brunch",
"blog",
"chortle",
"Hassenpfeffer",
"Schnitzelbank" ]

При выполнении запроса сервер читает данные из файла и отправляет отдельные строки клиентской программы. Клиентская программа получает строку в формате JSON и использует метод JSON.decode() чтобы создать список сток из JSON.


Оставьте свой комментарий

comments powered by Disqus
Меню

Cult of digits 2014 Яндекс.Метрика