ООП   PHP   web   4GL - визуальные среды

Технология AJAX

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

Под асинхронностью в программировании понимается процесс выполнения команд пользователя без необходимости синхронизации с сервером.

Асинхронность в случае AJAX можно представить в виде двух процессов: высокого приоритета и низкого. Первостепенным действием является процесс отображения страницы браузером. А второстепенным – обработка запросов пользователя сервером. В момент выполнения операций на стороне сервера, благодаря AJAX, браузер хотя и ждет ответа сервера, но не ограничивает работу пользователя со страницей.

Итак, концепция такова: между браузером и сервером не переставая происходит обмен данными, которые:

  1. Вводятся в браузер средствами пользовательского интерфейса;
  2. Отправляются на сервер;
  3. Обрабатываются на сервере, возможно, заносятся в БД;
  4. В это время браузер ожидает возвращение ответа;
  5. Пока браузер ждет, он не прекращает работу пользователя;
  6. Дождавшись данных от сервера в определенном формате, обрабатывает их и выводит в контент HTML страницы.

Вы можете пронаблюдать представленный процесс на схематической иллюстрации работы описываемой технологии.

Схема - технология AJAX

Осталось упомянуть важный момент: данные циркулирующие между сервером и браузером, должны отвечать определённым правилам форматирования. Такие правила обычно описывают два формата:

  1. XML (eXtensible Markup Language) — расширяемый язык разметки;
  2. JSON (JavaScript Object Notation) —текстовый формат основанный на JavaScript.

В редких случаях можно обойтись свободным текстовым форматом передачи данных, но это скорее исключение.

Технология AJAX расшифровывается как (Asynchronous JavaScript and XML), из этого можно сделать вывод, что разработчики в первую очередь предполагают использование формата XML. Но на деле, как показывает практика все чаще используется формат JSON, в силу своего минимализма. Другими словами – работать с обоими форматами можно одинаково хорошо, но один и тот же набор данных, представленный в JSON и XML, в первом будет иметь меньший размер. Следовательно, если JSON имеет меньший размер, то и передаваться он будет быстрее, чем XML.

XML для AJAX

Чуть позже мы рассмотрим работу AJAX, с использованием данных в формате XML. А пока давайте разберемся, что же такое XML формат.

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

Во-вторых, синтаксис XML очень похож на всем нам известный HTML.

Вот пример HTML разметки:

1
2
3
4
<body>
<h1 >Пример HTML разметки</h1>
<p>Обычный текст, <font color=”#ffd700”>золотой текст.</font> </p>
</body>

Мы видим, что любой открытый тег имеет свой закрывающий эквивалент. Также некоторые из тегов имеют атрибуты. Тут я никому Америку не открыл, и все понимают, что этот HTML документ будет интерпретирован браузером, который вместо тегов применит соответствующие им стили для текста.

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

Пример структуры в формате XML

1
2
3
4
5
<user login="root" pass="">
  <name>Mark</name>
  <famaly>Avdeev</famaly>
  <status>Администратор блога lifeexample.ru</status>
</user>

Такими произвольными тегами и атрибутами как в этом примере можно запросто описать карточку пользователя, системы.

Запомните! Вся работа приложения на основе технологии AJAX сводится к обмену сложными структурами данных между клиентом (браузер), и сервером (web сервер).

Замечание 1: Можно, но совершенно не обязательно писать парсер самостоятельно ведь разработчики PHP создали все необходимые универсальные функции ("XML Parser Functions") для работы с XML форматом. Чтобы разобраться с ними нужно начать копать в сторону xml_parser_create().

Замечание 2: Технологией AJAX, тоже предусмотрен механизм отправки пользовательских данных.

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

Отлично, теперь мы представляем, что такое XML формат, и понимаем, что назначением его является передача сложных структур данных между сервером и клиентом. Следовательно, можем двигаться дальше.

AJAX пример №1 (Начало работы)

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

Исходный код HTML документа:

<script type="text/javascript">
function startAjax(url){
  var request; 
  if(window.XMLHttpRequest){ 
      request = new XMLHttpRequest(); 
  } else if(window.ActiveXObject){ 
      request = new ActiveXObject("Microsoft.XMLHTTP");  
  } else { 
      return; 
  } 
  
  request.onreadystatechange = function(){
        switch (request.readyState) {
          case 1: print_console("<br/><em>1: Подготовка к отправке...</em>"); break
          case 2: print_console("<br/><em>2: Отправлен...</em>"); break
          case 3: print_console("<br/><em>3: Идет обмен..</em>"); break
          case 4:{
           if(request.status==200){     
                        print_console("<br/><em>4: Обмен завершен.</em>"); 
                        document.getElementById("printResult").innerHTML = "<b>"+request.responseText+"</b>"; 
                     }else if(request.status==404){
                        alert("Ошибка: запрашиваемый скрипт не найден!");
                     }
                      else alert("Ошибка: сервер вернул статус: "+ request.status);
           
            break
            }
        }       
    } 
    request.open ('GET', url, true); 
    request.send (''); 
  } 
  function print_console(text){
    document.getElementById("console").innerHTML += text; 
  }
