Поделиться через

О возможностях клиента

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

Возможности клиента состоят из информации о среде браузера, такой как разрешение и размеры экрана, глубина цвета, процессор или скорость соединения. Браузер Microsoft Internet Explorer 4.0 открывает информацию о возможностях клиента посредством объектной модели динамического HTML (DHTML). В версии Internet Explorer 5 эта возможность была усовершенствована еще больше и стала включить средства для установки компонентов браузера по требованию. Начиная с версии Internet Explorer 5, эта информация инкапсулируется в моделях поведения DHTML и доступна в качестве одной из моделей поведения по умолчанию.

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

  • Преимущества решения на стороне клиента
  • Получение информации о возможностях клиента
  • Смешанный клиентско-серверный подход
  • Связанные темы

Преимущества решения на стороне клиента

До выпуска Internet Explorer 4.0 единственным способом получения информации о возможностях клиента были куки-файлы. Сервер Microsoft Internet Information Server (IIS) предоставил еще один механизм посредством компонента Browser Capabilities. Однако этим двум методам свойственны ограничения. Показывая информацию о возможностях на стороне клиента, браузер Internet Explorer 4.0 предоставляет решение, которое стало попыткой преодолеть эти ограничения.

Использование куки-файлов

Следующая диаграмма иллюстрирует, что происходит, когда пользователь вводит URL сайта, который требует определенные возможности клиента.

1) Клиент отправляет запрос на сервер. 1) Клиент отправляет запрос на сервер.
2) Сервер возвращает скрипт, получающий информацию. 2) Сервер отправляет страницу, включающую клиентский скрипт, чтобы получить информацию.
3) Клиент выполняет скрипт и сохраняет информацию в куки-файле. 3) Клиент выполняет скрипт и отображает страницу.
4) Клиент отправляет куки на сервер.  
5) Сервер обрабатывает информацию в куки и генерирует страницу для клиента.  
6) Сервер отправляет клиенту созданную для него страницу, и клиент отображает ее.  

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

Ограничения на стороне сервера -------------------- БОКОВАЯ КОЛОНКА ------------------------- Решение на стороне клиента
Каждый раз, когда информация о возможностях клиента отправляется в куки как часть клиентского запроса, сервер тратит драгоценное время на создание содержимого по запросу клиента. Если возможности клиента предоставляются на стороне клиента, то нет нужды передавать куки туда и обратно. Вся обработка производится на компьютере клиента, и на сервере ничего не происходит. Это дает серверу больше времени на обработку запросов других клиентов.
Поскольку сервер генерирует индивидуальную страницу по каждому клиентскому запросу, эту страницу невозможно кэшировать. Возможности клиента предоставляют способ перевести процесс создания содержимого с сервера обратно на клиентский компьютер. Поскольку сервер отправляет одну и ту же страницу по каждому клиентскому запросу по одному и тому же URL, эта страница кэшируется. Следовательно, каждый последующий клиентский запрос по тому же самому URL может быть напрямую обработан кэшем, а не посредством дорогостоящей передачи информации на сервер и обратно.
В многопользовательской среде, где запросы направляются через прокси-сервер в Интернете, это ограничение еще более очевидно. Рассмотрим тот же самый сценарий с 1000 пользователей. Если каждый из этих пользователей запросит одну и ту же страницу по меньшей мере два раза, сервер вынужден отвечать 2000 раз, чтобы обслужить все эти запросы, потому что страница использует куки и поэтому не может быть помещена в кэш на прокси-сервере. Поскольку решение на стороне клиента позволяет кэшировать страницу, прокси обращается на сервер единственный раз – когда пользователь впервые запрашивает страницу. Каждый последующий запрос к той же самой странице обслуживается напрямую из кэша прокси, а не с сервера. Рассмотрим ту же самую среду с 1000 пользователей. В этом случае получается один запрос вместо 2000 запросов. Это показывает значительное сокращение количества обращений на сервер, и в результате увеличивается производительность и на стороне клиента, и на стороне сервера.

Использование компонента Browser Capabilities

Компонент Browser Capabilities сервера IIS предоставляет информацию о возможностях, поддерживаемых браузером, сравнивая информацию об агенте пользователя из заголовков HTTP-запроса с записями в файле Browscap.ini, который сопоставляет Значения строк User-Agent со списком свойств, про которые известно, что они поддерживаются в определенной версии браузера. После этого серверные скрипты могут выдавать клиенту настроенное специально для него содержимое, основываясь на этой информации.

Каждая запись в файле Browscap.ini доступна как свойство компонента Browser Capabilities. В следующем примере показано, как можно проверить, поддерживаются ли элементы управления Microsoft ActiveX.

