Хороший AJAX

Большинство веб-разработчиков ограничивают себя в использовании аякса, потому что он, как известно, обладает некоторыми распространенными недостатками:

1. Неиндексируемость динамически загружаемого содержимого поисковиками;
2. Невозможность работать с URL (к примеру, добавлять в закладки динамически загруженный материал);
3. Динамически создаваемые страницы не регистрируются в истории браузера, поэтому невозможно использовать клавиши «назад» и «вперед»;

Но, на другой стороне весов имеются неопровержимые преимущества AJAX:

1. Экономия трафика;
2. Уменьшение нагрузки на сервер;
3. Ускоренная работа веб-приложения (это результат первых двух пунктов).

В этой статье мы расскажем, как преодолеть минусы и полноценно пользоваться плюсами AJAX.

Идеи

1. Все страницы сайта получаем через AJAX, т. е. обновляем только заголовок и содержимое страницы. Это увеличивает скорость работы сайта и снижает трафик между сервером и браузером.
2. У каждой «аяксовой» страницы свой адрес. Например, вы кидаете другу ссылку в аське на такую страницу и он видит именно то, что нужно. Или человек приходит по ссылке на какую-то страницу (скажем, из поисковика) и тоже видит нужную страницу.
3. Понятная навигация — страницы сайта не ссылаются сами на себя. В нашем случаем мы будем просто выделять ссылки на текущую страницу.
4. Рабочие кнопки «назад» и «вперед». Чтобы пользователь работал с нашим сайтом в привычной ему форме.
5. Работа сайта без Javascript. Содержимое сайта будет индексироваться поисковиками и приверженцы текстовых браузеров тоже не останутся в обиде.

Серверная часть

Для начала нам нужен обычный сайт. Кроме того, у нас должна быть возможность получать одну и ту же страницу в форматах HTML (полный код страницы) и XML (только заголовок и содержимое страницы). При этом будет удобно, если html и xml версии будут различаться только одним параметром в адресе. Например, так:

• HTML версия страницы — /page1/page 1-1.html;
• XML версия — /page1/page 1-1.html?ajax=yes.

Мы сделали это на PHP, вы же можете выбрать любой другой серверный язык программирования.

Клиентская часть

Для простоты работы возьмем библиотеку jQuery (с ее помощью будем реализовывать AJAX). Для работы с историей браузера понадобиться библиотека unFocus History.

Для начала нам нужно переписать адреса у ссылок и на событие click привязать выполнение AJAX-запроса, отметку ссылок с тем же адресом, что и у текущей, и добавление этого клика в историю посещений. Обратите внимание, что мы не будем переписывать следующие типы ссылок:

• внешние ссылки, т. е. ссылки на страницы других сайтов;
• ссылки на картинки, архивы и прочие файлы (расширения таких файлов указываем в переменной forbiddenTypes);
• ссылки с заранее указанным классом (forbiddenClass) — если внутри сайта есть страницы, которые необходимо грузить целиком.

function setupNewLinks(obj)
  {
  var links = obj.getElementsByTagName("a"); // все ссылки внутри объекта obj
  // перебираем ссылки
  for (i = 0; i < links.length; i ++)
    {
    // проверяем, можно ли переписывать адрес текущей ссылки 
    //(проверка по имени класса, расширению и "внешности" ссылки  
    // если можно, то переписываем
    tmp = links[i].href;
    tmp = tmp.replace("http://"+site, "");
    indexOfDot = 0;
    if(tmp.lastIndexOf(".") > 0) indexOfDot = tmp.lastIndexOf(".");
    if(forbiddenTypes.match(tmp.substring(indexOfDot)) == null && tmp.substring(0, 7) != "http://" && links[i].className != forbiddenClass)
      {
      // прописываем, что происходит при клике на ссылку
      $(links[i]).bind("click", function()
        {
        markLinksWithHref(this.href);
        historyVar.getNewHistoryState(this.href.replace("http://"+site+"/#", ""));
        this.className = "curPage";
        });
      // заменяем адрес
      links[i].href = "#" + tmp;
      }
    }
  }

