Главная · Карта сайта · Поиск · Статьи · Компьютерные курсы · Обучающие программы · Открытые проекты · Веб-программирование · Создание интернет-сайта · Полезные ссылки · Глоссарий · Контакты · Декабрь 09 2016 22:16:43
Последнее опубликованное

Что такое Model-View-Controller
Pattern Model-View-Controller

Как создать свой веб-сайт
Как создать свой сайт в интернете

Разное
Статистика

AJAX и jQuery. Создание интерактивных интернет страниц


AJAX

Что такое AJAX

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

Асинхронно может также означать и параллельное обновление сразу нескольких фрагментов. К примеру, когда загружается страница с большим количеством тегов <img>, то сами изображения могут появляться постепенно и параллельно друг другу. Именно способность обновлять не всю интернет страницу, а отдельную ее часть делает технологии AJAX такими популярными и востребованными в области веб-дизайна. Довольно часто AJAX используют в сценариях авторизации (генерация capture) или при отображении статуса длительных операций, выполняемых на сервере.

Если не вдаваться в детали, то AJAX объединяет в себе два основных подхода к созданию интерактивных интернет страниц:

  1. Использование объекта XMLHttpRequest для обращения к серверу и получения от него ответа в фоновом режиме по http протоколу.

  2. Динамическое обновление самой страницы через программные интерфейсы ее объектной модели (Document Object Model, DOM) в коде JavaScript. Все вместе это называется Dynamic HTML или DHTML.

Что дает использование AJAX? Чтобы понять это нужно его использовать и сравнить с тем, что было без него. Ниже пара неоспоримых преимуществ применения AJAX при построении интернет сайтов:

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

  2. Более качественная эргономика и более высокая скорость работы пользовательского интерфейса сайта.

Использование AJAX – это не только плюсы, но и недостатки, с которыми приходится мириться, если вы решите применять эту программную концепцию в своих интернет проектах. Вот некоторые из них, которые необходимо иметь в виду:

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

  • Содержимое, отображенное в результате AJAX запроса может никогда не попасть в поле зрения поисковых машин (Google, Яндекс), поскольку они не имитируют поведение пользователей и не исполняют JavaScript код.

  • Стандартные сервисы учета посетителей и просмотра страниц могут формировать неверную статистику.

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

Объект XMLHttpRequest

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

function createRequest()
{
    var request = null;
    if (window.XMLHttpRequest) 
    {
        request = new XMLHttpRequest();
    } else if (window.ActiveXObject) 
      {
        try {request = new ActiveXObject('Msxml2.XMLHTTP');} 
        catch (ex)
         {
            try { request = new ActiveXObject('Microsoft.XMLHTTP');} 
            catch (ex){return null;}
         }
    }
    return request;
}

Далее создаем запрос и обращаемся к серверу:

//Создаем запрос
var request = createRequest()

//Передаем тип http запроса (GET или POST), URL запроса и режим: асинхронный запрос (true)
//или синхронный (false), когда на время выполнения запроса работа браузера приостанавливается.
request.open("GET", url, true);

//Определяем обработчик завершения запроса
request.onreadystatechange = onSuccess;

//Выполняем запрос
request.send();

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

function onSuccess ()
{
  try {
    if (request.readyState == 4) 
       { //Запрос выполнен
        if (request.status == 200) { //и выполнен успешно
            //здесь что-то делаем с результатом запроса
            var result = request.responseText;  
        } else {
            //здесь обрабатываем неудачное выполнение запроса
            alert(request.statusText);
        }
    }
  }
  catch(ex) {}
 }

AJAX и jQuery

В принципе ничего сложного в приведенном выше примере нет, но обратите внимание на функцию createRequest. Способность программного кода работать одинаково корректно под управлением любого браузера называется кроссбраузерностью. Чтобы ваш программный код стал кроссбраузерным нужно приложить серьезные усилия: необходимо знать нюансы каждого браузера и пути разрешения проблем несовместимости его инфраструктуры с применяемыми вами программными средствами. Популярная среди веб программистов Javascript библиотека JQuery не только облегчает работу с объектом XMLHttpRequest, но и гарантирует (старается это делать) кроссбраузерность вашего решения. В jQuery есть несколько методов для работы с технологиями AJAX. В первую очередь это сам метод ajax, который является наиболее универсальным и подходит для составления любых запросов к серверу. Методы get и post внутри себя также используют метод ajax (являются его обертками), и предназначены, как несложно догадаться по их названию, для отсылки серверу GET и POST запросов соответственно. Ниже представлены примеры JavaScript кода использования AJAX средствами jQuery.

   function loadArticle_ajax(type, id)
   {
     $.ajax({
             type    : type,
             url     : "http://codingcraft.ru/readarticle_content.php",
             data    : ({article_id:id}),  
             success : OnComplete,
             error   : OnFail
           });  
   }

   function loadArticle_get(id)
   {
    $.get("http://codingcraft.ru/readarticle_content.php", {article_id:id}, OnComplete)
     .fail(OnFail);
   }

   function loadArticle_post(id)
   {
    $.post("http://codingcraft.ru/readarticle_content.php", {article_id:id}, OnComplete)
     .fail(OnFail);
   }

   function OnComplete(html)
   {
    $('#content').html(html);
   } 

   function OnFail(response)
   {
    $('#content').html("Ошибка загрузки данных:<br/>" + response.statusText+"<br/>" + response.responseText);
   }

Приведенные функции выполняют параметризованный http запрос по ссылке (URL) следующего вида:

http://codingcraft.ru/readarticle_content.php?article_id=id

Извлекаемое содержимое зависит от параметра id. Если в вашем случае никаких параметров передавать не нужно, то оставьте в качестве соответствующего аргумента пустое множество {}. Посмотреть на работу примера можно здесь. На этом про AJAX и jQuery у меня все.

Компьютерные курсы и курсы программирования
Основы программирования

Курс для начинающих программистов на C# и VB.NET.

SQL 25™

Построение SQL запросов и работа с базой данных.

C# Quick Guide™

Программирование на C#. Краткое руководство.

RegEx

Применение регулярных выражений.

Plug-in архитектура

Примеры программной Plug-in архитектуры.

XML и его расширения

Язык разметки XML и его расширения с примерами.

HTML и разметка гипертекста

Языки HTML, XHTML и CSS с примерами разметки.

Основы веб-дизайна

Основы веб-дизайна: решения типовых задач верстки.

Программирование на PHP

Руководство по программированию на PHP для начинающих.

Справочные материалы

Шаблоны проектирования
Каталог шаблонов проектирования программных компонентов.

Рефакторинг кода
Каталог приемов рефакторинга программного кода.

Гость
Имя

Пароль



Забыли пароль?
Запросите новый здесь
.
Coding Craft. Все права защищены © 2011. Проект Инициативного Народного Фронта Образования - ИНФО-проект.