НОУ ИНТУИТ | Разработка гибридных приложений для мобильных устройств под Windows Phone. Лекция 9: Обмен данными между клиентом и сервером

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Опубликован: 19.03.2014 | Доступ: свободный | Студентов: 329 / 27 | Длительность: 11:36:00

Темы: Программирование, Мобильные технологии

Специальности: Программист

|

Вам нравится? Нравится 13 студентам

| Поделиться |

Поддержать курс

| Скачать электронную книгу

Аннотация: Разрабатывается мобильный виджет, содержащий средства обмена данными между клиентским и серверным приложениями. Отладка выполняется на реальном мобильном устройстве.

Ход выполнения работы:

Запустите VS 2012. Выполните следующие команды: Файл -> Создать проект -> Visual C# -> CordovaWP8_3_0_0 -> Request.

В папке www обозревателя решений выбираем файл index.html.

Замените содержимое www/index.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/index.css" />
    <script type="text/javascript" src="js/ajax_read.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>

Замените содержимое файла стилей www/css/index.css:

#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;
}

Создайте в папке www/js файл ajax_read.JS, в который поместите JavaScript - код для чтения данных с сервера:

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/monster1.gif"
    var request = new XMLHttpRequest();
    request.onreadystatechange = function () {
        if (request.readyState != 4) {
            databox.innerHTML = 'Loading';
        }
           if (request.readyState == 4) {
               databox.innerHTML = ' Query result:  ' + request.responseText;
        }
    }
    request.open("GET", url, true);
    request.send(null);
}
window.addEventListener('load', initiate, false);

Результат запуска на мобильном устройстве Windows Phone:

увеличить изображение

После нажатия кнопки "ВЫПОЛНИТЬ":

увеличить изображение

Создайте в папке www/js файл ajax_send.JS, в который поместите JavaScript - код для отправки данных на сервер:

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/monster1.gif"
    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 = 'Не отправлено';
        }
        if (request.readyState == 4) {
            databox.innerHTML ='Отправлено на сервер';
        }
    }
}
window.addEventListener('load', initiate, false);

Включите созданный файл js в разметку index.html:
```
<script type="text/javascript" src="js/ajax_send.js"></script>
```
Результат запуска на мобильном устройстве Windows Phone:

увеличить изображение

увеличить изображение

Дальше >>

Авторизоваться

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

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

Ход выполнения работы:

Вопросы и ответы