Разработка гибридных приложений для мобильных устройств под Windows Phone

Обмен данными между мобильным виджетом клиента и сервером

Показывать лекцию целиком

Методы управления процессом коммуникации. Объект XMLHttpRequest

Основным инструментом, который предоставляет HTML5 для взаимодействия клиента с веб-сервером, является объект XMLHttpRequest. Его неофициально называют коммуникационным API. Объект XMLHttpRequest впервые был создан корпорацией Microsoft для того, чтобы улучшить веб-версию своей программы электронной почты Outlook, но он постепенно распространился на многие современные сетевые технологии. В настоящее время его применяют большинство JavaScript- клиентских приложений, взаимодействующих с сервером. Ключевая идея, лежащая в основе объекта XMLHttpRequest состоит в том, что он позволяет коду JavaScript самостоятельно направлять запросы к серверу, когда приложению требуется передать данные серверному сценарию или получить данные от него. Эти запросы осуществляются асинхронно; это означает, что мобильное устройство остается доступным для работы даже в процессе выполнения такого запроса. Более того, его пользователь никогда даже не догадывается о выполняющемся за кулисами запросе (если только не выводится соответствующее извещение или индикатор хода выполнения). Объект XMLHttpRequest является идеальным инструментом как для получения данных с веб-сервера, так и для отправки данных на сервер. Он является центральным в наборе методов, носящих название AJAX (от англ. Asynchronous JavaScript And XML - "асинхронный JavaScript и XML") , и именно благодаря XMLHttpRequest, клиенское приложение может обращаться к серверу, отправлять ему данные и получать ответ, не обновляя своих страниц и поэтому делая их более оперативными.

Хотя в названии этого объекта присутствует аббревиатура XML, технология его применения не накладывает ограничений на формат передаваемых данных. Данные можно пересылать как в виде XML, так и в JSON, HTML или просто неструктурированным текстом. Разработчик может самостоятельно создать формат для передачи данных. Однако нужно учитывать, что при пересылке используется текстовый протокол HTTP, и потому при использовании метода GET данные должны передаваться в виде текста (то есть бинарные данные следует кодировать, к примеру в base64). При использовании метода POST в кодировании нет необходимости.

Для создания объекта взаимодействия с веб-сервером в JavaScript - коде используется конструктор XMLHttpRequest(). Он возвращает объект XMLHttpRequest, на базе которого создается запрос, а затем прослушивать события для управления процессом коммуникации. Объект, создаваемый конструктором XMLHttpRequest(), предлагает следующие важные методы для инициирования и управления запросом:

  • open(method, url, async). Настраивает ждущий запрос. В атрибуте method нужно указать HTTP - метод, с помощью которого будет открыто соединение, например GET или POST. GET - используется для запроса содержимого указанного ресурса. POST - применяется для передачи пользовательских данных заданному ресурсу. Атрибут url объявляет местоположение сценария, который будет обрабатывать запрос. Атрибут async содержит булево значение, определяющее, по какому типу будет происходить коммуникация: синхронно (false) или асинхронно (true). Если необходимо, в параметрах метода также можно указать имя пользователя и пароль.
  • send(data). Фактически, инициирует запрос. У объекта XMLHttpRequest есть несколько версий данного метода, предназначенных для обработки данных разных типов. Атрибут data необязательный, но если он используется, то в качестве его значения можно указать объект ArrayBuffer, бинарный блок, документ, строку или объект виртуальной формы FormData. При отсутствии данных необходимо указать параметр null.
  • abort (). Отменяет запрос.
    •

    Наиболее важные свойства объекта XMLHttpRequest:

  • onreadystatechange. Это обработчик события типа EventListener, которое происходит при каждой смене текущего состояния объекта. Имя должно быть записано в нижнем регистре.
  • readyState. Текущее состояние объекта (0 - не инициализирован, 1 - открыт, 2 - отправка данных, 3 - получение данных и 4 - данные загружены).
  • responseText. Текст ответа на запрос типа DOMString. Если состояние не 3 или 4, возвращает пустую строку.
  • responseXML. Текст ответа на запрос в виде XML, который затем может быть обработан посредством DOM. Если состояние не 4, возвращает null.
    •

    План работы с объектом XMLHttpRequest можно представить следующим образом:

  • создание экземпляра объекта XMLHttpRequest;
  • открытие соединения;
  • установка обработчика события (нужно делать после открытия и до отправки запроса);
  • отправка запроса.
    •

    Расмотрим примеры обращения к серверу средствами объекта XMLHttpRequest для получения и отправки данных.

    Обращение к веб-серверу для получения данных

    Создадим небольшое приложение, в котором будем извлекать информацию из файла на сервере, применяя для этого метод GET. Нам понадобится HTML-документ с кнопкой, которая будет инициировать запрос к серверу на передачу данных мобильному клиенту:

    <!DOCTYPE html>
