Опубликован: 19.03.2014 | Уровень: для всех | Доступ: платный
Практическая работа 9:

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

< Лекция 11 || Практическая работа 9 || Лекция 12 >
Аннотация: Разрабатывается мобильный виджет, содержащий средства обмена данными между клиентским и серверным приложениями. Отладка выполняется на реальном мобильном устройстве.

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

  1. Запустите VS 2012. Выполните следующие команды: Файл -> Создать проект -> Visual C# -> CordovaWP8_3_0_0 -> Request.
  2. В папке 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>
  3. Замените содержимое файла стилей 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;
    }
  4. Создайте в папке 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:

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

  5. Создайте в папке 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);
  6. Включите созданный файл js в разметку index.html:
    <script type="text/javascript" src="js/ajax_send.js"></script>

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

< Лекция 11 || Практическая работа 9 || Лекция 12 >
Дмитрий Белов
Дмитрий Белов

Каким образом можно создать точку останова? Например, если в Лекции 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);}
поставить точку останова, то при запуске отладки проекта точка становится пустой окружностью с сообщением: В настоящий момент попадание в точку останова не произойдет. Нет загруженных символов для этого документа. Как все-таки создать точку останова и пройти по шагам весь код?

Акмарал Кубыгулова
Акмарал Кубыгулова
Казахстан, Астана
Илья Макаров
Илья Макаров
Россия, Пермь, МОУ СОШ 71, 2013