Ромка!eu

  • Отдых
  • Работа
Главная — Блоги — Ромка's blog

Получение заголовков (HTTP-headers) страницы при помощи Java-script

  • Просмотреть
  • Голоса

Ромка — Пнд, 09/15/2008 - 14:48

634
points

В журнале Smashing Magazine наткнулся на скрипт (плагин для jQuery), позволяющий автоматически рядом с ссылками указывать размер файла, на который указывает эта ссылка. Оказалось, что этот скрипт в своей работе использует полезный сервис, под названием json-head, который на входе принимает любой URL, а на выходе в формате JSON отдает заголовки, которые получил от сервера.

Анализируя эти заголовки можно на стороне клиента придумать много полезных фишек, кроме указания размера документа, на который ведет ссылка, можно, например, подсвечивать ссылки на недавно обновленные страницы (заголовок "Last-Modified") или нерабочие ссылки (анализ переменной "status_code").

Все те же действия можно проделывать и не используя сторонние сервисы, но в таком случае опрос удаленных серверов и анализ заголовков придется реализовать на стороне своего сервера, со всеми вытекающими отсюда достоинствами (независимость от сторонних сервисов и того, включена на стороне клиента поддержка Java-script или нет) и недостатками (в случае большого количества запросов забанят ip вашего сервера, а не ip сервера http://json-head.appspot.com ну и необходимость разработки собственного решения).

Кстати, с помощью этого сервиса, совершенно случайно выяснил, что Гугл работает с использованием веб-сервера собственной разработки — gws, по данным из Википедии на этом ПО работает 9,3% всех сайтов в интернете, то есть Гугл — это и есть почти 10% интернета!

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

Пример приведу на основе скрипта, указывающего размер документа, на который ведет ссылка. Работать со скриптом просто, его надо скачать и подключить к своей странице:

<?php
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="addSizes.js" type="text/javascript" charset="utf-8"></script>
?>

После чего все ссылки на файлы с расширениями *.mp3, *.pdf, *.doc будут дополнены информацией о размерах файлов.

Внимание! Важно учитывать то, что информация о размере файла берется из HTTP-заголовка "Content-Length", некоторые веб-сервера могут его не отдавать и для ссылок на файлы с таких серверов размер указан не будет.

Скрипт addSizes.js можно легко модифицировать под свои цели, например можно добавить показ размера для всех внешних ссылок, для этого строчку:

<?php
$('a[href$=".pdf"], 'a[href$=".doc"], a[href$=".mp3"], a[href$=".m4u"]).each(function(){
?>

нужно доработать таким образом:
<?php
$('a[href$=".pdf"], 'a[href$=".doc"], a[href$=".mp3"], a[href$=".m4u"], a[target$=_blank]).each(function(){
?>

Кроме того, я рекомендую заменить строчку:
<?php
link
.after(' (' + type + ' ' + length + ' ' + lengthUnits + ')');
?>
на:
<?php
link
.after(' <span class="filesize">(' + type + ' ' + length + ' ' + lengthUnits + ')</span>');
?>

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

Работающий пример находится здесь: http://romka.eu/examples/autosize/index.html, в нем я, кроме вывода информации о размере документа, добавил вывод даты его последнего изменения, в случае если нет заголовка "Content-Length".

P.S. Хотите быстрее всех получать информацию об обновлениях на этом сайте? Тогда подпишитесь на RSS-канал ;)

  • java-script
  • jquery
  • Штуки-дрюки
  • Ромка's blog
  • Quote

Как проверить с jQuery загрузил ли браузер все картинки

Anonymous → Пнд, 10/13/2008 - 17:01

Здравствуйте подскажите пожалуйста как мне определить, загружены ли все картинки браузером, надо на javascript? жедательно на jQuery.
У меня не известно не количество картинок, не их имена. Многие советуют использовать событие onload на картинке, но мне это не подходит, мне просто нужно проверить все ли браузер загрузил или еще нет. Вот как это реадизовать не знаю, подсказали с помощью заголовков, но я с ними не работала. Подскажите как быть.

  • ответить
  • quote
  • -25 points

Для jQuery есть плагин onImagesLoad

Ромка → Втр, 10/14/2008 - 01:45

Для jQuery есть плагин onImagesLoad, который умеет вызывать какую-нибудь функцию после загрузки изображений. Пример из документации к плагину:

<?php
<script type="text/javascript" src="jquery.onImagesLoad.js"></script>

<script type="text/javascript">
$(function(){
   // После загрузки всех изображений из контейнера с id=imageSectionOne вызываем функцию allImagesLoaded
   $('#imageSectionOne').onImagesLoad({
      callback: allImagesLoaded
   });
   // После загрузки всех изображений из контейнера с id=imageSectionTwo вызываем функцию allImagesLoaded
   $('#imageSectionTwo').onImagesLoad({
      callback: allImagesLoaded
   });

    //handle onImagesLoad events
   function allImagesLoaded(container){
      $(container).prepend('<div class="doneLoading">(All images have loaded in node="'+container.nodeName+'", ID="'+container.id+'")</div>');
   }
});
</script>
?>

Если зменить, например

<?php
   
$('#imageSectionTwo').onImagesLoad({
      
callback: allImagesLoaded
   
});
?>

на
<?php
   
$('body').onImagesLoad({
      
callback: allImagesLoaded
   
});
?>

, то функция будет вызвана после загрузки всех изображений.

Кроме того есть еще плагин elementReady, имеющий похожий функционал, но он привязывается не к контейнеру (слою, параграфу и т.п.), а к конкретному объекту (картинке).

  • ответить
  • quote
  • -15 points

Помогите пожалуйста

Денис (не проверено) → Ср, 01/06/2010 - 18:56

Я полазил в инете и понял что вроде как я не могу написать свою страничку со скриптами, которая состояла бы из одной формы где бы я ввел URL сайта например http://ya.ru, скрипты бы сделали запрос и вернули html код этого сайта.
Такж е понял что вроде так нельзя сделать и средствами Ajax.
А мне позарез надо с этим разобраться. Вообще мне нужно что-то типа валидатора битых ссылок.
Я хотел получить код, вставить его себе в страницу(скрытый фрейм) и найти теги и делать запросы на ссылки тем же методом что и запрос основного сайта, URL которого указан в форме.
Подскажите что делать?

  • ответить
  • quote
  • -3 points

индия курсовые по физике

Anonymous (не проверено) → Ср, 02/17/2010 - 00:37

индия курсовые по физике рефераты по физике дипломные по географии курсовые по географии обои к шоу обои для рабочего стола в мире сказок сказки тюннинг автомобилей тюннинг искусство массажа українські дипломні роботи українські реферати китай компьютерные сети сложные сети seropol5

  • ответить
  • quote
  • -17 points

tv series wallpapers tv show

Anonymous (не проверено) → Ср, 04/14/2010 - 13:57

tv series wallpapers tv show wallpapers tv subs tv shows subs дипломные работы сочинения seropol5

  • ответить
  • quote
  • -2 points

география путешествия tv

Anonymous (не проверено) → Ср, 04/14/2010 - 14:00

география путешествия tv series wallpapers tv wallpapers subtitles tv subs movies subtitles субтитры к сериалам субтитры к сериалам subtitles tv show and tv series subtitles дипломные работы рефераты субтитры к фильмам seropol5

  • ответить
  • quote
  • -8 points

Построени дерева с помощью jQuery.treeview

Василий (не проверено) → Чт, 05/20/2010 - 17:37

Здравствуйте Роман!
Предлагаю Вам рассказать про то как работать с плагином jquery.treeview.js, а именно как асинхронно достраивать "детей" веток.
Пролазил весь интернет и никак не могу разобраться.

С уважением, Василий

  • ответить
  • quote
  • -26 points

Через JavaScript нельзя

Максим (не проверено) → Сб, 05/22/2010 - 18:21

Через JavaScript нельзя смотреть заголовки ответа сервера. Так как JS срабатывает уже когда страница загружена :)
А я заголовки ответа сервера смотрю всегда через сервис http://h.zeos.in/ ну или есть куча подобных. Этот мне понравился, что тут нет никакой рекламы и всё работает быстро и красиво и удобно сделано.

  • ответить
  • quote
  • -21 points

чтение строки из файла

Anonymous (не проверено) → Втр, 09/21/2010 - 11:47

Добрый день!

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

Спасибо заранее.

  • ответить
  • quote
  • -16 points

Нельзя!

Anonymous (не проверено) → Ср, 10/20/2010 - 20:46

Нельзя!

  • ответить
  • quote
  • -11 points

можно )

Anonymous (не проверено) → Чт, 03/10/2011 - 00:56

можно )

  • ответить
  • quote
  • -9 points

Отправить комментарий

Содержание этого поля является приватным и не предназначено к показу.
  • Доступны HTML теги: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Строки и параграфы переносятся автоматически.
  • Вы можете использовать тэг <code></code> для подсветки синтаксиса программного кода. The supported tag styles are: <foo>, [foo].
  • You may quote other posts using [quote] tags.

Подробнее о форматировании

CAPTCHA
Если вы человек, а не робот, то введите текст с картинки. Если вы робот, то велкам ту майкрософт.ком.

Обо мне

Всем привет!
Меня зовут
Роман Архаров, я профессиональный веб-разработчик, программирую на языках PHP, Python и Action-Script, в работе использую фреймворки Drupal и Django. В этом блоге я размещаю заметки и статьи, связанные с моей работой, отдыхом и другими интересными мне темами.

Похожие заметки

  • Перетаскивание строк таблицы. Table drag and drop — плагин для jQuery
  • Автоматическая "газетная" верстка (верстка в несколько колонок)
  • Вращение изображений при помощи Javascript
  • Tagnetic — холодильник тэгов
  • Баг jQuery в Firefox 3 и WebKit

Популярные заметки

  • Пример разработки плагина для модуля CCK
  • AJAX. Обмен данными между клиентом и сервером, закачка на сервер файлов без перезагрузки страницы при помощи библиотеки jQuery.
  • Модуль Vote Up/Down для Drupal 6
  • Темизация Drupal. Часть 1
  • Темизация Drupal. Часть 2. Анатомия темы оформления Drupal
  • Кнопки Home, End и Page Up, Page Down в Mac OS
  • Авторизация на Drupal-сайте с помощью аккаунта ВКонтакте
  • Темизация Drupal. Часть 3. Основы Drupal Forms API и темизация форм
  • Вращение изображений при помощи Javascript
  • Темизация Drupal. Часть 4. Темизация Views

Подписка


Последние комментарии

  • Oz → Швабрашвабр2 → слабовато для
  • loan → Вращение изображений при помощи Javascript → answer this topic
  • CopelandLacey33 → Доставка → reply this post
  • vitsss → Авторизация на Drupal-сайте с помощью аккаунта вКонтакте → hostinh nic.ru and vk api
  • dimasikov → Автоматическая "газетная" верстка (верстка в несколько колонок) → Я похожее делал для с этим
  • max2012 → Разработка сайта на Drupal. Часть 2. Архитектура Drupal. → Подвесные потолки Опосля
  • Антон → Темизация Drupal. Часть 4. Темизация Views → Отлично!
  • Itsmypersonal → Зима 2010. Поездка в Тайланд, Индонезию и Сингапур. Часть 2 — Пхукет → Пхукет - да!
  • Sheldon → Перетаскивание ячеек таблицы. Table drag and drop — плагин для jQuery → Здравствуйте! Подскажите
  • Sheldon → Home sheep home → Одна из тех игр в которые

Новые заметки

  • Проба пера в HTML5 + canvas. Эффект ластика
  • Шесть рукопожатий
  • Доклад на DrupalConfMoscow 2011
  • Статусы разных сущностей в Друпале 6
  • Футер, прибитый к низу страницы
  • Путешествие по Перу и Боливии. Часть 2
  • Путешествие по Перу и Боливии. Часть 1
  • Несколько панорам из путешествия по Перу и Боливии
  • Авторизация на Drupal-сайте с помощью аккаунта ВКонтакте
  • Home sheep home

Тэги

dckyiev09 Drupal jquery Боливия Отдых Перу Работа Штуки-дрюки зима 2010 модуль статья темизация
еще тэги

Вход для пользователей

Что такое OpenID?
  • Войти по OpenID
  • Скрыть вход по OpenID
  • Зарегистрироваться
  • Запросить новый пароль

Навигация

  • Exchange rate
  • Vote up/down
  • Переход по внешней ссылке
  • Последние сообщения
  • Фотогалереи

Курсы валют

  • 100 Казахских тенге — 20,3352 (0)
  • 10 Украинских гривен — 37,6101 (0)
  • 10 Китайских юаней — 47,9611 (0)
  • 100 Японских иен — 39,6909 (0)
  • 1 Доллар США — 30,2385 (0)
  • 1 Евро — 39,7425 (0)
  • 10000 Белорусских рублей — 35,9554 (0)
  • 1 Турецкая лира — 17,1829 (0)

10 случайных заметок

  • Drupal for Firebug
  • Куба, остров Святой Марии.
  • Старый смешной мультик
  • Разработка сайта на Drupal. Часть 6. Оптимизация Друпал
  • Зима 2010. Поездка в Тайланд, Индонезию и Сингапур. Часть 2 — Джокьякарта
  • Вспомнил детство
  • Зима 2010. Поездка в Тайланд, Индонезию и Сингапур. Часть 3 — Бали, Сингапур, Пхукет
  • Проба пера в HTML5 + canvas. Эффект ластика
  • Еще одна очень меткая картинка
  • Backbird — скажи "прощай" алертам или удобная отладка java-script.

Случайные фото

Без имени
Желтый арбуз! Ммм, юмми!
Автописта
Эль перро
Я на
Просто море
Старая и новая наши машины — пыжик и сузуки джимни
Копенгаген, Кристиания, Граффити 5
Вид на Мраморную церковь с площади Амалиенборг
Я и разноцветные рыбы
Я и моя тень
Друпликон и моя тень
Копенгаген, Кристиания, Граффити 3
Вид на Осло из замка Акерхус
В пути
Тринидад. Лошадка держит домик
  • Отдых
  • Работа

При использовании материалов с сайта, пожалуйста, ставьте ссылку на источник. E-mail для связи: mne@romka.eu.