<html lang="ru">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="css/ajax.css" />
    <script type="text/javascript" src="js/ajax.js"></script>
    <title>Ajax</title>
     </head>
  <body>
    <h3>Чтение файла с сервера</h3><br/>
      <section id ="formbox">
      <form name ="form">
       <p><input type ="button" id ="button" name ="button" value="ВЫПОЛНИТЬ"/></p><br />
      </form>
          </section>
      <section id ="databox"> </section>
  </body>
</html>

    Применяем только базовые стили для оформления полей на экране:

    #formbox {
    float: left;
    padding: 60px;
    border: 1px solid #999999;
}
#databox {
    float: left;
    width: 500px;
    margin-left: 20px;
    padding: 20px;
    border: 1px solid #999999;
}
h3 {font-family: Verdana, Arial, Helvetica, sans-serif;}
body{
	background-color:#F2EBC7;
	color:#962D3E;
	font-family:Verdana, Geneva, sans-serif;
    font-size:10px;
}

    JavaScript - код в этом примере будет считывать содержимое из файла на сервере и выводить его на экран. Никакие данные на сервер не отправляются - мы всего лишь выполняем запрос GET и показываем полученную информацию:

    function initiate() {
    databox = document.getElementById('databox');
    var button = document.getElementById('button');
    button.addEventListener('click', read, false);
}
function read() {
    var url = "http://www.minkbooks.com/content/trailer.ogg"
    var request = new XMLHttpRequest();
    request.onreadystatechange = function () {
        if (request.readyState == 4) {
               databox.innerHTML = 'Сервер прислал:' + request.responseText;
        }
    }
    request.open("GET", url, true);
    request.send(null);
}
window.addEventListener('load', initiate, false);

    Для отладки этого кода нужно реальное мобильное устройство и желателен текстовый файл на вашем сервере. При отсутствии этого, можно протестировать код под браузером и взять файл с "чужого" сервера в Интернет. Кстати, для отладки и тестирования данного примера был взят файл по адресу "http://www.minkbooks.com/content/trailer.ogg". Результат тестирования запроса к серверу:

    (рис 19.1)

    В JavaScript - коде этого примера представлена типичная функция initiate(). Она вызывается после полной загрузки документа. Функция создает ссылку на databox и добавляет прослушиватель события click к кнопке. Когда пользователь нажимает кнопку "Выполнить", происходит вызов функции read(). Здесь мы можем наблюдать все приведенные ранее методы в действии. В первую очередь объявляется URL-адрес файла, который мы собираемся прочитать. На следующем шаге с помощью конструктора XMLHttpRequest() создается объект, который сразу же присваивается переменной request. Для этой переменной мы используем прослушиватель onreadystatechange и анонимную функцию function(), которая начнет выполняться после загрузки файла с сервера. Запускается процесс вызовом методов open() и send(). Поскольку в этом запросе никакие данные не отправляются, метод send() пуст (передается значение null), однако методу open() требуются все атрибуты, иначе он не сможет настроить запрос. Используя этот метод, мы объявляем запрос типа GET, указывая URL-адрес файла для считывания, и тип операции (true, так как нам требуется асинхронная операция).

    Асинхронный тип операции подразумевает, что браузер продолжает обрабатывать код, пока происходит считывание файла. О завершении операции нас информирует значение текущего состояния readyState = 4. После того как файл будет загружен, сработает событие onreadystatechange и анонимная функция заменит содержимое поля databox значением свойства responseText, на этом процесс завершится. Обработка полученной от сервера информации определяется свойствами его ответа.

    Свойства ответа сервера

    Есть три типа свойств ответа сервера, с помощью которых обрабатывается полученная запросом информация:

  • response. Это свойство общего назначения. Оно возвращает ответ на запрос согласно значению атрибута responseType;
  • responseText. Возвращает ответ на запрос в текстовом формате;
  • responseXML. Возвращает ответ на запрос в форме XML-документа.
    •

    Когда ответ обрабатывается с использованием innerHTML, интерпретируются коды HTML и JavaScript. По соображениям безопасности, рекомендуется вместо этого использовать innerText. Выбирается тот или иной вариант в зависимости от требований конкретного мобильного приложения.

    Для правильного тестирования этого примера создайте текстовый файл, например с именем textfile.txt и добавьте в него какое-нибудь содержимое. Загрузите этот файл на свой сервер и запустите мобильное Cordova - приложение (предварительно установив в нем URL с вашим доменом). После того как вы щелкнете на кнопке "Выполнить", на экране мобильного устройства будет показано содержимое текстового файла.

    Методом GET, который использовался в данном примере, можно было не только получить данные, но и отправить их на сервер. Сделать это просто - нужно всего лишь добавить соответствующие значения в URL-адрес. Вы создаете для переменной url путь вида "textfile.txt?my_vall=5my_val2=7", и указанные значения 5 и 7 вместе с именами соответствующих переменных my_val1, my_val2 отправляются с мобильного устройства на сервер в запросе. Атрибуты my_val1 и my_val2 из этого примера будут прочитаны на сервере как переменные GET. Разумеется, текстовый файл не в состоянии обработать эту информацию, поэтому на сервере должен быть ASP-файл или PHP-файл или серверный сценарий другого типа, который получает и интерпретирует посланные значения.

    Обращение к веб-серверу для отправки данных

    В рассмотренном выше примере не использовались никакие другие HTTP-методы, кроме GET. В следующем примере будем работать с методом POST и новым объектом, позволяющим отправлять информацию с использованием элементов виртуальной формы. Запрос POST включает в себя всю информацию, отправляемую методом GET, и в дополнение этого тело сообщения. В теле сообщения мы можем отправлять информацию любого типа и любой длины. Очень часто наиболее удобным способом предоставления такой информации оказывается HTML-форма, однако, для динамических приложений это не лучший вариант. Для решения этой проблемы коммуникационный API предоставляет интерфейс виртуальной формы FormData. Этот простой интерфейс включает в себя только конструктор FormData и метод append для работы с объектами FormData:

  • FormData(). Этот конструктор возвращает объект FormData, который затем в методе send() используется для отправки информации;
  • append(name, value). Этот метод добавляет данные к объекту FormData. Он принимает в качестве атрибутов пару из ключевого слова (идентификатор) и значения. В атрибуте value можно передавать как строку, так и бинарный блок. Возвращаемые данные представляют собой поле формы.
    •

    Данный пример JavaScript - кода функции function initiate() иллюстрирует отправку данных виртуальной формы на сервер:

    function initiate() {
    databox = document.getElementById('databox');
    var button = document.getElementById('button');
    button.addEventListener('click', send, false);
}
function send() {
    var url = "http://www.minkbooks.com/content/trailer.ogg";
    var data = new FormData();
    data.append('name','Татьяна');
    data.append('lastname','Самойлова');
    data.append('counry','Россия');
    var request = new XMLHttpRequest();
    request.open("POST", url, true);
    request.send(data);
    request.onreadystatechange = function () {
        if (request.readyState == 4) {
            databox.innerHTML ='Данные отправлены на сервер';
        }
     }
    }
