Недавно возник разговор о возможностях OperaMini по работе с JavaScript, в частности AJAX. Тема интересная, считаю что некоторые мои наблюдения могут кому-нибудь да пригодится.
Будем рассматривать четвёртую версию OperaMini, как самую актуальную на данный момент.
Дополнительно в статье использованы некоторая информация с сайта разработчиков Opera.
Итак, OperaMini, версия браузера для телефонов, в которых качество встроенной бродилки неудовлетворительно. Основной особенностью является то, что она не на прямую скачивает и парсит страницы, а использует для этого промежуточные сервера самой Opera, на которых запрашиваемая страница оптимизируется в некий более ужатый формат OBML (Opera Binary Markup Language) утверждается, что выигрыш может достигать 90%!
Так-как OperaMini может работать на огромном количестве MIDP 2 и даже MIDP 1 беспроводных устройств, то ограничения на вычислительные ресурсы весьма большие и на прямую реализовать JavaScript движок на устройстве нет смысла, и так же как по отношению к HTML/CSS OperaMini выступает только в качестве терминала, то и для JavaScript используется похожий но более сложный подход.
В принципе логично, что OperaMini использует JavaScript движок аналогичный встроенному в основную Opera. Однако главное отличие, что всё по возможности выполняется на сервере, разумеется с некоторыми ограничениями.
Всё, что должно выполнится до завершения формирования страницы (к примеру onLoad скрипты), выполняется на сервере до выдачи страницы, из этого следует, также логичное ограничение на время выполнения последовательно вызываемых функций (к примеру setInterval(), setTimeout()и delay() просто запрещены к выполнению). Ну и конечно как только страница отсылается клиенту все скрипты останавливаются.
Пример 1:
Выдаст страницу с текстом
Hello Habr
AFTER
Какие же возможности остаются на клиентской стороне?
Выполняются скрипты, соотнесённые с событиями форм, такими как:
Также доступны события onClick для всех остальных элементов страницы, не только формы.
Ну и обычный alert('HI') работет без всякой перезагрузки.
Пример 2:
Нажатие на кнопку перегрузит страницу и заменит BEFORE на CLICKED.
Пример 3:
При изменении выбранного элемента страница перезагрузится и будет показан alert().
Другие события, такие как onMouseOver/-Out/-Down/-Up, onKeyDown/-KeyPress и onBlur, onFocus будут проигнорированы.
Теперь о AJAX
В виду вышеприведённых ограничений понятно, что AJAX не может работать как обычно. Но есть и хорошие новости, XMLHttpRequest поддерживается! Поэтому многие сайты активно использующие AJAX будет работать, хоть и с некоторыми ограничениями.
Основное, чем пришлось пожертвовать, это функции постоянно опрашивающие сервер на наличие новых данных, к примеру чат в реальном времени сделать не получится, и в GMail оповещения о новых письмах сами собой не появятся.
Те скрипты, которые выполняются как ответ на действия пользователя, нажатия мышкой, изменения полей ввода будут отрабатывать, хоть и с перезагрузкой страницы, что заметно снижает значимость использования AJAX, но хотя-бы работает как и задумано.
Будем рассматривать четвёртую версию OperaMini, как самую актуальную на данный момент.
Дополнительно в статье использованы некоторая информация с сайта разработчиков Opera.
Итак, OperaMini, версия браузера для телефонов, в которых качество встроенной бродилки неудовлетворительно. Основной особенностью является то, что она не на прямую скачивает и парсит страницы, а использует для этого промежуточные сервера самой Opera, на которых запрашиваемая страница оптимизируется в некий более ужатый формат OBML (Opera Binary Markup Language) утверждается, что выигрыш может достигать 90%!
Так-как OperaMini может работать на огромном количестве MIDP 2 и даже MIDP 1 беспроводных устройств, то ограничения на вычислительные ресурсы весьма большие и на прямую реализовать JavaScript движок на устройстве нет смысла, и так же как по отношению к HTML/CSS OperaMini выступает только в качестве терминала, то и для JavaScript используется похожий но более сложный подход.
В принципе логично, что OperaMini использует JavaScript движок аналогичный встроенному в основную Opera. Однако главное отличие, что всё по возможности выполняется на сервере, разумеется с некоторыми ограничениями.
- Ограниченная поддержка событий связанных с DOM.
- Невозможность выполнения фоновых скриптов.
- Очень ограниченные возможности по использованию AJAX.
Всё, что должно выполнится до завершения формирования страницы (к примеру onLoad скрипты), выполняется на сервере до выдачи страницы, из этого следует, также логичное ограничение на время выполнения последовательно вызываемых функций (к примеру setInterval(), setTimeout()
Пример 1:
Выдаст страницу с текстом
Hello Habr
AFTER
<html>
<head>
<title>OperaMini 4.2</title>
</head>
<body onload='document.getElementById("onLoadChangeMe").innerHTML="AFTER"'>
Hello Habr
<div id='onLoadChangeMe'>BEFORE</div>
</body>
</html>
* This source code was highlighted with Source Code Highlighter.Какие же возможности остаются на клиентской стороне?
Выполняются скрипты, соотнесённые с событиями форм, такими как:
- onSubmit – если форма имеет обработчик этого события, при отправке данных происходит безусловная их загрузка на сервер, на котором сценарий отрабатывает и результат отсылается обратно клиенту.
- onChange – работает аналогично, при выборе элемента из списка имеющего обработчик этого события происходит полная перезагрузка всей страницы, и нужная функция исполняется на сервере.
- onClick – для кнопок формы – так же отработает на сервере и перегрузит страницу с результатом.
Также доступны события onClick для всех остальных элементов страницы, не только формы.
Ну и обычный alert('HI') работет без всякой перезагрузки.
Пример 2:
Нажатие на кнопку перегрузит страницу и заменит BEFORE на CLICKED.
<html>
<head>
<title>OperaMini 4.2</title>
</head>
<body onload='document.getElementById("onLoadChangeMe").innerHTML="AFTER"'>
Hello Habr
<div id='onLoadChangeMe'>BEFORE</div>
<input
type='button'
value='Action test' onclick='document.getElementById("onLoadChangeMe").innerHTML="CLICKED"'
/>
</body>
</html>
* This source code was highlighted with Source Code Highlighter.Пример 3:
При изменении выбранного элемента страница перезагрузится и будет показан alert().
<hr />
<select id='tstSel' onchange='alert(this.selectedIndex)'>
<option value='Uno' >Uno</option>
<option value='Duo' >Duo</option>
<option value='Tres' >Tres</option>
</select>
* This source code was highlighted with Source Code Highlighter.Другие события, такие как onMouseOver/-Out/-Down/-Up, onKeyDown/-KeyPress и onBlur, onFocus будут проигнорированы.
Теперь о AJAX
В виду вышеприведённых ограничений понятно, что AJAX не может работать как обычно. Но есть и хорошие новости, XMLHttpRequest поддерживается! Поэтому многие сайты активно использующие AJAX будет работать, хоть и с некоторыми ограничениями.
Основное, чем пришлось пожертвовать, это функции постоянно опрашивающие сервер на наличие новых данных, к примеру чат в реальном времени сделать не получится, и в GMail оповещения о новых письмах сами собой не появятся.
Те скрипты, которые выполняются как ответ на действия пользователя, нажатия мышкой, изменения полей ввода будут отрабатывать, хоть и с перезагрузкой страницы, что заметно снижает значимость использования AJAX, но хотя-бы работает как и задумано.