<% Set objBC = Server.CreateObject("MSWC.BrowserType")

   If objBC.ActiveXControls Then %>

   <!-- HTML that implements the ActiveX control. -->

<% Else %>

   <!-- HTML that uses an alternate presentation. -->

<% End If %>

Этот подход также налагает ограничения. В следующей таблице приведено краткое сравнение решений на стороне сервера и на стороне клиента.

Ограничения на стороне сервера -------------------- БОКОВАЯ КОЛОНКА ------------------------- Решение на стороне клиента
Компонент полагается на файл Browscap.ini, который содержит статический список возможностей клиента для заданных версий браузера. Поскольку этот файл сам по себе статичен, он обновляется каждый раз, когда появляется новая версия браузера. Открытие информации о возможностях клиента в браузере решает эту проблему обходным путем, делая ту же самую информацию доступной динамически, как часть объектной модели, и давая возможность получать доступ к ней из скрипта.
Статический список, который ведется в файле Browscap.ini, не отвечает за настройки, которые клиент может по мере надобности включать и отключать. Этот список также не предоставляет информацию, не зависящую от версии — например, данные о том, установлены ли на клиентской системе определенные компоненты. Среди информации о возможностях клиента содержатся такие данные, как разрешение и размеры экрана, доступная пропускная способность, поддержка куки или Java, глубина цвета, язык, а также данные о том, какие компоненты установлены у клиента.

Получение информации о возможностях клиента

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

Этот тип информации появился в версии Internet Explorer 4.0 как набор улучшений объектной модели DHTML, сделав эти данные легко доступными из скриптов на стороне клиента. В большинстве случаев эта информация предоставлялась в виде свойств объекта navigator, который содержит информацию о браузере. В других случаях эта информация доступна в виде свойств объекта screen.

В следующей таблице кратко описана информация о возможностях клиента, предоставляемая начиная с версии Internet Explorer 4.0

Возможность клиента Описание
availHeight Получает высоту рабочей области экрана системы, за исключением панели задач Microsoft Windows.
availWidth Получает ширину рабочей области экрана системы, за исключением панели задач Windows.
bufferDepth Устанавливает или получает количество битов на пиксель, используемое для цветов во внеэкранном буфере растровых изображений.
colorDepth Устанавливает или получает количество битов на пиксель, используемое для цветов в целевом устройстве или буфере.
cookieEnabled Получает информацию о том, включено ли в браузере использование куки.
cpuClass Получает строку, обозначающую класс процессора.
height Получает вертикальное разрешение экрана.
javaEnabled Возвращает информацию о том, включено ли использование Java.
platform Получает имя операционной системы пользователя.
systemLanguage Получает информацию о том, какой язык по умолчанию используется в системе.
userLanguage Получает информацию о выбранном в данный момент языке пользователя.
width Получает горизонтальное разрешение экрана.

Дополнительные подробности реализации можно найти в следующем примере.

Пример кода:

В следующем примере загружается подходящее изображение, в зависимости от количества цветов, поддерживаемого экраном клиента. Если скрипт обнаруживает, что поддерживается менее 256 цветов (или 8 бит на пиксель), то показывается изображение, содержащее 16 цветов; в противном случае показывается изображение с более высоким разрешением. В результате цвета лучше соответствуют возможностям экрана клиента, и улучшается качество взаимодействия с пользователем.

<img id="myImage" src="16color.bmp" width=200 height=200>

<script>

if (window.screen.colorDepth >= 8)

    myImage.src = "256color.bmp";

</script>

Что касается браузера Internet Explorer 5, информация о возможностях клиента стала доступной в качестве одной из моделей поведения браузера по умолчанию. В этой модели поведения инкапсулированы все свойства, информация о которых доступна в браузере Internet Explorer 4.0, а также набор новых свойств и методов, которые позволяют веб-приложениям устанавливать компоненты браузера по требованию. Полный список свойств и методов можно найти в справочнике по модели поведения clientCaps.

В следующем примере показано использование модели поведения clientCaps для получения некоторой части доступной информации о возможностях клиента. Дополнительные сведения о моделях поведения и их использовании на странице см. в разделе Связанные темы.

Смешанный клиентско-серверный подход

Примечание Этот подход требует Microsoft Internet Information Services (IIS) 5.0 и использует клиентские куки.