Параметром функции указываем объект страницы, внутри которого надо искать ссылки.Вначале указываем весь документ (setupNewLinks (document)), при каждом обновлении контента — только этот контент (setupNewLinks (document.getElementById (’’content’’))).

Сейчас при клике на ссылку ее класс меняется на curPage. Но нам нужно отметить все такие ссылки внутри страницы. Для этого используем вот такую функцию. Ее аргумент — адрес текущей ссылки.

// с помощью этой функции мы отмечаем все ссылки 
// с одинаковым значением href
function markLinksWithHref(linkHref)
  {
  var links = document.getElementsByTagName("a");
  if(navigator.appName == 'Microsoft Internet Explorer') linkHref = linkHref.replace("http://"+site+"/", "");
  for (i = 0; i < links.length; i ++)
    {
    if(links[i].href == linkHref || links[i].href == linkHref+"/") links[i].className = "curPage";
    else links[i].className = "";
    }
  }

Мы получили данные в формате XML и теперь нам нужно их распарсить и заменить заголовок и содержание текущей страницы. Аргументом функции будет полученный XML.

function parseGetData(data)
  {
  //получаем заголовок и содержание страницы из XML
  title = data.getElementsByTagName('title');
  cnt = data.getElementsByTagName('content');

  //вставляем это в нашу страницу
  $('#content').html(cnt[0].firstChild.nodeValue);
  document.title = title[0].firstChild.nodeValue;

  // обновляем ссылки внутри страницы
  setupNewLinks(document.getElementById('content'));
  markLinksWithHref(window.location.href);
  }

Итак,мы реализовали пункты 1 и 3. Сделаем пункт 2. При каждой загрузке страницы (или клике на кнопки «назад» или «вперед») мы будем проверять адрес и показывать пользователю нужную ему страницу. Заметим, что проверка при первой загрузке и переходе из истории немного отличаются.

function checkAnchorOnload()
  {
  // определяем полный путь и якорь страницы
  var urlPathName = location.pathname;
  var urlAnchor = location.hash;

  // проверяем адрес, если пользователь первый раз 
  //вошел на сайт. Если в адресе есть якорь, то 
  // подгружаем страницу
  if(start == 'yes')
    {
    if(urlPathName != "/")
      {
      location.href = "http://"+site+"/#"+urlPathName;
      }
    else if(urlAnchor != "" && urlAnchor.indexOf("#/") != -1)
      {
      getDataAjax(urlAnchor.replace("#", ""));
      }
    }
  // примерно такая же проверка, но только при нажатии 
  // "назад" или "вперед" в браузере
  else if(start == '')
    {
    if(urlPathName == "/")
      {
      if(urlAnchor == "" || (urlAnchor == "#" && navigator.appName == 'Microsoft Internet Explorer'))
        {
        getDataAjax("http://"+site+"/");
        }
      else if(urlAnchor.indexOf("#/") != -1)
        {
        getDataAjax(urlAnchor.replace("#/", ""));
        }
      }
    }
  }

Рассмотрим функцию, которая будет «слушать» изменение истории и реагировать на нажатия кнопок «назад» и «вперед».

function historyHandler() {
  var stateVar = "nothin'", displayDiv = document.getElementById("content");

  this.getNewHistoryState = function(currentState) {
    var newVal = currentState;
    unFocus.History.addHistory(newVal);
  };

  this.historyListener = function(historyHash) {
    stateVar = historyHash;
    // при каждом изменении истории мы будем
    // выдавать соответствующий контент
    checkAnchorOnload();
  };
  unFocus.History.addEventListener('historyChange', this.historyListener);

  this.historyListener(unFocus.History.getCurrent());
};
var historyVar;

Мы написали все необходимые функции, осталось только «привязать» их к странице.

function init()
  {
  setupNewLinks(document); // переписываем адреса ссылок
  historyVar = new historyHandler(); // запоминаем историю
  start = '';
  }

Лучше всего вызывать эту функцию либо при загрузке DOM, либо в конце самого документа.

В итоге получился вот такой сайт.

Оригинал статьи на Временно.нет. Взято с хабр.ру.