Принцип работы. Что такое AJAX? Пример реализации. Что такое AJAX и чем он полезен

Программы

Знаете ли Вы, что такое мысленный эксперимент, gedanken experiment?
Это несуществующая практика, потусторонний опыт, воображение того, чего нет на самом деле. Мысленные эксперименты подобны снам наяву. Они рождают чудовищ. В отличие от физического эксперимента, который является опытной проверкой гипотез, "мысленный эксперимент" фокуснически подменяет экспериментальную проверку желаемыми, не проверенными на практике выводами, манипулируя логикообразными построениями, реально нарушающими саму логику путем использования недоказанных посылок в качестве доказанных, то есть путем подмены. Таким образом, основной задачей заявителей "мысленных экспериментов" является обман слушателя или читателя путем замены настоящего физического эксперимента его "куклой" - фиктивными рассуждениями под честное слово без самой физической проверки.
Заполнение физики воображаемыми, "мысленными экспериментами" привело к возникновению абсурдной сюрреалистической, спутанно-запутанной картины мира. Настоящий исследователь должен отличать такие "фантики" от настоящих ценностей.

Релятивисты и позитивисты утверждают, что "мысленный эксперимент" весьма полезный интрумент для проверки теорий (также возникающих в нашем уме) на непротиворечивость. В этом они обманывают людей, так как любая проверка может осуществляться только независимым от объекта проверки источником. Сам заявитель гипотезы не может быть проверкой своего же заявления, так как причина самого этого заявления есть отсутствие видимых для заявителя противоречий в заявлении.

Это мы видим на примере СТО и ОТО, превратившихся в своеобразный вид религии, управляющей наукой и общественным мнением. Никакое количество фактов, противоречащих им, не может преодолеть формулу Эйнштейна: "Если факт не соответствует теории - измените факт" (В другом варианте " - Факт не соответствует теории? - Тем хуже для факта").

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

Эксперимент на то и эксперимент, что он есть не изощрение мысли, а проверка мысли. Непротиворечивая внутри себя мысль не может сама себя проверить. Это доказано Куртом Гёделем.


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

Впервые об AJAX я услышал весной этого года. Сразу заинтересовался этой технологией, и, как и положено в таких случаях, отправился в поиск за статьями, которые смогли бы ответить на возникшие у меня вопросы: "Что это такое? Как это работает? И в чем преимущества? Что нужно дополнительно установить на сервер/клиент для работы с AJAX? Как это можно использовать на своем сайте?". Прочтя с десяток статей, я получил ответ лишь на первые два вопроса, но на остальные ответа так нигде не нашел. И лишь после прочтения нескольких публикаций на английском языке я окончательно понял, что к чему. Это и подвигло меня к написанию данного материала.

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

По ходу изложения под термином "браузер" мы будем понимать браузеры: Internet Explorer 5.0+, Safari 1.3 и 2.0+, Netscape 7+, Opera 8.5+, Mozilla Firefox (плюс означает данную версию и более новые). Если речь станет заходить о других версиях, об этом будет упоминаться отдельно."Что это такое? Как это работает и в чем преимущества?"

Для того чтобы понимать, какие преимущества дает AJAX, нужно знать, как работают веб-приложения в настоящее время. А работают они по клиент-серверной технологии (рис. 1).

Пользователь в браузере открывает какую-либо страницу page . На странице есть гиперссылки, которые ведут на другие страницы. При нажатии на любую из них браузер посылает запрос URL на сервер, с которым связана эта ссылка. Если в природе не существует сервера, связанного с этой ссылкой (например, когда, набирая URL в адресной строке, вы ошиблись при написании имени ресурса), или имеются проблемы связи с интернетом, то браузер сгенерирует страницу, подобную показанной на картинке (так она выглядит в Operа-е):

В случае существования сервера, но отсутствии на нем документа, указанного в запросе сервер сам создаст HTML страницу с описанием ошибки. Например, это может быть всем известная 404-ая ошибка (документ не найден). Или, если все верно, в ответ сервер отдаст новую страницу. В любом случае, в браузер будет загружена новая страница new_page, даже если по сравнению со старой на ней изменилась лишь пара слов. Довольно существенный минус данной технологии. Кроме того, работа ведется в синхронном режиме. То есть после того как браузер отослал на сервер запрос он ожидает от него ответ, и пока ответ не получен ничего предпринимать не будет. А порой ответ, и загрузка новой страницы может длиться слишком долго. Настолько долго, что пользователь может не дождаться загрузки страницы и просто закрыть её. Поэтому веб-программмисты прибегают к некоторым уловкам.

СВОЙСТВА:

readonly onreadystatechange function

Указывает функцию обратного вызова (callback function), которая будет вызываться каждый раз, когда будет изменяться readyState свойство. Несмотря на то, что вызывается функция, параметры передать в нее не получиться. Но об этом чуть позже в примере.

readonly readyState integer

Состояние запроса. Может принимать значения:
  • 0 - не неинициализированный (uninitialized), метод open() еще не был вызван;
  • еще не вызван;
  • 2 - загружен (loaded), метод send() был вызван и ответные заголовки/статус (свойство status ) получены;
  • 3 - интерактивный (interactive), идет прием данных, которые доступны через свойство responseText ;
  • 4 - завершенный (completed), в ответ на запрос получены не только все заголовки и статус, но и приняты все данные от сервера, ответ завершен.

