AJAX

Когда существующих возможностей делаться недостаточно, но совершенствовать существующее еще некуда, в то время а также происходит технологический прорыв. Таким прорывом а также существует AJAX (Asynchronous JavaScript and XML) - подход к построению пользовательских интерфейсов веб-приложений, при котором web-страница, никак не перезагружаясь, сама догружает нужные пользователю данные. AJAX - один из составляющих концепции DHTML.

Что же преподносит нам эта процесс создания. В настоящее время разработка WEB приложений стремится к разграничению клиентской элементы а также серверной, этим а также обуславливается повсеместное использование шаблонов, таких как будто Smarty а также XSLT. Немедленно проекты делаются сложнее, а также переплетать посреди собой различные процесса создания делаться непомерно дорого ради времени разработчика. Таким образом, в частности, все стили форматирования выносятся в CSS или в XSL файлы, HTML или XML данные находятся в иных разделах, серверные обработчики в третьих, базы данных в четвертых. А также в случае если уже 5-6 лет обратно примерно всюду дозволено было наблюдать переплетение всего сего в одном файле, в таком случае в данные момент это все чаще делаться редкостью.

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

Возникает необходимость в разграничении работы. Таким образом, в частности, дизайнер станет действовать свою работу, верстальщик свою, программист свою, а также при этом ни один человек приятель другу препятствовать далеко не станет. В итоге каждому участнику проекта очень станет ведать всего лишь те данные, вместе с которыми ему придется трудиться. В таком случае производительность группы а также оригинальное качество проекта повышается в разы. В настоящее время эта проблема вместе с успехом решается путем приминения шаблонов, однако это также образует определенные проблемы, этак как будто дабы, скажем, подключить Smarty, должен быть подключить программный модуль обработки шаблонов, а также четко связать с структурой проекта. Однако это в отдалении никак не всегда вероятно а также требует определенных затрат. Немного проще при использовании связки XML + XSL, таким образом как будто они предоставляют значительно больше возможностей, однако это альтернатива, никак не сильнее. Но что сейчас в случае взглянуть в сторону чего-так радикально нового, что именно позволяло бы соединить все лучше, используя возможности того, что сейчас существует? Попробуйте показать JavaScript, какой обладает всем возможностями PHP или Perl, включая работу вместе с графикой а также базами данных, кой имеет значительно больше удобную расширяемость а также практичность, а также к тому же кросс-платформен.

Так что сейчас же такое AJAX? Впервые об Ajax заговорили затем появления в феврале 2005-го года статьи Джесси Джеймса Гарретта (Jesse James Garrett) "Новый подход к веб-приложениям". Ajax - это далеко не самостоятельная процесс создания. Это вариант, которая базируется на двух основных принципах.

Использование DHTML ради динамичного изменения содержания страницы.

Использование XMLHttpRequest ради обращения к серверу "на лету".

Использование этих двух подходов разрешает создавать намного больше удобные WEB-интерфейсы пользователя на тех страницах сайтов, в каком месте должен быть активное взаимодействие вместе с пользователем. Использование Ajax стало наиболее популярно впоследствии того, как будто фирма Google начала активно приминять его при создании собственных сайтов, таких как будто Gmail, Google maps а также Google suggest. Создание этих сайтов подтвердило эффективность приминения данного подхода.

Итак конкретнее: при условии если взять классическую модель WEB-приложения:

