Html связать с javascript

  • Закрыть ... [X]

    html связать с javascript Только для читателей Lifeexample возможно открыть интернет-магазин на Moguta.CMS со скидкой в 15%

    <<< Золотая техника: как сверстать сайт по макету || Админка сайта для интернет магазина >>>

    22.04.2012

    Технология AJAX и примеры скриптов

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

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

    Предупреждаю! Эта публикация будет очень объемной, поэтому запаситесь терпением и приготовьтесь внимать смыслу рассматриваемых в ней примеров:

    1. Технология AJAX пример №1 — наипростейший пример, для ознакомления с азами AJAX.
    2. Технология AJAX пример №2 — отправка данных на сервер средствами AJAX.
    3. Технология AJAX пример №3 — отправка структуры данных с сервера в виде XML и работа с ними на стороне клиента.

    Совместив все эти AJAX примеры воедино, мы получим реализацию обмена данными по AJAX технологии с форматом XML.

    Давайте приступим к большой и трудоемкой работе. Но сначала ознакомьтесь с небольшим введением.

    За интерактивностью будущее!

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

    AJAX технология - интерактивный пользователь

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

    Концепция технологии 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 документа:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45

    <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(), по строчкам я все описывать не стану, выделю лишь основные моменты, требуемые для представления происходящего.

    • Создаем объект XMLHttpRequest позволяющий получать данные с сервера в фоновом режиме.
    • Если используется IE (Браузер — Internet Explorer) тогда вместо вышеупомянутого объекта XMLHttpRequest, создаем объект ActiveXObject, смысл у них единый, отличие только в индивидуальности для IE.
    • Обрабатываем все 4-ре статуса состояния запроса. Созданный запрос он же объект request, в процессе отправки\получения данных может принимать четыре состояния (1подготовка к отправке, 2отправлен, 3идет обмен, 4получен ответ.)
    • В случае 4-го статуса, при получении ответа от сервера, происходит проверка на тип ответа 200"OK" или 404"Not Found".
    • Событие request.open() — открывает соединение с сервером с указанием метода передачи данных, адресом запроса, и флагом асинхронности. Указав флаг как false, мы получим в результате обычную перезагрузку страницы.

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

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

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

    1

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

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

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

    ( Скачали: 1491 чел. ) 

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

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

    • GET — передаёт пользовательских данные заданному ресурсу по URI.
    • POST — передаёт пользовательских данные заданному ресурсу по протоколу.
    • HEAD — аналогичен методу GET, за исключением того, что сервер ничего не посылает в информационной части ответа.
    • TRACE — возвращает всё, что было введено при запросе, включая HTTP-заголовки.
    • DELETE — Удаляет указанный ресурс.
    • PUT — загружает содержимого запроса на указанный в запросе URI.

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

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

    • open – открывает соединение с сервером с указанием метода передачи данных.
    • setRequestHeader — устанавливает заголовок запроса.
    • send — отправляет запрос.

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

    1
    2

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

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

    1
    2
    3

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

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

    1
    2
    3
    4
    5
    6
    7

    <?
    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.

    Если у вас уважаемые читатели не все получилось сделать самостоятельно, то вы можете скачать готовый исходный код примера, и поэкспериментировать над ним:

    ( Скачали: 1026 чел. ) 

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

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

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

    1
    2
    3
    4
    5

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

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

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

    1
    2

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

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

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

    Метод 1:

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

    1

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

    Метод 2 :

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

    1

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

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

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

    1
    2
    3
    4
    5
    6
    7

    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>"+famaly+"<br/><b>Статус: </b>"+status;           
        }

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

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

    ( Скачали: 1140 чел. ) 

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

    Заключение

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

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

    Благодарю всех, кто осилил мои AJAX примеры до конца! Надеюсь, я частично раскрыл тему "Золотая технология AJAX и примеры скриптов". Жду вашей критики, уважаемые читатели.

    Чтобы не пропустить публикацию следующей статьи подписывайтесь на рассылку по E-mail или RSS ленту блога.


    Источник: http://lifeexample.ru/jquery-javascript-primeryi/zolotaya-tehnologiya-ajax-primeryi-skriptov.html


    Поделись с друзьями



    Рекомендуем посмотреть ещё:



    Русский озабоченный отец, насильно трахает дочь с связанными - Александр южаков художник мастер класс

    Html связать с javascript Html связать с javascript Html связать с javascript Html связать с javascript Html связать с javascript

    ШОКИРУЮЩИЕ НОВОСТИ