Опубликован: 19.03.2014 | Доступ: свободный | Студентов: 329 / 26 | Длительность: 11:36:00
Специальности: Программист
Лекция 11:

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

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

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

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

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

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

Методом GET, который использовался в данном примере, можно было не только получить данные, но и отправить их на сервер. Сделать это просто - нужно всего лишь добавить соответствующие значения в URL-адрес. Вы создаете для переменной url путь вида "textfile.txt?my_vall=5&my_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, принимающих данные, отосланные мобильным приложением клиента, будет рассмотрена в следующей лекции.

Дмитрий Белов
Дмитрий Белов

Каким образом можно создать точку останова? Например, если в Лекции 8 в примере, который демонстрирует возможность <canvas> для работы с готовыми изображениями (последний в лекции) в цикле
for (i = 0; i < 3; i++) {
for (j = 0; j < 4; j++) {
sx = 300 * i; sy = 350 * j;
contextNow.drawImage(img, sx, sy);}
поставить точку останова, то при запуске отладки проекта точка становится пустой окружностью с сообщением: В настоящий момент попадание в точку останова не произойдет. Нет загруженных символов для этого документа. Как все-таки создать точку останова и пройти по шагам весь код?