Клиент, набирая в строке поиска адрес интересующего его ресурса, попадая на сервер, мастерит к нему запрос. Сервер производит вычисления в соответствии вместе с запросом, обращается к базе данных а также этак далее, потом чего полученные данные идут клиенту а также, в случае необходимости подставляются в шаблоны а также обрабатываются браузером. Результатом является страница, которую все мы наблюдаем, а также которую 80% аборигенов страны находящейся в WEB называют Интернетом. Это классическая модель, которая успела себя зарекомендовать а также заслужить себе почетное местечко почти под солнцем. Это самая простая модель взаимодействия а также, как будто последствие, самая распространенная. Однако ее все чаще делаться недостаточно. Представьте себе, on-line игру "Морской бой", в которую играют 2 закоренелых друга - житель ЮАР а также житель Японии. Как вместе с помощью подобный виды сваять их игру максимально приятной? В любом случае данные потопленных кораблей будут хранится на сервере, а также что именно бы проверить далеко не походил ли оппонент, должен быть станет любой момент обновлять страницу а также подгущать устаревшие данные. "Но ведь люди придумали кэширование" - скажете вы а также будете полно правы, однако легче от сего далеко не делаться. Кэширование всего как только ускорит время взаимодействия вместе с сервером, только никак не избавит от необходимости перезагружать страницу. Как вариация дозволено определить определенное время самообновления, а а также в этом случае страница станет перезагружаться совсем.

Теперь посмотрим на модель взаимодействия AJAX:

Последовательность действий клиента сохраняется а также он, скорее всего далеко не поймет того, что именно станет происходить, только выражение AJAX станет ассоциироваться лишь вместе с названием футбольного клуба. Но на стороне сервера все выглядит по-иному.

При обращении к серверу, генерируется страница, которая станет отображаться пользователю, а также советовать ему совершить интересующую его последовательность действий. При сознательном (хотя а также отнюдь не непременно) выборе клиента, его запрос станет обращаться к AJAX модулю, какой а также станет производить все интересующие его вычисления а также работу вместе с сервером как будто таковым. Но в чем же новшество? Основное отличие в том что именно оныйа#но метод преподносит нам возможность динамически обращаться к серверу а также выполнять интересующие нас действия. Например, нам нужно выполнить обращение к базе данных а также обрести интересующие нас данные какие следом будем приминять. Данные все мы будем беречь в XML файле кой станет формироваться динамически, таким образом:

Создаем новый объект JavaScript:
var req = new ActiveXObject("Microsoft.XMLHTTP"); (ради IE)
var req = new XMLHttpRequest(); (Ради всего остального)

Затем пишем функцию использующий данныйа#однако объект
var req;

function loadXMLDoc(url)
// branch for native XMLHttpRequest object
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
// branch for IE/Windows ActiveX version

req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
// branch for IE/Windows ActiveX version
else if (window.ActiveXObject)
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send();

req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send();

}
}

Теле HTML файла пишем скрипт, кой станет:
function checkName(input, response)