</script>

<a href="#" onclick="startAjax('handler_script.php');">Запустить php скрипт</a>  
<div id="console" style="border: 1px solid gray; width:250px; height: 110px; padding: 10px; background:lightgray;">
Консоль выполнения запроса:
</div>
<br/>
<div id="printResult">
После нажатия на ссылку, тут будет сообщение с сервера!
</div>

В коде HTML страницы мы создаем функцию startAjax() на языке JavaScript, позволяющую реализовать задуманные действия с AJAX’ом. Кстати, о действиях, во-первых мы хотим увидеть, как отрабатывает php скрипт, находящийся на сервере. Во-вторых, как возвращенная им информация появляется на страничке, без перезагрузки. Для этого в коде мы предусмотрели ссылку, по нажатию на которую запустится процесс всей демонстрации, консоль вывода действий JavaScript скрипта, а также блок для вывода результата.

Примеры AJAX, демонстрация

Так вот, вернемся к создаваемой нами функции startAjax(), по строчкам я все описывать не стану, выделю лишь основные моменты, требуемые для представления происходящего.

Кликнув на ссылку, мы пронаблюдаем успешное выполнение простого AJAX запроса.

Пример работы AJAX скрипта

Разумеется, такое сообщение мы получим только после того как разместим на сервере, в той же папке, что и саму html страничку, скрипт handler_script.php:

1
<?echo "Это текстовое сообщение пришло с сервера!"; ?>

Скрипт не мудрый, тем не менее, его содержимого достаточно для демонстрации.

Ну вот, с азами разобрались, перейдем от простого к сложному. Рассмотрим пример использования технологии AJAX по прямому её назначению, а именно с пересылкой данных в виде XML.

AJAX пример №2 – отправка POST запроса на сервер

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

Причем это относится не только к технологии AJAX, а в принципе ко всему протоколу HTTP. Самыми распространенными являются два типа GET и POST, как правило, они широко используемы в отправке данных на сервер посредствам HTML элемента form. Именно с этими типами запроса я и приведу примеры работы веб приложения на АЯКСЕ.

Для того чтобы с помощью АЯКС технологии отправить POST запрос, нужно использовать три метода объекта request:

Откройте код примера №1 и замените в нем строки:

request.open ('GET', url, true);
request.send ('');

На следующие:

request.open("POST",url, true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("param1=1&param2=2");

Исполняемый на сервере php скрипт handler_script.php должен принять вид:

<?
echo "Метод передачи данных: ".$_SERVER['REQUEST_METHOD'];
echo "<br/>Получили посредством AJAX технологии следующие данные:";
echo "<pre>";
print_r($_REQUEST);
echo "</pre>";
?>

Вот, что получим в результате:

AJAX примеры POST запрос

Как видите заданные в методе send() параметры, оказались доступными в php скрипте, а это значит, что с ними мы смогли бы сделать все что угодно, в том числе и записать данные в базу данных.

Для того чтобы использовать тип передачи GET , нужно в методе open() указать такую информацию:

1
request.open("GET",url+"?a1=1&a2=2",true);

Вот что выйдет если мы передадим GET запрос:

AJAX примеры GET запрос

Возможно, описание примера получилось немного сумбурным, но в принципе я считаю вполне достаточным для того, чтобы определиться с тем, как передать данные из браузера на сервер методом GET и POST.

Технология AJAX, пример №3

Мы уже умеем отправлять данные с клиентской стороны, но пока не умеем обработать ответ сервера. В предыдущих примерах ответом являлось тестовое/html сообщение, генерируемое php скриптом. Но что делать, когда нужно передать более сложный формат данных, такой как XML?

Рассмотрим ситуацию когда, сервер возвращает ответ в XML виде:

<user login="root" pass="">
  <name>Mark</name>
  <famaly>Avdeev</famaly>
  <status>Администратор блога lifeexample.ru</status>
</user>

Для этого нам надо создать на сервере файл data.xml и поместить в него вышеприведенный текст.

В файл handler_script.php поместите такой код:

header('Content-Type: text/xml; charset=windows-1251');
echo file_get_contents('data.xml');

Данные будут сначала считаны из фала data.xml, а затем возвращены в ajax запрос в формате XML.

Чтобы обработать полученный XML формат, в технологии AJAX предусмотрены два метода работы с данными:

Метод 1:

Извлекает данные, используя имя узла.

request.responseXML.getElementsByTagName("name")[0].childNodes[0].nodeValue;

Метод 2 :

Возвращает данные используя дочерний узел.

proddet .getElementsByTagName("ProductName")[0].firstChild.data;

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

В качестве примера измените ту часть кода, что отвечает за вывод результата вот этим содержимым:

if(request.status==200){
    print_console("<br/><em>4: Обмен завершен.</em>");
    var name = request.responseXML.getElementsByTagName("name")[0].firstChild.data;
    var famaly = request.responseXML.getElementsByTagName("famaly")[0].firstChild.data;
    var status = request.responseXML.getElementsByTagName("status")[0].firstChild.data;
    document.getElementById("printResult").innerHTML = "<b>Имя: </b>"+name+"<br/><b>Фамилия: </b>"
    +family+"<br/><b>Статус: </b>"+status;
    }

Вот какой результат мы увидим в процессе демонстрации:

технология AJAX передача XML

Как вы понимаете с полученными данными можно делать все, что заблагорассудится и выводить их в любом месте HTML документа посредствам изменения DOM структуры. Что является очень важным в использовании интерактивных интерфейсов управления web-приложением.

Заключение

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

В продолжении данной статьи будет рассмотрен очень важный и удобный механизм обмена данными между сервером и AJAX приложением, по средствам использования формата JSON.

ООП   PHP   web   4GL - визуальные среды

Знаете ли Вы, что, когда некоторые исследователи, пытающиеся примирить релятивизм и эфирную физику, говорят, например, о том, что космос состоит на 70% из "физического вакуума", а на 30% - из вещества и поля, то они впадают в фундаментальное логическое противоречие. Это противоречие заключается в следующем.

Вещество и поле не есть что-то отдельное от эфира, также как и человеческое тело не есть что-то отдельное от атомов и молекул его составляющих. Оно и есть эти атомы и молекулы, собранные в определенном порядке. Также и вещество не есть что-то отдельное от элементарных частиц, а оно состоит из них как базовой материи. Также и элементарные частицы состоят из частиц эфира как базовой материи нижнего уровня. Таким образом, всё, что есть во вселенной - это есть эфир. Эфира 100%. Из него состоят элементарные частицы, а из них всё остальное. Подробнее читайте в FAQ по эфирной физике.

НОВОСТИ ФОРУМАФорум Рыцари теории эфира
Рыцари теории эфира
 20.09.2019 - 04:36: ВОСПИТАНИЕ, ПРОСВЕЩЕНИЕ, ОБРАЗОВАНИЕ - Upbringing, Inlightening, Education -> Просвещение от Вячеслава Осиевского - Карим_Хайдаров.
18.09.2019 - 12:08: НОВЫЕ ТЕХНОЛОГИИ - New Technologies -> ПРОБЛЕМА ИСКУССТВЕННОГО ИНТЕЛЛЕКТА - Карим_Хайдаров.
18.09.2019 - 06:01: ВОСПИТАНИЕ, ПРОСВЕЩЕНИЕ, ОБРАЗОВАНИЕ - Upbringing, Inlightening, Education -> Просвещение от Л.Г. Ивашова - Карим_Хайдаров.
17.09.2019 - 05:51: ВОЙНА, ПОЛИТИКА И НАУКА - War, Politics and Science -> ФАЛЬСИФИКАЦИЯ ИСТОРИИ - Карим_Хайдаров.
17.09.2019 - 05:41: ВОСПИТАНИЕ, ПРОСВЕЩЕНИЕ, ОБРАЗОВАНИЕ - Upbringing, Inlightening, Education -> Просвещение от Андрея Тиртхи - Карим_Хайдаров.
16.09.2019 - 18:21: ЭКОНОМИКА И ФИНАНСЫ - Economy and Finances -> ПРОБЛЕМА КРИМИНАЛИЗАЦИИ ЭКОНОМИКИ - Карим_Хайдаров.
16.09.2019 - 03:11: СОВЕСТЬ - Conscience -> РУССКИЙ МИР - Карим_Хайдаров.
14.09.2019 - 18:23: ПЕРСОНАЛИИ - Personalias -> WHO IS WHO - КТО ЕСТЬ КТО - Карим_Хайдаров.
13.09.2019 - 09:08: ЭКОЛОГИЯ - Ecology -> Биологическая безопасность населения - Карим_Хайдаров.
12.09.2019 - 17:47: ВОЙНА, ПОЛИТИКА И НАУКА - War, Politics and Science -> РАСЧЕЛОВЕЧИВАНИЕ ЧЕЛОВЕКА. КОМУ ЭТО НАДО? - Карим_Хайдаров.
08.09.2019 - 03:42: ВОСПИТАНИЕ, ПРОСВЕЩЕНИЕ, ОБРАЗОВАНИЕ - Upbringing, Inlightening, Education -> Просвещение от О.Н. Четвериковой - Карим_Хайдаров.
07.09.2019 - 07:36: ВОСПИТАНИЕ, ПРОСВЕЩЕНИЕ, ОБРАЗОВАНИЕ - Upbringing, Inlightening, Education -> Декларация Академической Свободы - Карим_Хайдаров.
Bourabai Research Institution home page

Bourabai Research - Технологии XXI века Bourabai Research Institution