 | Уровень сложности: средний Никлас Чейз, Независимый автор, Backstop Media
03.10.2006 Асинхронный JavaScript™ и XML, или Ajax, в последнее время будоражит веб, поскольку он позволяет веб-дизайнерам создавать приложения, реагирующие на действия пользователя без перезагрузки страницы целиком. Такая возможность изначально присутствовала в XForms. В этом совете рассматриваются обе технологии: XForms и Ajax, а также способы комбинирования этих двух подходов. Вы можете найти множество ресурсов, помимо этого, которые обучают тому, как создавать Ajax запросы, но XForms решают несколько иные задачи и предоставляют особые возможности в использовании данных после их получения.
|
Протестированные браузеры
Описанные в данном совете примеры XForms были протестированы при помощи Firefox 1.5 (с установленным расширением XForms) и Microsoft ® Internet Explorer 6 с установленным элементом управления Formsplayer. Файл для загрузки содержит XHTML-файл для Firefox и HTML-файл для IE.
|
|
Приложение
XForms предоставляет свою собственную версию Ajax, в которой у вас есть возможность замещать данные, определяющие содержимое страницы, без перезагрузки страницы целиком. Рассмотрим, например, страницу с фрагментами ковбойских мудростей. Данные могут выглядеть так, как показано в листинге 1.
Листинг 1. Пример данных
<pearls>
<pearl>
Never ask a barber if he thinks you need a haircut.
</pearl>
<pearl>
Making it in life is kind of like busting broncos. You're
going to get thrown a lot. The simple secret is to keep getting
back on.
</pearl>
<pearl>
Never miss a good chance to shut up.
</pearl>
<pearl>
The quickest way to double your money is to fold it over and
put it back in your pocket.
</pearl>
</pearls>
|
| | Загляните в ресурсный центр Ajax - магазин, где вы сможете найти информацию модели программирования Ajax, в частности, статьи и руководства, конференции, блоги, wiki, информацию о происходящих событиях и новости. Все, что происходит в мире Ajax, освещается здесь. |
|
Далее вы можете создать форму примерно так, как показано ниже (см. листинг 2).
Листинг 2. Форма
<?xml version="1.0" encoding="ASCII"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xforms="http://www.w3.org/2002/xforms">
<head>
<title>Instance Data-To-XHTML/XForms Example</title>
<xforms:model id="model_pearls">
<xforms:instance id="instance_model_pearls" src="wisdom.xml"/>
<xforms:submission id="submit_model_pearls"
action="http://localhost/newwisdom.xml"
method="post" replace="instance"
instance="instance_model_pearls"/>
</xforms:model>
<link href="gen_default.css" rel="stylesheet"/>
</head>
<body>
<h1>Cowboy Wisdom</h1>
<xforms:output id="thePearl" ref="/pearls/pearl[2]"
model="model_pearls" />
<xforms:submit submission="submit_model_pearls">
<xforms:label>Get new sayings</xforms:label>
</xforms:submit>
</body>
</html>
|
В результате у вас получится страница как на рисунке 1.
Рисунок 1. Основная страница
Заметьте, что атрибут ref для элемента output является утверждением XPath, которое содержит позицию. При помощи этого XPath утверджения, вы можете задавать то, что будет отображаться на странице.
Также вы можете управлять страницей, управляя фактическими данными. Как вы уже наверное заметили в листинге 1, часть выделенного жирным текста является информацией из элемента submission. Здесь вы дали указание движку XForms заменять не всю страницу целиком, а только отдельную сущность. Посланный в URL запрос будет возвращать ту же структуру, но с другими данными, и вы моментально будете получать новые данные. Например, если вы нажмете на кнопку Submit, браузер загрузит другой документ, а поскольку утверждение output всегда должно выводиться на определенной позиции, эта же позиция определена для данных, которые теперь заполняют форму, что вы и видите на рисунке 2.
Рисунок 2. Замещение части страницы
Когда вам непременно нужно использовать скрипт
Однако, в некоторых случаях вы будете использовать JavaScript, нравится вам это или нет. Предположим, вы имеете дело с данными, которые перед использованием должны быть каким-то образом преобразованы или приходят с сайта, которым вы не управляете. Единственный вариант работы с этими данными - это получать их, используя JavaScript, после чего добавлять их на страницу.
Суть в том, что вы не можете добавить данные в элемент напрямую, таким образом, чтобы получилась простая HTML страница. Вместо этого вам нужно поместить информацию в отдельную сущность, а затем работать с утверждением XPath, которое определит содержимое контроля XForms.
Например, можно добавить вторую кнопку на страницу, для того, чтобы проматывать высказывания (см. листинг 3).
Листинг 3. Добавление скрипта
...
<body>
<h1>Cowboy Wisdom</h1>
<script type="text/javascript">
var whichPearl = 0;
function choosePearl(){
if (whichPearl == 0) {
whichPearl = 1;
} else if (whichPearl == 1) {
whichPearl = 2;
} else if (whichPearl == 2) {
whichPearl = 3;
} else if (whichPearl == 3) {
whichPearl = 0;
}
refString = "/pearls/pearl["+whichPearl+"]";
theTarget = document.getElementById("thePearl");
theTarget.setAttribute("ref", refString);
}
</script>
<xforms:output id="thePearl" ref="/pearls/pearl[2]"
model="model_pearls" />
<form>
<input type="button" value="Change saying"
onclick="choosePearl();" />
</form>
<xforms:submit submission="submit_model_pearls">
<xforms:label>Get new sayings</xforms:label>
</xforms:submit>
</body>
</html>
|
Сама по себе функция простая: цикл по числовым значениям. В реальном приложении это мог бы быть скрипт, в котором вы осуществляете Ajax запросы и работаете с возвращенными в результате его обработки данными. Для каждого значения индекса вы создаете новый текст, который записывается в атрибут ref для элемента thePearl.
Нужно еще добавить from which для вызова скрипта. Теперь если вы перезагрузите страницу, кнопка появится, и вы сможете нажать на нее, атрибут ref поменяется, страница автоматически изменит данные в соответствие с утверждением XPath, как показано на рисунке 3.
Рисунок 3. Новый скрипт
Резюме
XForms сами по себе обеспечивают подобные Ajax возможности, при которых вы можете изменять данные на странице без перезагрузки самой страницы. С другой стороны, если вам необходимо использовать скрипт, вы можете управлять XML данными, которые определяют, на что будет похожа форма XForms, то есть все изменения будут основаны на внешних данных.
Загрузка | Описание | Имя | Размер | Метод загрузки |
|---|
| примеры XForms с применением Ajax | xforms_ajax_source.zip | 4KB | HTTP |
|---|
Ресурсы
Об авторе | | | Никлас Чейз (Nicholas Chase) участвовал в разработке Web-сайтов для таких компаний, как Lucent Technologies, Sun Microsystems, Oracle и Tampa Bay Buccaneers. Ник успел побывать школьным учителем физики, редактором электронного научно-фантастического журнала, инженером в области мультимедиа, инструктором по Oracle и главным инженером в интерактивной коммуникационной компании. Он является автором нескольких книг, в том числе XML Primer Plus (Sams). |
Выскажите мнение об этой странице
| |