readonly responseText string

Ответ сервера в виде обыкновенного текста. Только чтение.

readonly responseXML object

Ответ сервера в виде объекта DOM Document. Используется, если ответ сервера является корректным XML документом. Если документ не корректный, данные не получены или еще не оправлены, то свойство равно NULL. Только чтение.

readonly status string

Статус ответа. Например: 200 (ОК), 404 (документ не найден), 503 (временная перегрузка сервера).

МЕТОДЫ:

void abort()

Прерывает HTTP запрос или получение данных. Очищает все свойства объекта, которым присваиваются начальные значения. Метод полезен в связке с таймером, когда по прошествии определенного времени с момента запроса (вылете в тайм-аут) ответ от сервера так и не был получен.

string getAllResponseHeaders()

Возвращает все заголовки ответа сервера в виде отформатированной строки. Каждый новый заголовок начинается с новой строки.

string getResponseHeader (string header)

Вернуть заголовок с именем header.

void open (string method, string uri, [boolean asynch])

Подготавливает запрос по адресу uri методом method (POST или GET) с указанием режима asynch, асинхронный режим или нет. В результате вызова свойство readyState становиться равным 1.

void send (string data)

Инициирует запрос к серверу. В запросе передаются данные data.

void setHeader (string header, string value)

Присваивает заголовку с именем header, значение value. Перед началом использования этого метода не забудьте вызвать open() !
"Как это можно использовать на своем сайте?"

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

Итак, у нас задача: нужно реализовать базу данных (БД) драйверов для различных устройств. При этом БД настолько большая, что нет смысла пересылать её приложению-клиенту и делать выборку из неё посредством JavaScript. Из-за изменения одного значения на странице перегружать её тоже нежелательно. Лично я для реализации данной задачи применяю для серверных скриптов PHP, а реализации БД применяю XML файл.

Структуру БД выбираю следующую:

Листинг БД файл data.xml : ATI 9600 128 DDR (128bit) ATI 9600 256 DDR (128bit) ATI 9600XT 256 DDR (128bit) ATI X800GTO 256 DDR (256 bit) ATI X1300 512 DDR(128bit) ATI X1300 256 DDR (128bit) NVidia 6600 128 DDR (128bit) NVidia 7800GS 256 DDR (256 bit) ATI X1300Pro 256 DDR (128bit) ATI X1600Pro 256 DDR (128bit) ATI X1800GTO 256 DDR (256bit) ATI X1600Pro 256 DDR (128bit) ATI X1900XT 512 DDR (256bit) NVidia 6600 Silencer 128 DDR (128bit) NVidia 6600GT 128 DDR (128bit) ATI X1900XT 512 DDR (256bit) ATI X1900XTX 512 DDR (256bit) ATI X800 SilentPipe 128 DDR(256bit) Nvidia 6600GT 128 DDR (128bit) NVidia 6600GT PassiveHeatsink 128 DDR (128bit) PCI-E ATI X550 128 DDR (128bit) PCI-E ATI X800GT Uniwise 256 DDR (256 bit) ATI X800GTO 256 DDR (128bit) Audigy 2 6.1 Audigy 2 ZS 7.1 X-Fi Platinum Audiophile 192 Revolution 5.1 Audiophile Audiophile Fast Track PIXMA iP 90 PIXMA iP4200 PIXMA iP6600D Picture Mate 100 Stylus Color C48 Stylus Color C87U DeskJet 1280 DeskJet 5443 Photo Smart 385 Laser Shot LBP2900 Laser Shot LBP3300 ML 1615 ML 2015 LaserJet 1018 LaserJet 2420 LaserJet 2420DN 4200F LiDE500F LiDE60 Perfection 1270 Perfection 3590 Perfection 4990 Bear Paw 2400CU Perfection 4990

Как в этой БД человек ведет поиск? Скорее всего, он от корневого элемента шел бы по дереву документа до тех пока в нужной ветви не нашел ссылку или убедился, что драйвера для данного устройства нет в базе. Также поступим и мы, используя для нахождения нужного узла или набора узлов выражения языка XPath .

Листинг формы для отправки данных index.htm :

видео картазвуковая картапринтерсканер

В форме есть две переменные: path и flag . В первой хранится запрашиваемый путь, который отправляется на сервер. Так как один элемент в форме уже есть, то у этой переменной уже есть начальное значение. Вторая переменная служит для того, чтобы указать серверному скрипту, что из документа нужно извлечь определенный элемент Device . Кроме того, формат возвращаемых данных с сервера изменится.

