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


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

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

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

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

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

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

AJAX — это коллекция технологий, существующих с момента появления Web. А вот и возможности, предоставляемые AJAX (как это представил Джис Джеймс Гаррет (Jesse James Garrett), он первым ввел термин 'AJAX' для асинхронного JavaScript + XML):
  • Стандартно-базированная презентация с использованием XHTML и CSS;
  • Динамическое отображение и взаимодействие с использованием объектной модели документа;
  • Взаимообмен данными и манипуляция с задействованием XML и XSLT;
  • Асинхронное извлечение данных с использованием XMLHttpRequest;
  • JavaScript, связывающий все вместе.

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

    Как работает AJAX

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

    В основе технологии AJAX лежит объект XMLHttpRequest. Изначально он появился в Internet Explorer, а затем — в Mozilla/Safari. На момент написания этой статьи уже была поставлена 8-я совместимая версия Opera. Однако, Opera в свое время отличилась нестабильностью с точки зрения реализации XMLHttpRequest.

    Вызов AJAX

    Ключевым моментом нашего примера является вызов AJAX. Обратите внимание на то, что для различных браузеров требуются разные методы реализации для объекта XMLHttpRequest:
    <script>
    function getHTTPRequestObject() {
      var xmlHttpRequest;
      /*@cc_on
      @if (@_jscript_version >= 5)
      try {
        xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (exception1) {
        try {
          xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (exception2) {
          xmlHttpRequest = false;
        }
      }
      @else
        xmlhttpRequest = false;
      @end @*/
     
      if (!xmlHttpRequest && typeof XMLHttpRequest != 'undefined') {
        try {
          xmlHttpRequest = new XMLHttpRequest();
        } catch (exception) {
          xmlHttpRequest = false;
        }
      }
      return xmlHttpRequest;
    }
     
    var httpRequester = getHTTPRequestObject(); /* Когда страница
                                загрузилась, создаем xml http объект */
    </script>
    

    В данном коде используются аннотации Internet Explorer для реализации объекта AJAX. Другие браузеры, выполняющие данный сценарий, будут просто игнорировать разделы с аннотациями к функции getHTTPRequestObject(). Помните о том, что ваш браузер должен поддерживать JavaScript v1.5 и более поздние версии.

    Асинхронная загрузка данных

    Теперь мы выполним асинхронную активизацию веб-ресурсов. Ниже представлены действия, необходимые для асинхронной загрузки веб-ресурсов из функции JavaScript:
    var couldProcess = false;
    function displayMessageBody( messageID ) {
      idToDisplay = messageID;
      if (!couldProcess && httpRequester) {
        httpRequester.open("POST", serverSideURL + escape(messageID),true);
        httpRequester.onreadystatechange = processResponse;
        couldProcess = true;
        httpRequester.send(null);
      }
    }
    

    Для вывода сообщения на экран метод displayMessageBody принимает ID этого сообщения. Посредством передачи следующих трех параметров для объекта XMLHttpRequest определяется получение доступа к URL:
  • Метод POST или GET;
  • URL плюс любой ушедший параметр (в этом случае передается только ID. Для определения многопараметрических URL необходимо использовать обозначения строки запроса стандартного URL и делать переход);
  • Свойство типа Boolean обозначает, должен ли вызов выполняться асинхронно. Вышеупомянутый метод также определяет метод processResponse по обработке содержимого как callback, активизируемый при загрузке содержимого из URL.

    Обработка данных

    Вышеупомянутый метод processResponse активизируется как callback. Он извлекает вывод объекта XMLHttpRequest, проводит синтаксический анализ и присваивает вывод объектам страницы.
    function processResponse() {
      if ( httpRequester.readyState == COMPLETE ) { //это константа, объявлена локально, ее значение равно 4
        if ( httpRequester.responseText.indexOf('invalid') == -1 ) {
          var values = httpRequester.responseText.split(","); //анализируем ответ сервера
          document.getElementById('messageBody').value = values[3]; //выбираем 4-е значение и текущее сообщение
          couldProcess = false;
        }
      }
    }
    

    HttpRequester.readyState является индикатором завершенности кода URL. Он может принимать следующие значения:
  • 0 = неинициализированный
  • 1 = загрузка
  • 2 = загруженный
  • 3 = интерактивный
  • 4 = завершенный (в нашем примере внимание фокусируется на этом состоянии.)

    Обратите внимание на то, что здесь доступ к ответу рассматривается как доступ к текстовому содержимому. XMLHttpRequest может без затруднений извлекать содержимое как в XML-формате, так и в не XML-формате. Если необходимо извлечь содержимое XML, то строка прочтёт responseXML и вы сможете получить доступ к нему как к объекту XML DOM. Такое разнообразие текстовых форматов — приятная новость, поскольку XML может привести к чрезмерному уничтожению простых сценариев извлечения данных, подобно описанному выше.

    Повышаем устойчивость AJAX-приложения

    При разностороннем использовании JavaScript автоматически возникает вопрос о степени устойчивости и надежности приложения. Оно с трудом может положиться на этот язык сценариев, отличающийся своей «расслабленностью» и «всепрощением». При наличии AJAX, ситуация все более усложняется. AJAX проводит удаленные вызовы, что в свою очередь создает дополнительную проблемную грань и возможность появления ошибок. Особенно, учитывая, что встроенная поддержка при ошибках, поступающих с серверной стороны, очень ограничена. Принимая это во внимание, можно предложить следующие варианты предотвращения ошибок:
  • Проверьте, чтобы ваше приложение работало в режиме без AJAX.
  • Проверьте код ответов из вызовов AJAX, перед обработкой результатов. API XMLHttpRequest поддерживает коды HTTP (200, 400, …) К ним можно получить доступ через свойство состояния (вместе со свойством statusText, которое удерживает сообщение, связанное с состоянием ответа:
    if ( httpRequester.readyState == 4) {
    // если статус равен 200 (OK)
      if ( httpRequester.status == 200) {
        // ... результаты выполнения...
      } else {
       // ... здесь обрабатываем ошибки...
      }
    }
    


    Более полную статью можно найти на wikipedia.org

    Оценить Статью:  
    1   2   3   4   5   6   7   8   9   10    

    « Назад
  • SAPE все усложнил?

    MainLink - простая и прибыльная продажа ссылок!

    Последние поступления:

    Стишки пирожки про Олега⁠⁠

    Размещена 20 июня 2024 года

    Олег купил презервативы
    Проник в семидесятый год
    И подарил их папе с мамой
    Такой нелепый суицид

    читать далее…

    Размещена 10 августа 2020 года

    Я по ТВ видел, что через 10 лет мы будем жить лучше, чем в Германии...
    Я не понял, что это они с Германией сделать хотят?!

    читать далее…

    ТехЗадание на Землю

    Размещена 14 марта 2018 года

    Пpоект Genesis (из коpпоpативной пеpеписки)

    читать далее…

    Шпаргалка по работе с Vim

    Размещена 05 декабря 2017 года

    Vim довольно мощный редактор, но работа с ним не всегда наглядна.
    Например если нужно отредактировать какой-то файл например при помощи crontab, без знания специфики работы с viv никак.

    читать далее…

    Ошибка: Error: Cannot find a valid baseurl for repo

    Размещена 13 сентабря 2017 года

    Если возникает ошибка на centos 5 вида
    YumRepo Error: All mirror URLs are not using ftp, http[s] or file.
    Eg. Invalid release/

    читать далее…