window.addEventListener('load', initiate, false);

    Давайте посмотрим, как функции этого примера готовят информацию к отправке. В функции send() содержится обращение к конструктору FormData(), а возвращенный им объект FormData сохраняется в переменной data. Затем метод append() добавляет к этому объекту три пары из ключевого слова и значения (ключевые слова: name, lastname и country). Эти значения представляют собой поля виртуальной формы ввода данных. Инициализация запроса происходит точно так же, как в предыдущем примере кода, но на этот раз в первом атрибуте метода open() передается тип POST, а не GET, а методу send() передается объект data, а не значение null. Когда пользователь щелкает на кнопке "Выполнить", происходит вызов функции send() и данные виртуальной формы, созданной в объекте FormData, отправляются из мобильного приложения (виджета) на сервер. Файл серверного сценария (например, process.asp, а в нашем примере - trailer.ogg) получает данные (name, lastname, country и их значения). Анонимная функция вызывается после завершения процесса событием onreadystatechange и выводит на экран сообщение об успешной отправке данных на сервер.

    Для тестирования этого примера необходимо загрузить на ваш сервер несколько файлов, включая серверный сценарий. При отсутствии этого, можно протестировать код под браузером, как первый пример. Ниже приводится результат такого тестирования для произвольно взятого сайта "http://www.minkbooks.com/content/trailer.ogg".

    Результат тестирования этого запроса к серверу в браузере Google Chrome:

    (рис 19.2)

    Когда информация клиентского мобильного приложения отправляется на сервер, это означает, что там она должна быть обработана с получением определенного результата. Обычно этот результат сохраняется на сервере, а мобильному клиенту отправляется некая информация, содержащая ответ на запрос. В коде этого примера мы отправляем данные на сервер для обработки файлом trailer.ogg, который заведомо не будет обрабатывать данные. На сервере должен находиться серверный сценарий, который примет отосланные данные, выполнит их обработку, и представит результаты на серверной странице, файле сервера или базе данных. Разработка серверных сценариев .asp, принимающих данные, отосланные мобильным приложением клиента, будет рассмотрена в следующей лекции.

    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^