Архив за Июль 2008

Плагины для Firefox

Всё больше и больше web-разработчиков отдают предпочтение FireFox в качестве основного браузера. Поскольку я тоже пользуюсь Firefox, расскажу о нескольких удобных расширениях к браузеру.

Web Developer

Плагин Web Developer позволяет выполнять следующие действия:

  • включать и отключать cookies;
  • включать и отключать выполнение скриптов JavaScript;
  • просматривать и редактировать таблицы стилей CSS и исходный код страницы;
  • отображать подробную информацию об элементах страницы: формах, рисунках, таблицах, гиперссылках, заголовках и т. д.;
  • выделять элементы страницы заданного типа: формы, ячейки таблиц, рисунки и т. д.;
  • отображать подробную информацию о выбранном элементе страницы;
  • просматривать дизайн сайта в различных разрешениях экрана;
  • проверить код HTML и CSS на соответствие стандартам W3C;
  • получить информацию о размере страницы и отдельных типов ее содержимого, а также информацию о времени загрузки страницы с учетом типа используемого соединения;
  • и многое другое.

DOM Inspector

В третьей версии Firefox инспектор DOM был удалён из сборки, но может быть установлен как дополнение.

Инспектор DOM позволяет просмотреть структуру документа в виде дерева с подробной информацией по каждому элементу.

Чтобы получить информацию об элементе страницы, нажмите кнопку со стрелкой-указателем на панели инструментов инспектора DOM, затем щелкните по этому элементу на странице. В правой части окна появится описание элемента, а сам элемент будет выделен в структуре дерева.

Firebug

Прекрасной альтернативой (или дополнением) к плагину Web Developer служит расширение Firebug. Плагин обладает примерно теми же возможностями, что и Web Developer, но есть и приятные мелочи, например отладчик скриптов JavaScript.

Откроем рабочее окно расширения Firebug (пункт меню “Инструменты – Firebug – Open Firebug”). В левой части окна плагина расположен набор вкладок, реализующих его основные возможности:

  • консоль JavaScript (Console);
  • редактор исходного кода (HTML);
  • редактор таблицы стилей CSS;
  • отладчик скриптов JavaScript (Script);
  • инспектор DOM;
  • вкладка со статистикой загрузки отдельных элементов страницы (Net).

PageDiff

Плагин Page Diff позволяет сравнить код двух веб-страниц, например локальной копии страницы и ее серверной копии. После установки плагина в контекстном меню браузера появятся пункты Start DIFF и Show DIFF. Чтобы сравнить код двух веб-страниц, нужно выбрать пункт Start DIFF на одной из них и Show DIFF - на другой. После этого откроется окошко с результатами сравнения.

Консоль ошибок

Еще один инструмент для веб-разработки уже есть в базовой конфигурации браузера - консоль ошибок JavaScript.

В окне консоли ошибок отображаются предупреждения JavaScript, а также ошибки и предупреждения CSS с указанием номеров строк кода. Эта информация незаменима при отладке скриптов JavaScript, а также дает некоторое представление о соответствии кода стандартам W3C.

Общее представление об AJAX. Часть 5

Получение множественных данных от сервера

По умолчанию свойство responxeText используется лишь однократно, поэтому все данные, возвращаемые сервером, помещаются в одной строке. Но зачастую при вызове посредством объекта XMLHttpRequesr требуется получить в ответ не один, а множество фрагментов данных. Эту задачу можно решить по-разному, но, вероятно, самый простой способ состоит в том, чтобы возвратить множественные данные, разделив их фрагменты специальным символом, который отсутствует в самих данных (например, символом табуляции или перевода строки). А обработку полученной информации можно выполнить средствами JavaScript.

В нашем примере по протоколу HTTP на сервере запрашивается приведенный ниже текстовой файл multiple.txt. (В реальной ситуации на сервере для этих целей обычно служит динамический сценарий, но для демонстрации самого принципа подойдет и статический текстовой файл.)

