AJAX (Asynchronous JavaScript adnd XML — асинхронный JavaScript и XML) — способ получения интерактивной html страницы.
Смысл технологии в седующем. Большинство web страниц в браузере статичны. Но часто админы сайтов привносят динамику на свои страницы — DHTML. Что это дает? Возможность описать поведение браузера и какие-то изменения на странице с помощью клиентского языка программирования.
Т.е. программа, написанная так на JavaScript, будет работать не на сервере, а в браузере пользователя. И в браузере вы сможете увидеть динамически раскрывающееся меню и др. фишки.
Но по сути все эти JavaScript статичны. JavaScript может оперировать только теми данными, которые он получил в момент загрузки страницы. Но был предложен другой способ: возможность с помощью javaScript догружать какие-то данные на страницу после того, как она загрузилась. Т.е. мы что-то сделали на странице, javaScript сам снова обратился к серверу и изменил страницу. И тогда на странице появится то, чего не было на момент загрузки. И это дает широкий простор для маневров (например, почта gmail, приходит извещение о приходе нового письма без перезагрузки стрницы).
Содержание статьи
История разработки Ajax
История разработки Ajax начинается с 1998г. Тогда компания Microsoft для своих нужд разработала Microsoft Remote Scripting. Это технология дозагрузки с помощью клиентского скрипта данных сервера (о чем написано выше в статье). Т.е. удаленное взаимодейтсвие скрипта и удаленного сервера.
Но эта технология не пошла, т.к. параллельно с ней были другие технологии, связанные с апплетами JAVA. И многие в 1998г. надеялись на развитие JAVA апплетов, т.е. что эту операцию будет делать JAVA апплет.
В 2000г. Microsoft готовилась к выпуску своего ofiice 2000, а там продукт — Outlook Web Access. Это интерактивная почта, чтобы пользователь мог работать в браузере. А для этого нужен постоянный обмен данными с сервером.
Параллельно Microsoft в 1999г. разрабатывает MSXML — парсер операционной системы. И в него внедряют объект, который расширяет его функциональность. По сути, это был мини-браузер, доступный скрипту. Этот объект умел отправлять запрос на сервер и получать ответ сервера в виде XML.
В 2005г. появилась статья Д.Д. Гаррета, где он пишет, что любые данные можно гонять между сервером и браузером. Что можно строить целые интерактивные приложения. Впервые он применил термин “AJAX”. AJAX — это набор серверных техник, которые дают много возможностей:
- Стандартные уровни презентаций, т.е. отображение страниц с помощью xml, css, xhtml.
- Взаимодействие со страницами с помощью DOM модели.
- Обмен данными, используя XML и XSLT, между сервером и браузером.
- Асинхронная загрузка данных с помощью объекта компании Microsoft — XmlHttpRequest.
- И javaScript, который связывает все это воедино.
И данную технологию c 2005г. активно начинает использовать Google (Gmail, Google Maps, AdWords, Google Analytics).
Реализация Ajax взаимодействия
Для реализации применяются несколько механизмов:
- Создание дочерних фреймов. С помощью javaScript создают элемент и помещают его на страницу. Програмно делают iframe. А его свойству “src” назначают url с данными. Iframe его загружает и просто програмно прочитывает. И тогда страница по мере надобности закачает данные с сервера.
- Создание элемента “script”. Делают тег-скрипт. Как только его добавят на страницу, он сразу выполнится. В коде можно просто написать скрипт src и ссылку на сервер. И сервер в формате javaScript присылает данные в виде массива.
- Объект XMLHttpRequest – самый удачный, реализованный Microsoft (его описание см. выше). На сегодня он входит в состав DOM модели браузера, и все современные браузеры его поддерживают.
Смысл работы: работает скрипт, он создает объект, который обменивается данными с сервером. В целях безопасности обмен происходит только с тем сервером, с которого загружен скрипт. Скрипт обрабатывает полученнные с сервера данные и меняет открытую в браузере страницу (в соответствии с этими данными).
Объект XmlHttpRequest
Объект имеет свойства:
- onreadystatechange.
- readyState — показывает, что сейчас делает объект, в каком состоянии он находится. У свойства 5 состояний (0-4), которые характеризуют его: 0 — ничего не делает, не инициализирован, 1- начало взаимодействия с сервером, 2 — серверу все отдано, 3 — сервер начал передавать данные, 4 — данные с сервера полностью получены.
- responseText — данные, полученные с сервера в виде текста — строки.
- responseXML – DOM документ ответа сервера. Здесь сервер посылает данные в виде XML, по которому строится DOM модель.
- status – статус ответа сервера.
- statusText – расшифровка статуса сервера.
Объект имеет методы:
- abort () — прекратить операцию.
- open () — готовит объект для работы с сервером.
- send () — выполняет посыл данных на сервер.
- getAllResponseHeaders () — все заголовки ответа сервера.
- ResponseHeader () — читает заголовок ответа.
- setRequestHeader () — дополнительно передать заголовки протокола HTTP на сервер.
Создание объекта XmlHttpRequest
Создается данный объект по-разному.
- Ранние версии IE.
var req = new ActiveXObject("Microsoft.XMLHTTP");
- IE 6 и ниже.
var req=new ActiveXObject("Msxml2.XMLHTTP");
- Firefox, IE7, Opera, Ghrome.
var req=new XMLHttpRequest();
- Универсальное создание объекта, без привязки к старым и новым браузерам:
function getXmlHttp(){ var xmlhttp; try{ xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }catch(E){ xmlhttp =false; } } if(!xmlhttp && typeof XMLHttpRequest!='undefined'){ xmlhttp = new XMLHttpRequest(); } return xmlhttp; }
Использование XMLHTTPRequest
- Синхронный XMLHttpRequest.
//Адрес страницы var url=location.href; //объект XMLHttpRequest var request = getXmlHttpRequest() //Запрос на сервер request.open('GET', url, false); request.send(null); //Чтение ответа if(request.status == 200) { alert(request.responseText); }
- Асинхронный XMLHttpRequest.
//сам объект var req = getXmlHttp() //запрос на сервер req.open('GET', url, true); //установка обработчика req.onreadystatechange = function(){ if (xmlhttp.readyState == 4) { //состояние "данные получены" if(xmlhttp.status == 200) { alert(req.responseText); //ответ } } }; req.send(null);
Не рекомендую использовать синхронные запросы, т.к. они ожидают ответ сервера до продолжения работы скрипта. Т.е. пока мы ждем ответ сервера, наш скрипт не выполняется, и браузер ничего не делает, ждет ответ сервера. И если связь медлееная, или сервер в дауне, то зависание может быть надолго.
При асинхронном запросе мы послали запрос на сервер и не ждем ответа, т.е. скрипт выполняется, не получив данные с сервера. Рекомендую использовать данный тип запросов.