38. Динамические веб-документы на стороне клиента. JavaScript, Java, ActiveX, SWF. Примеры реализации. Достоинства и недостатки.
Скрипты CGI, PHP, JSP и ASP решают вопросы обработки форм и взаимодействия с базами данных, расположенными на сервере. Они могут принимать входящую информацию из форм, осуществлять поиск по одной или нескольким базам данных и в качестве результата генерировать HTML-страницы. Но ни один из этих методов не позволяет напрямую взаимодействовать с пользователем, например, реагировать на движения мышкой. Для этих целей необходимы скрипты, внедренные в HTML-страницы и выполняющиеся не на серверной, а на клиентской машине. Начиная с HTML 4.0, появилась возможность включать скрипты такого типа с помощью тега <script>. Наиболее популярный язык написания сценариев для клиентской стороны — это JavaScript.
JavaScript — это язык написания сценариев, использующий идеи, крайне отдаленно напоминающие язык программирования Java. Но JavaScript — это не Java по определению. Как и другие языки написания скриптов, он очень высокоуровневый. Так, одной строкой JavaScript можно создать диалоговое окно, войти в цикл ожидания пользовательского ввода и сохранить полученную строку в переменной. Столь высокий уровень языка идеально подходит для разработки интерактивных веб-страниц. С другой стороны, тот факт, что JavaScript не стандартизован и мутирует быстрее, чем мушка-дрозофила в рентгеновском луче, сильно усложняет написание платформо-независимых программ.
Пример программы на JavaScript показан в листинге 5.10. Как и в листинге 5.9,а, программа создает форму с запросом имени и возраста пользователя и гениальным образом предсказывает, исходя из этих данных, каков будет возраст человека в следующем году. Тело скрипта почти такое же, как и в примере РНР. Основная разница состоит в объявлении кнопки Submit и определении присваивания в этом объявлении. Оператор присваивания сообщает браузеру о том, что в случае нажатия кноп-ки необходимо запустить скрипт response и передать ему форму в качестве параметра.
Листинг 5.10 Применение JavaScript для обработки формы <html> <head>
<script language=”javascript” type=”text/javascript”> function response (test_form) { var person = test_form.name.value: var years = eval (test_form.age.value) + 1: document.open () document.writeln (“<html> <body>”):
document.writeln (“Привет. - + person + - !<br>”):
document.writeln (“Предсказываю: в следующем году тебе будет ” + years + - . -):
document.writeln (“</body> </html>”):
document.close ():
}
</script>
</head>
<body>
<form>
Введите свое имя: <input type=”text” name=”name”>
<p>
Введите свой возраст: <input type=”text” name=”age”>
<p>
<input type=”button” value=”Подтверждение” onclick=”response (this.form)”>
</form>
</body>
</html>
Совершенно по-новому здесь объявляется функция response. Объявление находится в заголовке HTML-файла, который обычно хранит информацию о заголовках, цвете фона и т. п. Функция извлекает из формы значение поля name и сохраняет его в виде строки в переменной person. Также извлекается значение поля age. Оно приводится к целочисленному типу с помощью функции eval, затем к значению добавляется 1, и результат сохраняется в years. После этого документ открывается для записи, в него записываются четыре строки (для этого используется метод writeln), и документ закрывается. Документ представляет собой HTML-страницу, как видно по многочисленным тегам HTML. Браузер выводит готовый документ на экран.
Важно понимать, что обрабатываются программы, показанные в листингах 5.9 и 5.10, совершенно по-разному, несмотря на их внешнее сходство. Что происходит в первом случае (листинг 5.9)? После того как пользователь нажимает кнопку Submit, браузер собирает всю введенную информацию в одну длинную строку и отправляет ее на тот сервер, с которого пришла страница. Сервер видит имя PHP-файла и запускает его. PHP-скрипт создает новую HTML-страницу, которая отсылается браузеру для отображения. Что касается второго случая (листинг 5.10), то после нажатия кнопки Submit браузер сам выполняет действия функции JavaScript, содержащейся на странице. Вся работа производится локально, внутри браузера. С сервером никакого взаимодействия не осуществляется. Как следствие, результат появляется практически мгновенно, тогда как при использовании РНР задержка прибытия страницы с результатом может составлять несколько секунд. Разница между скриптами, работающими на стороне сервере и на стороне клиента, показана на рис. 5.11. Показаны шаги, выполняемые в каждом случае. В обоих случаях все эти этапы производятся после вывода формы на экран. Шаг 1 состоит в приеме данных от пользователя.
Затем следует их обработка, и вот здесь имеются значительные различия.
Эти различия вовсе не означают, что JavaScript лучше, чем РНР. Просто у них различные сферы применения. РНР (а с ним неявно и JSP, и ASP) применяется тогда, когда необходимо взаимодействовать с удаленной базой данных. JavaScript используют тогда, когда требуется взаимодействие с пользователем в пределах его компьютера. Разумеется, возможно (и до-вольно часто осуществляется) одновременное использование РНР и JavaScript, хотя они и не могут, например, обрабатывать одно и то же событие (типа нажатия кнопки) или производить одно и то же действие.
Рисунок 5.11 — PHP-скрипт на стороне сервера (а);
сценарий на JavaScript на стороне клиента (б) (нумерация)
JavaScript — это полноценный язык программирования, ничуть не слабее по возможностям, чем С или Java. В нем есть понятия переменных, строк, массивов, объектов, функций и всех привычных управляющих структур. К тому же он обладает множеством полезных свойств, специфичных для веб-страниц, включая возможность управления окнами и фреймами, установки и получения cookie, работы с формами и гиперссылками. Пример программы на JavaScript с рекурсивной функцией приведен в листинге 5.11.
Листинг 5.11 Программа на JavaScript для подсчета и вывода факториалов <html> <head> <script language=”javascript” type=”text/javascript”>
function response (test_form) {
function factorial (n) {if (n-o) return 1: else return n * factorial (n-1)}
var r=eval (test_form.number.value): // r=введенный аргумент
document.myform.mytext.value = “Результаты:\ n”:
for (var i = 1: I <=r : I ++)// Вывести одну строку от 1 до r
document.myform.mytext.value += (I + “!=” + factorial (1) + “\n”):
}
</script>
</head>
<body>
<form name=”myform”>
Ведите число: <input type=”text” name=”number”>
<input type=”button” value=”Подсчет таблицы факторилов”
onclick=”response (this.form)”>
<p>
<textarea name=”mytext” rows=”25” cols=”50”> </textarea>
</form>
</body>
</html>
С помощью JavaScript можно также отслеживать появление мыши над определенными объектами на странице. На многих веб-страницах с JavaScript можно заметить, что при наведении курсора мыши на какой-нибудь текст или изображение что-нибудь происходит. Часто при этом меняется изображение или вдруг выскакивает меню. Такое поведение легко программируется на JavaScript и несколько оживляет веб-страницы. Пример приведен в листинге 5.12.
Листинг 5.12 Интерактивная страница, отвечающая на движения «мышью» <html> <head> <script language=”javascript” type=”text/javascript”>
if (!document.myurl) document.myurl = new Array ():
document.myurl [0] =”http://www.cs.vu.nl/ast/im/kitten.jpg”:
document.myurl [1] =”http://www.cs.vu.nl/ast/im/puppy.jpg”:
document.myurl [0] =”http://www.cs.vu.nl/ast/im/bunny.jpg”:
function pop (m) {
var urx=”http://” www.cs.vu.nl/ast/im/cat.jpg”:
popuwin=window.open (document.myurl [m]. “mywind”. “wight=250.height=250”):
}
</script>
</head>
<body>
<p><a href=”#” onMouseover=”pop (0): return false:”> Котенок </a></p>
<p><a href=”#” onMouseover=”pop (1): return false:”> Щенок </a></p>
<p><a href=”#” onMouseover=”pop (2): return false:”> Кролик </a></p>
</body>
</html>
JavaScript — это не единственный инструмент для создания веб-страниц с высокой степенью интерактивности. Еще один метод связан с использованием апплетов. Это небольшие программы на Java, скомпилированные в машинные инструкции виртуального компьютера, называемого JVM (Java Virtual Machine — виртуальная машина Java). Апплеты могут внедряться в HTML-страницы (между тегами <applet> и </app1et>) и интерпретироваться JVM-совместимыми браузерами. Поскольку перед выполнением Java-апплеты проходят стадию интерпретации, интерпретатор может помочь избежать выполнения «нехороших действий». По крайней мере, теоретически такая возможность существует. На практике создатели апплетов обнаружили почти бесконечный поток ошибок в библиотеках ввода-вывода Java.
Ответ корпорации Microsoft на Java-апллеты фирмы Sun состоял в подключении к веб-страницам управляющих элементов ActiveX — программ, скомпилированных для машинного языка процессора Pentium и выполняемых на аппаратном уровне. Это свойство делает их значительно более быстрыми и гибкими, нежели интерпретируемые Java-апплеты, поскольку они могут делать все то же самое, что и обычная программа. Когда Internet Explorer видит на странице управляющий элемент ActiveX, он загружает его, идентифицирует и исполняет. Однако загрузка инородных программ может породить проблемы защиты информации. Поскольку почти все браузеры могут интерпретировать программы как на Java, так и на JavaScript, разработчик, желающий создать страницу с высокой степенью интерактивности, может выбирать, по крайней мере, из двух этих технологий. А если вопрос платформонезависимости значения для него не имеет, то к ним добавляется еще и ActiveX. Общее правило таково:
+ JavaScript обеспечивает простоту программирования.
+ Java-апплеты обеспечивают быстроту выполнения.
+ Управляющие элементы ActiveX обгоняют по скорости выполнения все остальные технологии.
Во всех браузерах реализована строго одна и та же версия JVM, а вот найти два браузера с одинаковой реализацией JavaScript почти невозможно. Поэтому Java-апплеты легче переносятся с платформы на платформу, чем JavaScript.
Прежде чем закончить тему динамических веб-страниц, подведем краткие итоги изученного. Целые веб-страницы могут создаваться «на лету» с помощью разнообразных скриптов, работающих на сервере. С точки зрения получающего их браузера, это обычные HTML-страницы, которые нужно просто вывести на экран. Скрипты можно создавать посредством технологий Perl, PHP, JSP или ASP (рис. 5.12).
Рисунок 5.12 — Различные способы создания и вывода динамических страниц
Генерация динамических страниц возможна и на стороне клиента. Веб-страницы можно писать на XML и затем конвертировать в HTML, задавая внешнее представление в XSL-файле. Программы на JavaScript могут производить любые вычисления. Наконец, подключаемые модули и вспомогательные приложения могут использоваться для отображения самых разнообразных форматов.