Теперь рассмотрим JS-движок. Все функции клиентской части собраны в скрипте ajax.js : y = new Object(); function httpRequest() { if (window.XMLHttpRequest) { //создание объекта для всех браузеров кроме IE requestObj = new XMLHttpRequest(); } else if (window.ActiveXObject) { //для IE requestObj = new ActiveXObject("Msxml2.XMLHTTP"); if (!requestObj) { requestObj = new ActiveXObject("Microsoft.XMLHTTP"); }; }; }; function sendRequest (url,data) { httpRequest(); //определяем call-back функцию requestObj.onreadystatechange = responseServer; //подготовка отправки данных, readyState=1 requestObj.open("POST",url,true); /* Т.к. данные отправляются POST методом, то необходимо серверу отослать заголовок информирующий его об этом */ requestObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"); //отправка данных на сервер requestObj.send(data); }; function responseServer() { if (requestObj.readyState == 4) { var status = requestObj.status; if (status == 200) { addSelect(y); } else if (status == 400) { alert("Неправильный запрос"); } else if (status == 500) { alert("Внутреняя ошибка на сервере"); } else if (status == 503) { var time = requestObj.getResponseHeader("Retry-After")*1000; alert("Сервер перегружен. Запрос будет повторен через: "+time+" секунд"); setTimeout(sendRequest(url,path),time); } else { alert("Ошибочный ответ сервера"); }; }; }; function sendData(obj) { var Elpath = document.form.path; var url = "index.php"; if (document.form.flag.value == "0") { var path = Elpath.value + "/" + obj.value; } else { var path = Elpath.value + "/Device["" + obj.value + ""]"; /* методом GET отправляем серверному скрипту информация о том что необходим конкретный элемент Device */ url = "index.php?flag=1"; }; //присваиваем переменной формы path значение текущего запроса Elpath.value = path; //кодируем передаваемую строку path path = "path="+encodeURIComponent(path); y = obj; sendRequest (url,path); }; function addSelect(obj) { //ответ сервера в виде обычного текста var docTEXT = requestObj.responseText; obj.setAttribute("disabled",true); //создаем элемент div var div = document.createElement("div"); //добавляем ответ сервера в div div.innerHTML = docTEXT; //добавляем div с ответом сервера в дерево документа document.form.appendChild(div); }; function reset() { document.form.path.value="//Devices"; document.form.flag.value="0"; var NodeListDiv = document.form.getElementsByTagName("div"); var length = NodeListDiv.length; if (length > 1) { while (NodeListDiv != undefined) { document.form.removeChild(NodeListDiv); }; }; document.form.Devices.removeAttribute("disabled"); };

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

А теперь разберем по шагам работу движка.

При наступлении события onblur (элемент select потерял фокус) вызывается функция sendData(), которая и подготавливает POST данные для оправки запроса. Кроме того, она формирует XPath выражение в зависимости от значения переменной flag=0 (например, //Devices/VideoCards ) или flag=1 (например, //Devices/VideoCards/AGP/Sapphire/Device["ATI 9600XT 256 DDR (128bit)"] ).

Далее вызываем функцию sendRequest(), в которую передаем URL серверного скрипта, а также переменную типа строка, в которой содержатся готовые POST-данные. И первым делом создаем XMLHttpRequest объект, ссылку на который храним в переменной requestObj . Функция httpRequest() является кросс-браузерной, и будет работать во всех браузерах.

Когда-то обращение к функции httpRequest() я делал сразу при загрузке страницы через и больше не создавал XMLHttpRequest объект. Но как оказалось, это работает для всех браузеров кроме IE, который каждый раз требует создавать новый объект. Поэтому вызов данной функции делается каждый раз перед отправкой данных.

После отправки данных браузер ждет ответа с сервера. При каждом изменении свойства readyState будет вызываться функция responseServer() . Если статус ответа пришел с кодом "200" (все нормально), то будет вызвана функция addSelect(), которая и добавит полученный данные в DOM текущего документа. Все браузеры будут ждать ответа от сервера. Однако по истечении некоторого времени (time-out) принудительно назначат XMLHttpRequest.readyState = 4 и перестанут ожидать ответа с сервера. Например, для Opera значение тайм-аута составляет 10 секунд. Используя другие статусы, можно добавить в движок обработчик ошибок в ответах сервера.

Функция addSelect() добавляет в DOM текущего документа еще один узел DIV, в который и помещает ответ с сервера. Может возникнуть вопрос, почему используется свойство responseText , а не responseXML ? У кого-то обязательно возникнет желание, используя это свойство, импортировать ответ сервера (а серверный скрипт в ответ присылает XML документ) прямо в DOM документа. Возникло такое желание и у меня. Я хотел импортировать корневой элемент присланного XML файла и все его потомки методом importNode . Но браузер импортировал элемент без потомков, даже несмотря на то, что второй параметр данного метода был установлен в true : importNode(Object importedNode,true) . Поэтому не точная реализация этого метода пока исключает его использование.

Равнозначное решение было найдено, используя innerHTML метод элемента.

На этом работа клиентской части заканчивается. Оставшаяся нерассмотренной функция reset() призвана вернуть DOM документа к начальному виду. Достичь того же можно, обновив страницу по F5, но AJAX-движок как раз и пишется для того, чтобы избежать перезагрузки страницы. Поэтому все элементы, добавленные в документ скриптом, должны быть удалены из него также скриптом.

В ответ на запрос серверный скрипт формирует XML данные вида: childrenElementName_1 .... childrenElementName_1

Если запрашиваемый узел имеет имя Device , то возвращается обычный отформатированный текст. Серверный скрипт написан на PHP V5 и не будет работать на более ранних версиях этого интерпретатора, так как расширение для работы с DOM было введено в этот язык только с пятой версии, и заменило собой расширение DOM XML, интерфейс которого не соответствовал спецификации. А теперь посмотрим на код серверного скрипта.

Листинг файла index.php : load("data.xml"); //создаем объект XPath $DOMXPath = new DOMXPath($doc); $DOMNodeList = $DOMXPath -> query($_POST); //согласно запросу извлекаем нужный элемент $DOMNode = $DOMNodeList -> item(0); //создаем объект XML-документ $replyXML = new DOMDocument("1.0", "windows-1251"); /* если flag не равен единице, значит текущий элемент не является элементом Device и необходимо найти все элементы-потомки текущего элемента DOMNode */ if ($_GET != 1) { //получаем список все потомков элемента $childNodes = $DOMNode -> childNodes; /* Поскольку потомки могут быть не только элементы, но и узлы, то создаем индексный массив который содержит только элементы-потомки */ foreach ($childNodes as $Node) { if ($Node->nodeType == 1) { $arrayNodes = $Node; }; }; //создаем корневой элемент XML-документа $root = $replyXML->createElement("select"); $optgroup = $replyXML->createElement("optgroup"); /* если элементы-потомки не являются Device, то задаем атрибуты для корневого элемента и его элемента-потомка optgroup */ if ($arrayNodes -> nodeName != "Device") { $root->setAttribute("name",$DOMNode->nodeName); $AttributeNode = $arrayNodes->getAttributeNode("title"); $optgroup->setAttribute("label",$AttributeNode->value); $root->setAttribute("onblur","sendData(this)"); } else { /* в противном случае создаем атрибут с JS кодом который и присвоит переменной в форме flag значение "1" */ $root->setAttribute("onblur", "document.form.flag.value=1;sendData(this);"); }; /* цикл создающий для каждого элемента-потомка новые элементы option; сколько потомков, столько и элементов */ foreach ($arrayNodes as $Node) { $option = $replyXML->createElement("option"); $setNode = $Node->nodeName; if ($Node->nodeName == "Device") { $setNode = $Node->nodeValue; }; $option-> nodeValue = $setNode; $option->setAttribute("value",$setNode); $optgroup->appendChild($option); }; //вставляем в XML-документ получившиеся элементы $replyXML->appendChild($root); $root->appendChild($optgroup); /* если flag=1, то значит текущий элемент является Device элементом; элементы-потомки не нужны, а нужны атрибуты текущего элемента */ } else { //создаем корневой элемент $root = $replyXML->createElement("pre"); $DOMText = new DOMText(" OS URL"); $root -> appendChild($DOMText); $NamedNodeMapAttr = $DOMNode->attributes; $i = 0; /* цикл который находит все атрибуты элемента Device и для каждого атрибута создает строку с данными содержание ссылку */ while (($NodeAttr = $NamedNodeMapAttr->item($i)) != null) { if ($NodeAttr->name != "id") { $DOMText = new DOMText(" $NodeAttr->name "); $DOMElement = $replyXML->createElement("a"); $DOMElement -> setAttribute("href",$NodeAttr->value); $DOMElement -> nodeValue = $NodeAttr->value; $root -> appendChild($DOMText); $root -> appendChild($DOMElement); }; $i++; $NodeAttr = $NamedNodeMapAttr->item($i); }; $replyXML->appendChild($root); }; //отсылаем ответ клиенту echo $replyXML->saveHTML(); ?>

Сейчас в сети Интернет наблюдается очень активное развитие (и даже использование) новых технологий. Одна из таких технологий — AJAX.

Что такое AJAX?

AJAX — это аббревиатура, которая означает Asynchronous Javascript and XML. На самом деле, AJAX не является новой технологией, так как и Javascript, и XML существуют уже довольно продолжительное время, а AJAX — это синтез обозначенных технологий. AJAX чаще всего ассоцириуется с термином Web 2.0 и преподносится как новейшее Web-приложение.

При использовании AJAX нет необходимости обновлять каждый раз всю страницу, так как обновляется только ее конкретная часть. Это намного удобнее, так как не приходится долго ждать, и экономичнее, так как не все обладают безлимитным интернетом. Правда в этом случае, разработчику необходимо следить, чтобы пользователь был в курсе того, что происходит на странице. Это можно реализовать с использованием индикаторов загрузки, текстовых сообщений о том, что идёт обмен данными с сервером. Необходимо также понимать, что не все браузеры поддерживают AJAX (старые версии браузеров и текстовые браузеры). Плюс Javascript может быть отключен пользователем. Поэтому, не следует злоупотреблять использованием технологии и прибегать к альтернативным методам представления информации на Web-сайте.

Обобщим достоинства AJAX:

  • Возможность создания удобного Web-интерфейса
  • Активное взаимодействие с пользователем
  • Удобство использования

AJAX использует два метода работы с веб-страницей: изменение Web-страницы не перезагружая её, и динамическое обращение к серверу. Второе может осуществляться несколькими способами, в частности, XMLHttpRequest, о чем мы и будем говорить, и использование техники скрытого фрейма.

Обмен данными

Для того, чтобы осуществлять обмен данными, на странице должен быть создан объект XMLHttpRequest, который является своеобразным посредником между Браузером пользователя и сервером (рис. 1). С помощью XMLHttpRequest можно отправить запрос на сервер, а также получить ответ в виде различного рода данных.

Обмениваться данными с сервером можно двумя способами. Первый способ — это GET-запрос. В этом запросе вы обращаетесь к документу на сервере, передавая ему аргументы через сам URL. При этом на стороне клиента будет логично использовать функция Javascript`а escape для того, чтобы некоторые данные не прервали запрос.

Клиент часть, написанная на Javascript, должна обеспечивать необходимую функциональность для безопасного обмена с сервером и предоставлять методы для обмена данными любым из вышеперечисленных способов. Серверная часть должна обрабатывать входные данные, и на основе их генерировать новую информацию (например, работая с базой данных), и отдавать ее обратно клиенту. Например, для запроса информации с сервера можно использовать обычный GET-запрос с передачей нескольких и небольших по размеру параметров, а для обновления информации, или добавления новой информации потребуется использовать уже POST-запрос, так как он позволяет передавать большие объемы данных.

Как уже было сказано, AJAX использует асинхронную передачу данных. Это значит, что пока идёт передача данных, пользователь может совершать другие, необходимые ему действия. В это время следует оповестить пользователя о том, что идёт какой-либо обмен данными, иначе пользователь подумает, что произошло что-то не то и может покинуть сайт, или повторно вызвать «зависшую», по его мнению, функцию. Индикация во время обмена данными в приложении Web 2.0 играет очень важную роль: посетители могли еще не привыкнуть к таким способам обновления страницы.

Ответ от сервера может быть не только XML, как следует из названия технологии. Помимо XML, можно получить ответ в виде обычного текста, или же JSON (Javascript Object Notation). Если ответ был получен простым текстом, то его можно сразу вывести в контейнер на странице. При получении ответа в виде XML, обычно происходит обработка полученного XML документа на стороне клиента и преобразование данных к (X)HTML. При получении ответа в формате JSON клиент должен лишь выполнить полученный код (функция Javascript`а eval) для получения полноценного объекта Javascript. Но здесь нужно быть осторожным и учитывать тот факт, что с использованием этой технологии может быть передан вредоносный код, поэтому перед выполнением полученного с сервера кода следует его тщательно проверить и обработать. Существует такая практика, как «холостой» запрос, при котором никакой ответ от сервера не приходит, лишь изменяются данные на стороне сервера.

В разных браузерах данный объект обладает разными свойствами, но в целом он совпадает.

Методы объекта XMLHttpRequest

Заметьте, что названия методов записаны в том же стиле (Camel-style), что и другие функции Javascript. Будьте внимательны при их использовании.

abort() — отмена текущего запроса к серверу.

getAllResponseHeaders() — получить все заголовки ответа от сервера.

getResponseHeader(«имя_заголовка») — получить указаный заголовок.

open(«тип_запроса»,»URL»,»асинхронный»,» имя_пользователя»,» пароль») — инициализация запроса к серверу, указание метода запроса. Тип запроса и URL — обязательные параметры. Третий аргумент — булево значение. Обычно всегда указывается true или не указывается вообще (по умолчанию — true). Четвертый и пятый аргументы используются для аутентификации (это очень небезопасно, хранить данные об аутентификации в скрипте, так как скрипт может посмотреть любой пользователь).

send(«содержимое») — послать HTTP запрос на сервер и получить ответ.

setRequestHeader(«имя_заголовка»,»значение») — установить значения заголовка запроса.

Свойства объекта XMLHttpRequest

onreadystatechange — одно из самых главных свойств объекта XMLHttpRequest. С помощью этого свойства задаётся обработчик, который вызывается всякий раз при смене статуса объекта.

readyState — число, обозначающее статус объекта.

responseText — представление ответа сервера в виде обычного текста (строки).

responseXML — объект документа, совместимый с DOM, полученного от сервера.

status — состояние ответа от сервера.

statusText — текстовое представление состояния ответа от сервера.

Следует подробнее расммотреть свойство readyState:

  • 0 — Объект не инициализирован.
  • 1 — Объект загружает данные.
  • 2 — Объект загрузил свои данные.
  • 3 — Объек не полностью загружен, но может взаимодействовать с пользователем.
  • 4 — Объект полностью инициализирован; получен ответ от сервера.

Именно опираясь на состояние готовности объекта можно представить посетителю информацию о том, на какой стадии находится процесс обмена данными с сервером и, возможно, оповестить его об этом визуально.

Создание объекта XMLHttpRequest

Как уже говорилось выше, создание данного объекта для каждого типа браузера — уникальный процесс.

Например, для создания объекта в Gecko-совместимых браузерах, Konqueror`е и Safari, нужно использовать следующее выражение:

var Request = new XMLHttpRequest();

А для Internet Explorer`а используется следующее:

var Request = new ActiveXObject("Microsoft.XMLHTTP");

var Request = new ActiveXObject("Msxml2.XMLHTTP");

Теперь, чтобы добиться кроссбраузерности, необходимо сложить все функции в одну:

function CreateRequest() { var Request = false; if (window.XMLHttpRequest) { //Gecko-совместимые браузеры, Safari, Konqueror Request = new XMLHttpRequest(); } else if (window.ActiveXObject) { //Internet explorer try { Request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (CatchException) { Request = new ActiveXObject("Msxml2.XMLHTTP"); } } if (!Request) { alert("Невозможно создать XMLHttpRequest"); } return Request; }

После всего этого можно создавать данный объект и не беспокоится за работоспособность на популярных браузерах. Но создать объект можно в разных местах. Если создать его глобально, то в определенный момент времени возможен будет только один запрос к серверу. Можно создавать объект всякий раз, как происходит запрос к серверу (это почти полностью решит проблему).

Запрос к серверу

Алгоритм запроса к серверу выглядит так:

  • Проверка существования XMLHttpRequest.
  • Инициализация соединения с сервером.
  • Посылка запрса серверу.
  • Обработка полученных данных.

Для создания запроса к серверу мы создадим небольшую функцию, которая будет по функциональности объединять в себе функции для GET и POST запросов.

/* Функция посылки запроса к файлу на сервере r_method - тип запроса: GET или POST r_path - путь к файлу r_args - аргументы вида a=1&b=2&c=3... r_handler - функция-обработчик ответа от сервера */ function SendRequest(r_method, r_path, r_args, r_handler) { //Создаём запрос var Request = CreateRequest(); //Проверяем существование запроса еще раз if (!Request) { return; } //Назначаем пользовательский обработчик Request.onreadystatechange = function() { //Если обмен данными завершен if (Request.readyState == 4) { //Передаем управление обработчику пользователя r_handler(Request); } } //Проверяем, если требуется сделать GET-запрос if (r_method.toLowerCase() == "get" && r_args.length > 0) r_path += "?" + r_args; //Инициализируем соединение Request.open(r_method, r_path, true); if (r_method.toLowerCase() == "post") { //Если это POST-запрос //Устанавливаем заголовок Request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf-8"); //Посылаем запрос Request.send(r_args); } else { //Если это GET-запрос //Посылаем нуль-запрос Request.send(null); } }

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

function ReadFile(filename, container) { //Создаем функцию обработчик var Handler = function(Request) { document.getElementById(container).innerHTML = Request.responseText; } //Отправляем запрос SendRequest("GET",filename,"",Handler); }

Именно таким образом происходит взаимодействие с сервером.

Обработка ответа

В предыдущем примере мы сделали функцию запроса к серверу. Но она, по сути, небезопасна, так как мы не обрабатываем состояния объекта и состояния ответа от сервера.

Дополним наш код, чтобы он смог выводить визуальное оповещение о процессе загрузки.

Request.onreadystatechange = function() { //Если обмен данными завершен if (Request.readyState == 4) { //Передаем управление обработчику пользователя r_handler(Request); } else { //Оповещаем пользователя о загрузке } } ...

Как вы уже знаете, объект XMLHttpRequest позволяет узнать статус ответа от сервера. Воспользуемся этой возможностью.

Request.onreadystatechange = function() { //Если обмен данными завершен if (Request.readyState == 4) { if (Request.status == 200) { //Передаем управление обработчику пользователя r_handler(Request); } else { //Оповещаем пользователя о произошедшей ошибке } } else { //Оповещаем пользователя о загрузке } } ...

Варианты ответа от сервера

От сервера можно получить данные нескольких видов:

  1. Обычный текст

Если вы получаете обычный текст, то вы можете сразу же направить его в контейнер, то есть на вывод. При получении данных в виде XML вы должны обработать данные с помощью DOM-функций, и представить результат с помощью HTML.

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

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 игру "Морской бой", в которую играют два закоренелых друга - житель ЮАР и житель Японии. Как с помощью такой модели сделать их игру максимально приятной? В любом случае данные потопленных кораблей будут хранится на сервере, и что бы проверить не походил ли оппонент, необходим будет каждый раз обновлять страницу и подгущать устаревшие данные. "Но ведь люди придумали кэширование" - скажете вы и будете абсолютно правы, но легче от этого не становиться. Кэширование всего лишь ускорит время взаимодействия с сервером, но не избавит от необходимости перезагружать страницу. Как вариант можно поставить определенное время самообновления, но и в этом случае страница будет перезагружаться полностью.

Теперь посмотрим на модель взаимодействия 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 } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); if (req) { 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"; }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). Поэтому существует два отличных друг от друга метода вызова этого объекта в коде скрипта. В 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 инженерии, но с другой стороны это давно назревавший этап эволюции, который открыл новые горизонты в сфере разработки программного обеспечения. В тоже время эта технология еще довольно "сыра" так как ее использование на данный момент скорее приятное исключение. Но я уверен, что о ней еще не раз все услышат.

Сейчас можно наблюдать, что в интернете приобретает популярность использование и применение новых технологий. Одна их них - это AJAX. Что это такое? Какими характеристиками она обладает? Где применяется? На все эти вопросы можно будет найти ответ в рамках данной статьи.

Общая информация

Как расшифровывается AJAX? Что это значит? Данное сокращение является аббревиатурой. Она расшифровывается как Asynchronous Javascript and XML ("Асинхронный Яваскрипт и ИКСМЛ"). Часто можно увидеть или услышать информацию, что это новая технология. Но это не совсем так. Дело в том, что Javascript и XML существуют уже довольно длительное время, тогда как "Аякс" является синтезом этих технологий. Чаще всего он используется вместе с термином Web 2.0 и подразумевается как использование передовых методов разработки.

А чем особенность?

Итак, мы уже имеем общее представление о том, чем является AJAX. Что это даёт нам на практике? Почему ведутся активные разговоры о его применении? Особенность данной технологии - в том, что при её использовании не нужно обновлять всю страницу при первой же потребности. Ведь можно запросить новые данные только для её части. Это и удобно (ведь меньше времени приходится ждать), и экономично (для тех, у кого не безлимитный интернет). Правда, для информирования пользователя о происходящем обновлении желательно использовать хотя бы индикатор загрузки или текстовые сообщения, которые проинформируют про новые данные с сервера. В качестве минусов технологии часто упоминают тот факт, что она не поддерживается устаревшими и текстовыми браузерами. Да и возможность отключения технологии Javascript есть у пользователя, чем многие и пользуются. Поэтому не следует злоупотреблять AJAX. Что это может дать, если не предусмотреть альтернативные методы представления информации? В лучшем случае информация просто не будет отображена на сайте. В худшем - его внешний вид так пострадает, что пользователь на него больше не вернётся.

Преимущества "Аякса"

Данная технология предлагает два метода, по которым может быть реализована веб-страница. Первый предусматривает внесение изменений без перезагрузки. Это может быть осуществлено с помощью динамических обращений к серверу. Второй предусматривает использование отдельных технологий, наиболее популярной из которых является XMLHttpRequest. Относительно самих преимуществ "Аякса" можно сказать следующее:

  1. Можно создавать удобное веб-приложение, в котором интерфейс будет иметь целых ряд приятных для пользователя возможностей, что в итоге облегчит взаимодействие человека и сайта.
  2. Вместо полной перезагрузки страницы происходит частичная. Благодаря этому экономятся ресурсы машины и оптимизируется быстродействие.
  3. Серверная часть сайта активно взаимодействует с пользователем.
  4. Удобно использовать для реализации целого ряда задумок.

Обмен данными

Вот, допустим, нужна форма обратной связи, с помощью которой можно будет проконсультировать клиентов. Как её можно сделать? Для начала необходимо позаботится о «носителе» информации. Для этого необходимо создать объект XMLHttpRequest. Он выступает в роли посредника между сервером и браузером пользователя. С помощью этого объекта будут отправляться запросы, а также получаться ответы на них. Для непосредственного обмена данными нам нужен AJAX PHP. Этот инструментарий может быть реализован с помощью GET- или POST-запросов. В таком случае необходимые аргументы будут передаваться непосредственно через URL. Одновременно будет запущена функция, следящая за тем, чтобы передача данных не прерывалась. Но какой AJAX-запрос реализовать? Рекомендуют использовать POST. Благодаря ему можно передавать неограниченное количество данных, к которым, к тому же значительно сложней получить доступ.

Принцип работы

Как же функционирует асинхронный Javascript и XML на практике? Давайте разберёмся с этим на примере. Относительно структуры постройки необходимо позаботиться о том, чтобы клиентская часть обеспечивала весь нужный функционал для безопасного обмена данными. Она должна предоставлять необходимые методы для передачи информации выбранными способами. Серверная же часть должна обеспечивать обработку полученных данных, и, уже основываясь на них, генерировать новую информацию, чтобы в последующем передать её к клиенту. Самым распространённым взаимодействием данного типа является работа с базой данных. Ранее мы уже упомянули такой элемент многих бизнес-сайтов, как форма обратной связи. Преимуществом "Аякса" в данном случае будет то, что он проводит асинхронную передачу данных. Иными словами, пока информация пересылается, пользователь может совершать все необходимые ему действия. Ориентируясь на специфику каждого конкретного случая, необходимо решить, нужно ли об этом процессе информировать посетителя сайта. Относительно той же формы обратной связи следует сказать, что в данном случае можно написать «оператор набирает ответ», или нечто подобное.

Ответ сервера

Он может приходить не только благодаря XML, как это можно подумать из-за названия технологии. Кроме этого, он может передаваться как обычный текст или JSON. В первом случае полученную информацию можно сразу же выводить на страницу. Если же используется XML, то необходимо позаботиться о том, чтобы AJAX-файл был должным образом обработан в браузере клиента. Все данные в этом случае преобразовываются к (X)HTML. Когда же используется необходимо выполнить полученный код, чтобы получить полноценный При этом необходимо проявить осторожность и учитывать тот факт, что многие злоумышленники любят передавать посредством этой технологии вредоносный код. Поэтому необходимо предусмотреть процедуру проверки полученных данных перед их обработкой. Особенности реализации для разных браузеров могут немного разниться, но, в целом, схема действия тут одна.

Делаем запрос к серверу и обработку ответа

Вся последовательность действий будет выглядеть следующим образом:

  1. Первоначально необходимо создать и удостовериться в том, что существует XMLHttpRequest.
  2. Затем инициализируется соединение с сервером.
  3. Посылаем к нему запрос.
  4. Дожидаемся, пока придут данные, и обрабатываем их.

Следует рассказать о некоторых особенностях относительно создания объекта. Он может быть инициирован в любом месте, где это только возможно в рамках языка программирования. Но если ему присвоить статус глобального, то в какой-то один момент времени для него будет возможной только работа с одним запросом. Этому моменту необходимо уделить пристальное внимание. Относительно обработки - здесь ориентируемся по выбранному инструменту. Так, при XML данные необходимо обработать DOM-функциями и представить пользователю уже конечный результат в HTML. А что же делать с JSON-ном? Следует понимать, что он является объектной нотацией Javascript. Что это значит? Благодаря JSON можно представлять объект как строку. Но при этом необходимо помнить, что данный способ не является безопасным в полной мере, и необходимо будет учитывать кучу факторов. Но, в целом, он является весьма легким.

Серверные языки программирования

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

Настраиваем сервер

Какие программы необходимы для того, чтобы полноценно работал AJAX? Что это нам даст? Для чего они нужны? Чтобы получить ответы на эти вопросы, следует ознакомиться со следующим списком:

  1. HTML/XHTML. Они нужны для того, чтобы сервер распознавал разметку страницы.
  2. CSS. Этот инструмент необходим для визуального подбора оформления страницы.
  3. DOM. Он нужен для того, чтобы обеспечивать динамические изменения на странице как ответ на действие со стороны пользователя.
  4. XML. Необходим для пересылки данных между клиентом и сервером.
  5. JavaScript. Нужен для создания движка "Аякса" и обеспечения интерактивности.
  6. XMLHttpRequest. Объект, посредством которого будут пересылаться запросы к серверу.

Использование на сайте

Итак, сейчас у нас есть и теоретические знания, и представления о том, как работает AJAX. Отправка данных сейчас требует только определённой практики. Давайте же в целом посмотрим, как можно подходить к реализации поставленной задачи с использованием "Аякса". Итак, нам необходимо создать базу данных драйверов. Причем разниться они будут по устройствам, на которых могут работать. Следует отметить, что рассматриваемая база данных очень большая, поэтому просто пересылать её клиенту и уже ему предлагать делать выборку с помощью JavaScript нет смысла. Также нежелательно, чтобы сама веб-страница перезагружалась из-за одного параметра. На сервере запросы будут обрабатывать специальные скрипты РНР. БД реализована в виде XML-файла.

О базе данных

Необходимо проработать её структуру. А что делать, если передаются параметры, которые являются объектами? В таком случае необходимо предусмотреть создание переменной, где будет находиться ссылка не него, на случай вызова со стороны функции. Для возможности обращения к ней из любого места кода её нужно сделать глобальной. Для удобства желательно использовать Конечно, это не обязательно. Но всё же использование СУБД позволит работать с данными более удобно и эффективно.

Прорабатываем работу движка

Как же всё будет происходить? Итак, наступает определённое событие, которое будет вызывать особенную функцию. Она подготовит GET или POST-данные, которые будут пересылаться. Затем вызывается функция, которая сделает обращение к URL серверного скрипта. В ней необходимо предусмотреть создание XMLHttpRequest-объекта. Ссылку на него следует хранить в переменной. После того как данные были отправлены серверу, необходимо ждать от него ответа. Для этого можно включить «прослушку» до получения информации (если известно, что придёт и когда) или предусмотреть функцию, которая будет всегда готова принять данные. Первый вариант менее надёжен в случае возникновения внештатной ситуации. Вторая же реализация - более затратная с точки зрения ресурсов. Хотя, если это делается только относительно одной переменной, на быстром интернете это не скажется. Но если их сотни и тысячи, и они будут иметь большой размер, - тогда это будет другое дело. Поэтому необходимо искать баланс между пользованием имеющимися ресурсами и результативностью. Ведь следует понимать, что не все обладают оперативной памятью на 16 Гб. Для этого может устанавливаться определённое время ожидания, после которого подставляются предыдущие данные или информация о том, что сервер недоступен в данный момент времени.

Особенности

Когда с помощью "Аякса" создаётся интерфейс для страницы или приложения, то необходимо позаботиться о том, чтобы полученный результат хорошо работал как на разных операционных системах, так и на различных браузерах. В первом случае неоценимую помощь смогут оказать эмуляторы. Во втором случае достаточно будет просто установить различные программы и на них проверить работоспособность кода. Также необходимо предусмотреть определённые действия и на случай, если используемые пользователем браузеры будут устаревшими или он отключит необходимые настройки. В таких случаях следует позаботиться о выводе на страницу текста, в котором указана причина того, почему просмотр сайта в данном случае не является возможным. Да, сейчас подавляющее большинство людей использует современную технику, но не стоит полностью выпускать из внимания вероятность и того, что несколько процентов посетителей будут использовать несколько устаревшее программное обеспечение. А в масштабах бизнеса это может иметь значительные последствия.

Заключение

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

© Copyright 2024, pcwe.ru - Портал о персональных компьютерах.