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

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

Ромка аватар

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

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

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

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

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

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

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

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

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

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

  1. $('a[href$=".pdf"], 'a[href$=".doc"], a[href$=".mp3"], a[href$=".m4u"]).each(function(){

нужно доработать таким образом:

  1. $('a[href$=".pdf"], 'a[href$=".doc"], a[href$=".mp3"], a[href$=".m4u"], a[target$=_blank]').each(function(){

Кроме того, я рекомендую заменить строчку:

  1. link.after(' (' + type + ' ' + length + ' ' + lengthUnits + ')');

на:

  1. link.after(' <span class="filesize">(' + type + ' ' + length + ' ' + lengthUnits + ')</span>');

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

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

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

13 Comments

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

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

Ромка аватар

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

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

  1. <script type="text/javascript" src="jquery.onImagesLoad.js"></script>
  2.  
  3. <script type="text/javascript">
  4. $(function(){
  5. // После загрузки всех изображений из контейнера с id=imageSectionOne вызываем функцию allImagesLoaded
  6. $('#imageSectionOne').onImagesLoad({
  7. callback: allImagesLoaded
  8. });
  9. // После загрузки всех изображений из контейнера с id=imageSectionTwo вызываем функцию allImagesLoaded
  10. $('#imageSectionTwo').onImagesLoad({
  11. callback: allImagesLoaded
  12. });
  13.  
  14. //handle onImagesLoad events
  15. function allImagesLoaded(container){
  16. $(container).prepend('<div class="doneLoading">(All images have loaded in node="'+container.nodeName+'", ID="'+container.id+'")</div>');
  17. }
  18. });
  19. </script>

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

  1. $('#imageSectionTwo').onImagesLoad({
  2. callback: allImagesLoaded
  3. });

на
  1. $('body').onImagesLoad({
  2. callback: allImagesLoaded
  3. });

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

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

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

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

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

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

tv series wallpapers tv show

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

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

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

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

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

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

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

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

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

Добрый день!

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

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

Нельзя!

Нельзя!