Добавил:
ivanov666
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Предмет:
Файл:Разработка мобильных приложений для бизнеса. Учебное пособие
.pdf
4. КЛИЕНТ-СЕРВЕРНОЕ ВЗАИМОДЕЙСТВИЕ
AJAX
AJAX (от англ. Asynchronous Javascript and XML – «асинхронный
JavaScript и XML») – подход к построению интерактивных пользователь-
ских интерфейсов веб-приложений, заключающийся в «фоновом» обмене
данными браузера с веб-сервером. В результате, при обновлении данных,
веб-страница не перезагружается полностью, и веб-приложения становятся
более быстрыми и удобными.
AJAX – не самостоятельная технология, а
концепция использования
нескольких смежных технологий. AJAX базируется на двух основных
принципах:
использование технологии динамического обращения к серверу
«на лету», без перезагрузки всей страницы полностью, например:
o с использованием XMLHttpRequest (основной объект);
o через динамическое создание дочерних фреймов;
o через динамическое создание тега <script>.
использование DHTML для динамического изменения содержания
страницы;
В
качестве формата передачи данных обычно используются JSON
или XML.
Преимущества
Экономия трафика
Использование AJAX позволяет значительно сократить трафик при
работе с веб-приложением благодаря тому, что часто вместо загрузки всей
страницы достаточно загрузить только изменившуюся часть, как правило,
довольно небольшую.
Уменьшение нагрузки на сервер
AJAX позволяет несколько снизить нагрузку на сервер. К примеру,
на странице работы с почтой, когда вы
серверу достаточно внести изменения в базу данных и отправить клиентскому скрипту сообщение об успешном выполнении операции без необходимости повторно создавать страницу и передавать её клиенту.
Ускорение реакции интерфейса
Поскольку нужно загрузить только изменившуюся часть, пользователь видит результат своих действий быстрее.
отмечаете прочитанные письма,
41
Недостатки
Отсутствие интеграции со стандартными инструментами браузера
Динамически создаваемые страницы не регистрируются браузером в
истории посещения страниц, поэтому не работает кнопка «Назад», предоставляющая пользователям возможность вернуться к просмотренным ранее
страницам, но существуют скрипты, которые могут решить эту проблему.
Невозможность сохранения закладки на желаемый материал
Частично решить эти проблемы можно
с помощью динамического изменения идентификатора фрагмента (части URL после #), что позволяют многие браузеры.
Динамически загружаемое содержимое недоступно поисковикам
(если не проверять запрос, обычный он или XMLHttpRequest)
Поисковые машины не могут выполнять JavaScript, поэтому разработчики должны позаботиться об альтернативных способах доступа к содержимому сайта.
Старые методы учёта статистики сайтов становятся
неактуаль-
ными
Многие сервисы статистики ведут учёт просмотров новых страниц
сайта. Для сайтов, страницы которых широко используют AJAX, такая
статистика теряет актуальность.
Усложнение проекта
Перераспределяется логика обработки данных – происходит выделение и частичный перенос на сторону клиента процессов первичного форматирования данных. Это усложняет контроль целостности форматов и
типов. Конечный эффект технологии
может быть нивелирован необоснованным ростом затрат на кодирование и управление проектом, а также
риском снижения доступности сервиса для конечных пользователей.
Требуется включенный JavaScript в браузере
JavaScript может быть выключен из соображений безопасности.
И, конечно же, AJAX-страницы труднодоступны неполнофункциональным
браузерам, роботам и веб-архивам.
Принцип работы
Скрипт состоит из двух частей
:
клиентская часть: исполняется на стороне клиента, пишется на JavaScript;
серверная часть: исполняется на сервере, может быть написана на
любом языке программирования, понимающем GET/POST запросы.
Этапы написания клиентской части:
1. Сбор и подготовка информации для отправки запроса на сервер.
2. Создание экземпляра объекта XMLHttpRequest.
42
3. Установка для него функции обработчика события
onreadystatechange. Это событие наступает при каждой смене состояния объ-
екта XMLHttpRequest. Данная функция, по сути, является основной частью
скрипта, поскольку именно в ней происходит обработка ответа сервера.
4. Открытие соединения с указанием типа запроса (GET или POST),
URL серверной части, флага асинхронного режима и имени и пароля поль
-
зователя (если необходимо).
5. Непосредственно отправка запроса.
6. Обработка ответа серверной части.
Создание объекта XMLHttpRequest отличается для Internet Explorer и
других обозревателей, поэтому для совместимости эту операцию приходиться дублировать разными способами:
var req;
if (window.XMLHttpRequest) // normal browser
req = new XMLHttpRequest();
else if (window.ActiveXObject) { //IE
try {
req = new ActiveXObject('Msxml2.XMLHTTP'); // IE
разных версий
} catch (e) { } // может создавать
try { // объект по разному
req = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e){}
}
Использование метода GET, установка обработчика события
onreadystatechange и отправка запроса:
req.open("GET", url, true);
req.onreadystatechange = function() {
if (req.readyState == 4) {обработка результатов}
};
req.send(null); //отправка запроса без параметров, т.к. они установле-
ны в url
В обработчике события onreadystatechange необходимо обязательно
проверить условие req.readyState == 4, которое говорит о том, что данные
загружены. Дополнительно можно также проверять req.status == 200. См.
табл. ниже.
При использовании объекта XMLHttpRequest с методом POST требуется дополнительно отправлять header:
43
req.setRequestHeader("Content-Type", "application/x-www-formurlencoded");
req.onreadystatechange = function() {
if (req.readyState == 4) { обработка результатов }
};
req.send('param1=1&m2=0'); //теперь параметры передаются здесь
Несколько параметров разделяются амперсандами.
Полный пример:
var req;
if (window.XMLHttpRequest) req = new XMLHttpRequest();
else if (window.ActiveXObject) {
try {
req = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e){}
try {
req = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e){}
}
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4 && req.status == 200) {
alert(req.responseText); }
};
req.open("POST", 'xmlhttp.php', true);
req.setRequestHeader("Content-Type", "application/x-www-formurlencoded");
req.send('param=1&ajax=1');
}
else alert("Браузер не поддерживает AJAX");
Серверная часть (url в req.open) может быть написана на чем угодно,
лишь бы понимала запросы GET/POST. Возращаемое значение
(req.responseText) формируется стандартным выводом. Пример серверной
части на php:
if(isset($_POST['param']))
echo ($_SERVER['REMOTE_ADDR'])?
"Your IP".$_SERVER['REMOTE_ADDR']:
"IP неизвестен";
44
Пpимepы AJAX
Пример 1. Динамическое обновление контента по таймеру
Создадим простенькую программу, отображающую текущее время,
обновляемое раз в секунду по таймеру. Особенностью данной программы
будет получение информации о текущем времени из другого внешнего
файла.
Фaйл index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="content"></div>
<script>
function show()
{
$.ajax({
url: "time.php",
cache: false,
success: function(html){
$("#content").html(html);
}
});
}
$(document).ready(function(){
show();
setInterval('show()',1000);
});
</script>
</body>
</html>
Фaйл time.php
<?php echo date("H:i:s"); ?>
45
Пример 2. Динамическое обновление контента по выбору пользователя
Программа, динамически загружающая контент по выбору пользователя.
Файл index.html.
<head>
<meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<p>Какую страницу желаете открыть?</p>
<form>
<input id="btn1" type="button" value="Страница 1">
<input id="btn2" type="button" value="Страница 2">
</form>
<div id="content"></div>
<script>
$(document).ready(function(){
$('#btn1').click(function(){
$.ajax({
url: "page1.html",
cache: false,
success: function(html){
$("#content").html(html);
}
});
});
$('#btn2').click(function(){
$.ajax({
url: "page2.html",
cache: false,
success: function(html){
$("#content").html(html);
}
});
});
});
46
</script>
</body>
</html>
В теле документа создана форма, имеющая две кнопки, посредством
которых пользователь осуществляет выбор желаемого контента и контейнер для загрузки контента.
Загрузка динамического контента в контейнер осуществляется аналогично примеру 1. Разница лишь в том, что грузится различный контент,
если происходят разные события.
Событие нажатия на кнопку «Страница 1» обрабатывается функцией
$('#btn1').click()
, а событие нажатия на кнопку «Страница 2» обрабатыва-
ется функцией $('#btn2').click().
Содержимое файлов page1.html и page2.html, которые загружаются в
область контента динамически, представляет собой простые HTMLстраницы или текстовые файлы с контентом.
Пример 3. Отправка данных на сервер в фоновом режиме и получение контента
Рассмотрим пример, отправляющий введенное имя пользователя на
сервер. Сервер при
получении имени выдает приветствие и подсчитывает
количество символов во введённом имени.
Файл index.html.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<form id="myForm">
Введите имя:<br/>
<input id="username" type="text" size="20"><br/><br/>
<input type="submit" value="Отправить">
</form>
<div id="content"></div>
<script>
$(document).ready(function(){
$('#myForm').submit(function(){
47
$.ajax({
type: "POST",
url: "greetings.php",
data: "username="+$("#username").val(),
success: function(html){
$("#content").html(html);
}
});
return false;
});
});
</script>
</body>
</html>
Файл greetings.php
<?php
echo "Приветствую, <b>".$_REQUEST['username']."</b>!<br>";
echo "В вашем имени букв: ".strlen($_REQUEST['username']).".";
?>
48
5. ENYO
Enyo – объектно-ориентированная платформа JavaScript с открытым
исходным кодом, основанная на принципах инкапсуляции и модульности.
Enyo содержит все, что необходимо для создания быстрых, масштабируемых мобильных приложений или веб-приложений:
Создан с нуля, в первую очередь, для мобильных устройств
Enyo насыщает webOS, будучи разработанным, чтобы быть быстрым и отлично работать на
мобильных устройствах.
Теперь доступен для настольной и кросс-браузерной разработки
Enyo 2.0 теперь работает между мобильными средами и настольными
браузерами, включая Chrome, Firefox, и Internet Explorer.
Высоко настраиваемый и расширяемый
ядро Enyo может быть расширено модулями, виджетами UI, и не только.
Лёгкий и быстрый
Ядро Enyo 2.0 занимает приблизительно 13 Кбит в сжатом виде, оно создано для быстрого рендеринга приложений и производительности.
Простой, автономный и легкий к обзору
Построение всё более сложной функциональности начинается с простых
компонентов, допускающих повторное использование.
Созданный, чтобы масштабироваться
Enyo создавался на принципах, необходимых для создания обширных,
сложных мобильных приложений и веб-приложений.
Открытый исходный код
Enyo доступен
в соответствии с Лицензией Apache, версией 2.0.
Концепция ядра
В основе Enyo лежит простая, но мощная модель инкапсуляции, помогающая заключать функциональность приложения в автономные стандартные блоки, пригодные к повторному использованию и поддержке.
Каждая часть приложения Enyo - Компонент, и Компоненты созданы
из других Компонентов.
Например, можно легко объединить теги <input> и <label> в компонент
LabeledInput, который Вы можете использовать (в том числе повторно) как единую атомарную часть. Но это – только начало. Большая часть
функциональности – палитра цветов, необычный генератор отчетов, или
всё приложение рисования – могут также быть упакованы как компоненты,
допускающие повторное использование.
Модель инкапсуляции Enyo, позволяет разделять и властвовать над
крупными проектами. Ни одна из
частей приложения не должна быть особенно сложной. Поскольку объединение Компонентов является центральной концепцией проектирования Enyo, разбиение сложного кода на мелкие
49
кусочки является для него естественным процессом. И поскольку Enyo является модульным, все эти части вполне могут быть использованы повторно: в пределах одного проекта, во множестве проектов или даже другими
разработчиками Enyo, если это необходимо.
Пример приложения на Enyo
Напишем простое приложение HelloWorld, используя Enyo.
<!doctype html>
<html>
<head>
<title>Enyo</title>
<script src="enyo-2.0b/enyo.js" type="text/javascript">
</script>
</head>
<body>
<script type="text/javascript">
new enyo.Control({content: "Hello From Enyo"}).write();
</script>
</body>
</html>
Данный пример загружает enyo.js из каталога enyo-2.0b. При установке какой-либо версии Enyo она помещается в каталог с соответствующей версией.
Принцип работы базового enyo.Control схож с обычным html-тегом.
Можно назначить классы и атрибуты, а также выбрать стиль. Например:
new enyo.Control({content: "Hello From Enyo", classes: "foo",
style: "color: red", attributes: {tabIndex: 0}}).write();
Приводит к созданию
<div class="foo" style="color: red;" tabIndex="0">Hello From
Enyo</div>
Теперь попробуем совместить более одного компонента.
new enyo.Control({
components: [
{content: "Hello From Enyo"},
{tag: "hr"}
]
}).write();
Данный компонент инкапсулирует два других компонента в едином
теле (возможно инкапсулирование компонентов любых типов, именно поэтому свойство называется components. Элементы управления – частный
случай компонентов). Внешний компонент поддерживает связь с инкапсулированными: он управляет их жизненным циклом, обрабатывает их сообщения и обслуживает указатели на них. Например:
50
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]