first
second
third

В приведенном ниже коде осуществляется доступ к отдельным фрагментам возвращаемых данных:

var XMLHttp = getXMLHttp();
XMLHttp.open("GET", "multiple.txt", true);
XMLHttp.onreadystatechange = handlerFunction;
XMLHttp.send(null);

function handlerFunction() {
  if (XMLHttp.readyState == 4) {
    var data = XMLHttp.responseText.split("\n");
    window.alert(data[0] + " " + data[1] + " " + data[2]);
  }
}

function getXMLHttp() {
  var XMLHttp = null;
  if (window.XMLHttpRequest) {
    try {
      XMLHttp = new XMLHttpRequest();
    } catch (e) { }
  } else if (window.ActiveXObject) {
    try {
      XMLHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) { }
    }
  }
  return XMLHttp;
}

Прерывание запроса HTTP

В зависимости от типа браузера одновременно допускается ограниченное число запросов. При наличии множества компонентов AJAX на странице это может привести к серьёзным осложнениям. В таком случае может возникнуть потребность в прерывании запроса HTTP.

Для этой цели служит метод abort(). В приведенном ниже фрагменте кода запрос прерывается только в том случае, если он не был полностью выполнен по истечении пяти секунд. Такой режим работы демонстрируется с помощью PHP-скрипта delay.php, выполняющегося с задержкой 10 секунд:

<?php
  sleep(10);
  echo 'результат запроса';
?>

При этом проверяется значение свойство readyState. Если оно принимает значение 0 или 4, то прерывать, собственно, нечего.

var XMLHttp = getXMLHttp();
XMLHttp.open("GET", "delay.php?" + Math.random(), true);
XMLHttp.onreadystatechange = handlerFunction;
XMLHttp.send(null);
window.setTimeout("timeout();", 5000);

function handlerFunction() {
  if (XMLHttp.readyState == 4) {
    window.alert("Returned data: " + XMLHttp.responseText);
  }
}

function timeout() {
  if (XMLHttp.readyState != 4 && XMLHttp.readyState != 0) {
    XMLHttp.onreadystatechange = function() { };
    XMLHttp.abort();
    window.alert("Request aborted");
  }
}

function getXMLHttp() {
  var XMLHttp = null;
  if (window.XMLHttpRequest) {
    try {
      XMLHttp = new XMLHttpRequest();
    } catch (e) { }
  } else if (window.ActiveXObject) {
    try {
      XMLHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) { }
    }
  }
  return XMLHttp;
}

Ссылки по теме:

Общее представление об AJAX. Часть 4

Отправка синхронного запроса

В большинстве случаев запросы HTTP, формируемые посредством объекта XMLHttpRequest, являются асинхронными. Именно поэтому и требуется функция обратного вызова. Но если указать логическое значение false в качестве третьего параметра метода open(), запрос станет синхронным, а это означает, что выполнение сценария приостанавливается до тех пор, пока от сервера не возвратятся данные. В следующем фрагменте кода демонстрируется отправка синхронного запроса:

<script type="text/javascript">
function syncRequest() {
  var XMLHttp = getXMLHttp();
  XMLHttp.open("GET", "sync.php", false);
  XMLHttp.send(null);
  document.getElementById("output").innerHTML =
    "Returned data: " + XMLHttp.responseText;
}

function getXMLHttp() {
  var XMLHttp = null;
  if (window.XMLHttpRequest) {
    try {
      XMLHttp = new XMLHttpRequest();
    } catch (e) { }
  } else if (window.ActiveXObject) {
    try {
      XMLHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) { }
    }
  }
  return XMLHttp;
}</script>
<p id="output"></p>
<input type="button" value="Send" onclick="syncRequest();" />

Серверный скрипт sync.php

<?php
  sleep(5);
  echo 'Server response';
?>

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

Ссылки по теме: