Ajax на мобильном браузере или мобильный Ajax (с примерами)

Ajax, судя по тенденциям, всё больше овладевает умами девелоперов. Особенно активно сейчас начинает развиваться Ajax для мобильных браузеров. Об этом собственно и поговорим.

Технология Ajax очень востребована пользователями мобильных устройств. Причина в общем-то на поверхности. Снижается потребление трафика и трата времени. Ведь подгружаются всего некоторые части страницы, а не она вся (если не в теме, что такое Ajax — рекомендую посетить Wikipedia — Ajax). Соответственно серфинг сети с мобильного устройства становиться более качественным, быстрым и менее раздражающим. Более того, он обходиться дешевле.


Мобильный Ajax всё-таки довольно разительно отличается от обычного, PC’шного. Это связано со специфической архитиктурой мобильных операционных систем, пропускной способности канала и т.п. Однако ничего невозможного нет. Стоит оглянуться только на приличную поддержку SVG и Flash — это именно те технологии, которые вы уже используете или будете использовать буквально завтра в своём телефоне или КПК.

Так, теперь мы имеем примерное представление того, какой это зверь — мобильный Ajax. Давайте немного углубимся.

Каковы же минимальные требования к мобильному браузеру? В общем эти требования не шибко о
тличаются от требований к браузерам на PC. XMLHttpRequest или ActiveX, и JS DOM для отрисовки.

Переведу на русский язык — XMLHttpRequest нужен для асинхронной загрузки данных, а минимальный JS DOM для изменения документа в браузере без перезагрузки страницы. И кто бы мог подумать — есть уже мобильные браузеры, которые могут нам помочь. И мало того, что их количество близится к десяти, так ещё в их полку прибывает с завидной регулярностью. Всё больше компаний и корпораций понимают, что мобильный Ajax — вещь полезная и нужная.

Список браузеров:

* (Opera Mobile >= 8.x, не Opera Mini)
* Internet Explorer Mobile (WM 5.0+/2003)
* S60 3rd edition (WebKit/KHTML core)
* Minimo (Gecko-based)
* OpenWave (>=Mercury)
* NetFront (>=3.4)
* Safari Mobile (iPhone)

Некоторые специалисты считают, что Ajax может подвинуть такого монстра как J2ME. Правда до сих пор многие мобильные браузеры работают по разному под различными операционными системами, и как следствие, Ajax тоже или глючит, или не работает вовсе. Но это дело времени. Это на заметку девелоперам — готовьте санки, но пока не катайтесь.

Среди Ajax-платформ для мобильных устройств, есть отдельный класс, которые называют mojax или bling. Но их используют в основном для прочих девайсов, которые требуют выхода в сеть без участия человека. И как правило требуют специфического API девайса.

Ajax приложения для PC давно перестали быть чем-то таким, что требует пляски с бубном и траты нервов. Сейчас всё несколько проще — есть куча фреймворков, взять хотя бы Prototype или jQuery.

Дам ссылки на пару фреймворков в конце статьи :)

Ну что? Поехали?

Для начала проверьте связку мобильной ОС и вашего мобильного браузера тут — http://pwmwa.com/frost/ — на предмет работы Ajax’a в системе.

Создадим объект XMLHttpRequest:
req = new XMLHttpRequest();

или
req = new ActiveXObject(Microsoft.XMLHTTP);


Для спокойствия и удобства обернём всё в функцию:
function getXHR()
{
if(window.XMLHttpRequest)
{
req = new XMLHttpRequest();
return true;
}
else try
{
req = new ActiveXObject(‘Msxml2.XMLHTTP’);
return true;
}
catch(e)
{
try
{
req = new ActiveXObject(“Microsoft.XMLHTTP”);
return true;
}
catch(e)
{
req = false;
return false;
}
}
}


Открываем HTTP соединение:
req.open(‘POST’, url, true);


Первый аргумент определяет метод передачи — GET, POST и т.п.

Второй адрес url, который собственно запрашиваем.

Третий аргумент определяет, должен ли запрос быть асинхронным, или обработка должна остановиться, пока ответ не получен. Чаще всего, естественно, используют true.

Когда запрос сформирован, надо отсылать. Сделать это можно так:
send(”);