Хотя преимущества очевидны, в чистом виде решение на стороне клиента может сработать не для всякого веб-приложения. В некоторых случаях веб-разработчик мог бы предпочесть использовать решение на стороне сервера, пренебрегая недостатками куки-файлов. Для таких случаев Internet Explorer 5 и IIS5.0 предлагают способ доступа к информации о возможностях клиента из страниц ASP, сочетающий использование куки-файлов и серверного компонента Browser Capabilities. Что касается сервера IIS 5.0, компонент Browser Capabilities был расширен, чтобы включать информацию о возможностях клиента в виде свойств компонента.

Для сбора информации о пользователе, браузер будет возвращать запрошенную информацию в куки под именем BrowsCap, которую запрашивает интерпретатор ASP, когда страница исполняется впервые. Пары имя/значение из куки добавляются как свойства в объект Browser Capabilities, откуда их может получить серверный скрипт.

Детали реализации

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

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

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

    <html xmlns:IE>

    <head>

    <style>

     IE\:clientcaps {behavior:url(#default#clientcaps)}

    </style>

    </head>

    <body onload="createCookie();">

    <IE:clientcaps ID="oClientCaps" />

    <script language="JavaScript"><!--

    function createCookie() {

        // Internet Explorer 5 and later

        strCookie = 'width=' + oClientCaps.width

               + '&height=' + oClientCaps.height

               + '&availWidth=' + oClientCaps.availWidth

               + '&availHeight=' + oClientCaps.availHeight

               + '&bufferDepth=' + oClientCaps.bufferDepth

               + '&colorDepth=' + oClientCaps.colorDepth

               + '&cookies=' + oClientCaps.cookieEnabled

               + '&javaapplets=' + oClientCaps.javaEnabled

               + '&connectionType=' + oClientCaps.connectionType

               + '&cpuClass=' + oClientCaps.cpuClass

               + '&platform=' + oClientCaps.platform

               + '&systemLanguage=' + oClientCaps.systemLanguage

               + '&userLanguage=' + oClientCaps.userLanguage;

        // Set the cookie

        document.cookie = "BrowsCaps=" + strCookie;

    }

    --></script>

    </body>

    </html>

    Имена свойств и их соответствующие значения собираются в разделенный амперсандом список пар имя/значение. Для куки-файлов свойственно сохранять информацию в виде "имя=значение". Дополнительные сведения см. в статье куки-файлы.

  2. Можно добавлять столько пар имя/значение, сколько нужно. Имена свойств, указанные слева от знака равенства, не обязаны совпадать с именами фактических свойств в объектной модели DHTML. Имя, которое указывает разработчик, будет использоваться для доступа к свойству из серверного скрипта.
  3. Установите в качестве значения куки BrowsCap результирующую строку, включающую все пары имя/значение. Куки передается обратно на сервер.

Далее, создайте файл новой страницы ASP или модифицируйте существующий.

  1. Вставьте следующий тег METADATA первой строкой в ASP-файл. Убедитесь, что в качестве значения атрибута SRC установлено имя файла, созданного выше.

    <!--metadata type="Cookie" name="BrowsCap" src="InsertNameHere.htm"-->

  2. Создайте экземпляр компонента Browser Capabilities.

    Есть два способа сделать это. Один способ — вставить этот тег object в страницу.

    <object id=myBrowsCap progid="MSWC.BrowserType" runat="Server"></object>

    Другой способ — вызвать в ASP метод Server.CreateObject и назначить значение переменной myBrowsCap.

    <% Set myBrowsCap = Server.CreateObject("MSWC.BrowserType") %>

  3. Когда создан экземпляр компонента Browser Capabilities, он разбирает строку куки, чтобы найти значения отдельных свойств. Далее эти значения будут доступны серверному скрипту как свойства компонента.

    <%

       Response.write("width= "         +myBrowsCap.width          + "<br>")

       Response.write("height= "        +myBrowsCap.height         + "<br>")

       Response.write("availWidth= "    +myBrowsCap.availWidth     + "<br>")

       Response.write("availHeight= "   +myBrowsCap.availHeight    + "<br>")

       Response.write("bufferDepth= "   +myBrowsCap.bufferDepth    + "<br>")

       Response.write("colorDepth= "    +myBrowsCap.colorDepth     + "<br>")

       Response.write("cookies= "       +myBrowsCap.cookies        + "<br>")

       Response.write("javaapplets= "   +myBrowsCap.javaapplets    + "<br>")

       Response.write("cpuClass= "      +myBrowsCap.cpuClass       + "<br>")

       Response.write("platform= "      +myBrowsCap.platform       + "<br>")

       Response.write("systemLanguage= "+myBrowsCap.systemLanguage + "<br>")

       Response.write("userLanguage= "  +myBrowsCap.userLanguage   + "<br>")

    %>

Связанные темы