Основы AJAX для начинающих

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

Примечание. Если Вы не знаете основы JavaScript, и не можете понять простой код на JavaScript, советую, для начала, прочитать вот эти статьи «JavaScript для начинающих – Простые примеры» и «JavaScript – Пример расширения формы регистрации» ,так как без знаний JavaScript учить AJAX бессмысленно!

Что такое AJAX?

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

Для чего нужен AJAX?

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

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

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

Недостатки AJAX

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

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

Пример использования AJAX

Хватит теории, перейдем к практике. Сразу скажу, что ajax — это не сложно, и если Вы разобрались с JavaScript, то разобраться с ajax будет очень просто, даже легче чем с JavaScript!

И начну я с того, что весь ajax строится на объекте XMLHttpRequest, у которого есть несколько свойств и несколько методов, которые легко освоить и запомнить. Объект XMLHttpRequest — это своего рода мини-браузер, от имени которого и будет посылаться запрос к серверному скрипту.

Весь механизм начинается с создания этого объекта, и создать его можно по-разному, в старых браузерах это делается одним способом, а во всех новых другим способом. Если вдруг Вы не планируете использовать ajax на старых браузерах, например, Вы создаете ajax-приложение для корпоративной сети, в которой установлены современные браузеры, Вы можете смело создать этот объект одной строкой:

   
   var request = new XMLHttpRequest();

где, в переменной request и будет храниться наш объект.

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

   
   function getXmlHttpRequest()
   {
        if (window.XMLHttpRequest) 
        {
                try 
                {
                        return new XMLHttpRequest();
                } 
                catch (e){}
        } 
        else if (window.ActiveXObject) 
        {
                try 
                {
                        return new ActiveXObject('Msxml2.XMLHTTP');
                } catch (e){}
                try 
                {
                        return new ActiveXObject('Microsoft.XMLHTTP');
                } 
                catch (e){}
        }
        return null;
   }

Для создания объекта XMLHttpRequest мы просто вызовем функцию getXmlHttpRequest, которая вернет нам нужный объект.

Объект создан, теперь можно писать код на JavaScript, который будет формировать запрос на сервер, и обрабатывать данные, полученные с сервера.

Для того чтобы наш урок прошел полноценно, нам потребуется небольшой серверный скрипт, я буду использовать серверный язык программирования PHP, и наш скрипт будет просто возвращать текущие время на сервере. Назовем его mytime.php, его код:

Код mytime.php:

   
   <?php
   //серверный скрипт(обработчик запроса)
   //посылаем заголовок для правильной кодировки
   header("Content-Type:" . "text/html; charset=utf8");
   //Чтение параметра в запросе
        if (isset($_GET["MyTime"])){
                        echo date("H:i:s");//Текущее время
                }
   ?>

Здесь я думаю все понятно, мы проверяем параметр, пришедший к нам методом GET, т.е. MyTime, и если параметр действительно к нам пришел, то возвращаем текущие время на сервере. Советую при разработке ajax приложения на серверном скрипте делать больше проверок, так как ajax запрос можно подделать. Можно делать вот такие проверки, например:

  • можно дополнительно посылать  заголовок  X-REQUESTED-WITH, а на серверном обработчике проверять его;
  • также добавить проверку реферера, т.е. откуда пришел запрос;
  • еще можно осуществлять проверку с помощью сессий.

Далее идет сам код (я оформил его также в php, файл index.php), в самом коде я все подробно комментирую, поэтому вопросов возникнуть не должно.

Код index.php:

   
   <?php
   header("Content-Type:" . "text/html; charset=utf8");
   ?>
        <script type="text/javascript" charset="UTF-8">
        //функция создания объекта XMLHttpRequest
        function getXmlHttpRequest(){
                        if (window.XMLHttpRequest) 
                        {
                                try 
                                {
                                        return new XMLHttpRequest();
                                } 
                                catch (e){}
                        } 
                        else if (window.ActiveXObject) 
                        {
                                try 
                                {
                                        return new ActiveXObject('Msxml2.XMLHTTP');
                                } catch (e){}
                                try 
                                {
                                        return new ActiveXObject('Microsoft.XMLHTTP');
                                } 
                                catch (e){}
                        }
                        return null;
        }
        function serverTime(){
          // Объект XMLHttpRequest
          var request = getXmlHttpRequest();
          /*свойство onreadystatechange это обработчик события, которое реагирует 
          на любое изменения данного объекта*/
          request.onreadystatechange = function (){
          /*свойство readyState - состояние объекта             
          0 — не инициализирован
          1 — открыт, 
          2 — отправка данных, 
          3 — получение данных,  
          4 — данные загружены
          рекомендую использовать только 4*/
          if (request.readyState == 4) {
          /*свойство status это HTTP-статус ответа: 200-OK, 404-Not Found*/
          if (request.status == 200){
                        var result = document.getElementById("MyId"); // Чтение ответа
                        result.firstChild.nodeValue = request.responseText; // Вывод на экран
                        } else document.write("Произошла ошибка. Обнови страничку");
                }
          }
          // Адрес серверного скрипта
          var url = "mytime.php?MyTime";
          /* Запрос на сервер, true означает что это асинхронный запрос
          если было бы false, то это синхронный запрос*/
          request.open("GET", url, true);  
          request.setRequestHeader("Content-type", "charset=utf8");
          request.send(null); // посыл данных
                }
        </script>
   <?php
        echo '<h1 id = "MyId">Поле для времени</h1>';
        echo '<p><button onclick="serverTime()">Узнать время</button></p>';
   ?>

Вот два файла (mytime.php и index.php), с помощью которых Вы легко можете проверить работу ajax, код этих файлов представлен выше.

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

Код функции serverTime с передачей параметров методом post:

   
   function serverTime(){
          var request = getXmlHttpRequest();
          request.onreadystatechange = function (){
          if (request.readyState == 4) {
                  if (request.status == 200){
                          var result = document.getElementById("MyId"); 
                          result.firstChild.nodeValue = request.responseText; 
                  } else document.write("Произошла ошибка. Обнови страничку");
                }
          }
          var url = "mytime2.php";//изменим адрес серверного обработчика
          var data = "MyTime=1";//задаем параметры
          request.open("POST", url, true); // указываем метод post
          //посылаем два заголовка: тип данных и размер данных 
          request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
          request.setRequestHeader("Content-Length", data.length);
          request.send(data); // посыл данных, вместо null вставляем переменную с параметрами
   }

Не забудьте изменить серверный обработчик, чтобы он проверял данные пришедшие методом post. Измените строку isset($_GET[«MyTime»] на isset($_POST[«MyTime»] и все будет работать точно так же, как и с помощью GET.

Как Вы заметили, ajax совсем не сложная штучка, хотя это только основы, но все равно если Вы разобрались, например, с JavaScript, то освоить ajax будет не проблема.

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

Удачи!

Понравилась статья? Поделиться с друзьями:
Заметки IT специалиста
Комментарии: 2
  1. Роман

    Доброго времени суток. Скажите, пожалуйста, как быть, если в php файле я выбираю из БД несколько переменных, как мне их в js разделить? У меня получается они одной строкой. Заранее благодарен.

    1. Евгений

      Цитирую Роман:Доброго времени суток. Скажите, пожалуйста, как быть, если в php файле я выбираю из БД несколько переменных, как мне их в js разделить? У меня получается они одной строкой. Заранее благодарен.

      Ну здесь нужен объект JSON на выходе. Но это я знаю только в теории. А вообще было бы здорово увидеть код файла mytime2.php.

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:
Нажимая на кнопку «Отправить комментарий», я даю согласие на обработку персональных данных и принимаю политику конфиденциальности.