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

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

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

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

  • Запустите 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:

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