После отправки запроса нам нужно контролировать его выполнение. В частности нужно узнать, ответил ли сервер кодом HTTP 200. Сделать это можно примерно так:
function ajaxCallback()
{
if(req.readyState == 4)
{
if(req.status == 200)
{
//Do something with the response
}
}
}


Что бы обработать то, что мы получили нам нужно использовать responseText или responseXml. Первое — представление данных, полученных с сервера, и второе — DOM-совместимая версия. Как только XMLHttpRequest выполнен, то нужно сразу обновить XHTML, основываясь на полученных данных. Удобней всего использовать innerHTML.

Так мы заменим содержимое HTML элемента с id=”someElement” на “some text”:
document.getElementById(’someElement’).innerHTML = ’some text’;

А что бы заменить на полученные с сервера данные:
document.getElementById(’someElement’).innerHTML = req.responseText;


Основываясь на написанном выше, мы можем написать Ajax-приложение, которое будет обладать следующим функционалом:

* ссылки будут иметь реальные адреса;
* по щелчку будет отправлен запрос на сервер, после обработки сервер отдаст данные;
* когда браузер получит данные, он обновит содержимое страницы;
* если аякса не будет, по причине выключенного JS или по иным причинам — то будет выполнен переход на указанный адрес

Сама страница будет выглядеть так:
<?xml version=“1.0″ encoding=“UTF-8″?>
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.1//EN” “http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd”>
/>

dev.mobi mAjax

<a href=“fallbackTime.php”
onclick=“return updateElm(’getTime.php’, ‘timeDiv’);” >Get server time
No ajax data yet





majax.js — сам JS код, а getTime.php — скрипт, к которому мы будем обращаться по клику.

function updateElm(url, id)
{
if(getXHR())
{
req.open(‘POST’, url, true);
req.onreadystatechange = function()
{
if(req.readyState == 4)
{
if(req.status == 200)
{
document.getElementById(id).innerHTML = req.responseText;
}
else
{
document.getElementById(id).innerHTML = ‘Could not retrieve data’;
}
}
req.send(”);
}
else return true;
return false;
}


Когда человек кликает на ссылку, то с помощью JS скрипта происходит асинхронное обращанеи к скрипту getTime.php. После получения данных будет заменено содержимое контейнера timeDiv.

Затем updateElem получает ссылку на объект XMLHttpRequest (getXHR ()), устанавливает связь с URL, и определяет функцию отзыва. Функция отзыва проверяет, что запрос завершён (req.readyState == 4) и что статус HTTP является 200. Эта функция также определяет, успешно ли обновлён id=’id’.

В итоге получается так: если JS есть и работает нормально, то человек получает обновлённые данные с помощью нашего Ajax-приложения. Если нет, то переходит по другому линку, получая теже данные, но с переходом на другую страницу.

Содержимое getTime.php простое:
<?php
echo date(‘l dS \of F Y h:i:s A’);
?>


Разумеется заменить информацию можно чем угодно. Каквы будете формировать php — это сугубо ваша забота :)

В итоге получаем туже страницу, но с изменёнными даными в контейнере с id=”someElement”
<?php echo ‘<?xml version=”1.0″ encoding=”UTF-8″?>’?>
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.1//EN” “http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd”>
/>

dev.mobi mAjax

<a href=“fallbackTime.php?uid=<?php echo uniqid(); ?>”
onclick=“return updateElm(’getTime.php’, ‘timeDiv’);” >Get server time
<?php echo date(‘l dS \of F Y h:i:s A’); ?>





Функционирующий пример можно посмотреть нажав сюда (скачать пример).

Согласитесь, немного непохоже на привычный Ajax — я бы сказал нет атрибутов этого метода. Сейчас исправим:
document.getElementById(id).innerHTML = ‘’;


Как только отправлен запрос, появляется картинка, и изчезает только после получения данных с сервера.
if(req.readyState == 4)
{
document.getElementById(id).innerHTML = req.responseText;
}
else
{
document.getElementById(id).innerHTML = ‘’;
}


Пример после изменений можно посмотреть нажав сюда (скачать пример).

В качестве десерта:
FROST framework project
mAJAX FAQ

Подробности, дополнения и необходимую документацию можно найти на странице с оригиналом статьи (которую я и перевёл) по этому адресу.

Кросс-пост из моего блога.