if (response != ''){
// Response mode
message = document.getElementById('nameCheckFailed');
if (response == '1'){
message.className = 'error';

// Response mode
message = document.getElementById('nameCheckFailed');
if (response == '1'){
message.className = 'error';

message.className = 'error';
else
message.className = 'hidden';

}else
// Input mode
url = 'http://localhost/xml/checkUserName.php?q=' \\
+ input;
loadXMLDoc(url);

}

В файле localhost/xml/checkUserName.php все мы обрабатываем данные, полученные из командной строки в данном случае в переменной q. Но итог сохраняем в XML структуре, которую храним в этом же файле. Этак все мы можем принять а также обработать данные, полученные из БД, или что сейчас-нибудь другое необходимое нам. К тому же сервер станет обрабатывать лишь только те данные, какие нам должен быть обновить, но далеко не всю страницу в случае ее перезагрузки.

Теперь вернемся к двум друзьям - любителям морского боя: вследствие появления данного новшества, все мы можем сваять следующее: определить проверку в течении каждых трех секунд XML файла данная проверка подразумевает почти под собой проверку базы данных на предмет новой записи, в таком случае существует - сделанного оппонентом хода. При условии если шествие был сделан, страница но без перезагрузки топит корабли, тем самым, портя расположение духа участникам водных битв. Данная функциональность достигается элементарным использованием Javascript а также таблиц стилей. Текущийа#Но пример очень наглядный, однако вдали никак не глубокий, применение этой процесса создания значительно существенней.

Однако никак не все таким образом просто. Давайте нынче рассмотрим отрицательные черты.

Во-первых - все мы можем передавать данные лишь методом GET, конечно внушительные объемы данных придется оставить в покое. Данная проблема уж далеко не момент поднималась в различных источниках, а господа, существует ведь Сookies, какие вполне приемлемы в случаях передачи внушительных данных, чем вероятно вместить в себя GET запрос, однако Javascript в свою очередь имеет функции ради работы вместе с ними.

Вторая проблема - кросс-браузерность. Объект XMLHttpRequest снова никак не является частью какого-или стандарта (хотя нечто подобное еще было предложено в спецификации W3C DOM Level 3 Load and Save). Поэтому существует 2-ва отличных приятель от друга метода вызова сего объекта в коде скрипта. В Internet Explorer объект ActiveX вызывается этак:
var req = new ActiveXObject("Microsoft.XMLHTTP");

В Mozilla а также Safari это делается проще (этак как будто затем это объект, встроенный в JavaScript):
var req = new XMLHttpRequest();

Все продвинутые браузеры поддерживают настоящий объект а также проблемы возникнут всего лишь около 1,8% пользователей (в соответствии данными статистики фирмы SpyLog), какие пользуются очень старыми версиями браузеров, далеко не поддерживающими настоящийа#только объект.

И, наконец-то, защищенность. На этом остановимся поподробнее. Основная проблема заключается в том, что сейчас все данные а также исходный код JavaScript функций дозволено наблюдать путем просмотра исходного кода страницы, конечно злоумышленник вероятно проследить логику выполнения запросов а также при определенном стечении обстоятельств выполнить надобный ему набор команд. Это никак не играет особой роли, в какое время около нас шагает простое сопоставление данных, а что именно действовать в больше сложных ситуациях, в частности при авторизации, а также как будто в таком случае передавать пароли. Как еще было сказано выше, на поддержка приходят Cookies. Необходимые данные дозволено пересылать вместе с их помощью, таким образом же их а также обрабатывать. Возьмем пример, в котором пользователь станет проходить аутентификацию вместе с помощью процесса создания которой посвящена статья.

Генерации страницы, все мы формируем неповторимые значения, какие следом помещаем в переменные сервера. А также в Cookies браузера, дальше при авторизации все мы получаем название пользователя а также его пароль, какие нам должен быть передать модулю обработки на сервере.

После того как будто пользователь ввел данные а также нажал кнопку Submit его пароль заноситься в Cookies, однако название пользователя передается открыто - ссылкой в частности http://www.mubestajax.com/ajax.php?login=pupkin при получении данных сервер, в первую очередь проводит сверку полученных данных. Таким образом как будто значения какие все мы генерировали вместе с начала работы сервера но далее передавали их глобальным переменным сервера а также cookies имеете право совпадать, так при проверке целостности переданных данных в случае несовпадения программа перестает трудиться. В случае же все прошло неплохо, в таком случае извлекаются все важные данные а также проводятся важные вычисления а также работы. Этакий средство охраны очень прост а также эффективен. Но с целью внушительных проектов он отнюдь не подойдет.

Когда на главный проект выходит безопасность, лучше приминять не менее сложные а также надежные решения. Но в большинстве случаев данных мер предосторожности станет больше чем очень, таким образом как будто использование сильнее сложных модулей влечет за собой использование технологий какие никак не всегда входят в состав стандартного программного обеспечения новых серверов, основная грань которых - простота. Поэтому согласно этому такие процесса создания как будто MySQL а также PHP получили очень широкое распространение, т.к. они обеспечивают простоту работы при своей совсем небольшой ресурсоемкости а также достаточной прочности. Только к рамках данного программного обеспечения как будто воспрещено лучше подойдет решение предложенное выше.

В заключении хотелось бы произнести, что именно AJAX вместе с одной стороны - огромный скачок в WEB инженерии, однако вместе с иной стороны это давненько назревавший уровень эволюции, какой открыл новые горизонты в области разработки программного обеспечения. В также время эта процесс создания снова достаточно "сыра" этак как будто ее использование на настоящий момент скорее приятное исключение. Но я уверен, что сейчас об ней снова отнюдь не момент все услышат.