Русские документы
Ежедневные компьютерные новости RSS rusdoc.ru  Найти :
Новости
Последние поступления
Книжный магазин
  Hardware:
Видеоустройства
Системные платы
Процессоры
Мобильные устройства
Аудиосистема
Охлаждение системы
Накопители информации
КПК и ноутбуки
Телефоны и связь
Периферия
Система
Сети
Разные устройства
 
  Programming:
Web-разработка
Языки программирования
Технологии и теория
Разработка игр
Программная инженерия
 
  Software:
Операционные системы
Windows 7
Базы данных
Обзоры программ
Графика и дизайн
   
  Life:
Компьютерная жизнь
Разные материалы
   
Партнеры
Публикация
Правовая информация
Реклама на сайте
Обратная связь
Экспорт в RSS Экспорт в RSS2.0
    Читать в Яндекс.Ленте



Google Suggest – взгляд изнутри…

Раздел: Programming / JavaScript @ 29.07.2008 | Ключевые слова: Google Suggest js скрипт версия для печати

Автор: перевод Zyuzin Vitaly
Источник: habrahabr

Разные люди немного разбирались в принципе работы Google Suggest, но я переписал сжатый javascript код так, чтобы каждый обычный разработчик мог подробно узнать, как эта система работает. Моя финальная переписанная версия скрипта доступна здесь.
Я увидел самую крутую штуку, которую я видел с тех пор как обнаружил SOAP-клиент с поддержкой WSDL в браузере Mozilla. Технология предсказания запросов Google Suggest работает в реальном режиме времени. С вводом каждой новой буквы список вариантов обновляется. Скрипт технически восхитителен как минимум по двум причинам:

1. Скорость. Даже при быстрой печати список вариантов поразительно быстро обновляется после каждого нажатия клавиши.

2. Интерфейс. Я пользовался в основном серверным кодом и старался избежать яваскрипта, но стал менять свое мнение о клиентских скриптах, пользуясь впечатляющими интерфейсами gmail, а теперь и google suggest (а также многими другими продуктами Google).

Думаю, что каждый может положительно оценить работу кода по следующим причинам:

1. Выпадающее меню идеально соответствует ширине поисковой строки...

2. Самый подходящий вариант в строке поиска выделен.

3. Отлично реализовано слежение за нажатиями клавиш и положением курсора мыши.

4. Отличная поддержка кэша, так что после нажатия Backspace скрипт не посылает новый запрос на сервер.

5. Динамическая подстройка скорости обновления в зависимости от пинга на Google.

Итак, мне захотелось понять динамический интерфейс этой разработки.
Я сохранил html и javascript локально... Я запустил его и использовал отладку для «расшифровки» обфусцированного скрипта.
Объект XMLHTTP / XMLHttpRequest служит для коммуникации с сервером Google, отправки запросов и получения данных без обновления страницы... Чтобы полность понять код, мне было необходимо знать, что присылает обратно сервер. Но когда я пытался открыть url напрямую, то не получал ничего, кроме 404 ошибки. Я пробовал использовать локальный прокси сервер для браузера, но выяснилось, что объект XMLHttp не использует браузерный прокси при соединении.
Оригинальный обфусцированный скипт Google доступен здесь...

Выполнение скрипта вызывается из HTML-страницы командой InstallAC()…
Интересно, что при этом осуществляется проверка:
var Jb="zh-CN|zh-TW|ja|ko|vi|"
То есть система пытается определить пользователей из Японии, Кореи и Китая, что может говорить о поддержке не только английского, но и азиатских языков.
Функция InstallAC вызывает другую функцию (installACPart2), которая проверяет поддержку браузером XMLHttp и создает ресурс «_completeDiv», куда и направляется контент, полученный с сервера.
Функция mainLoop вызывается периодически используя javascript функцию setTimeout. Интересно заметить, что разработчики решили использовать механизм, основанный на timeout, а не на keydown. Это было сделано для тех пользователей, которые имеют быструю скорость печати и медленное Интернет-соединение. Эта функция выясняет, изменилось ли значение текстового поля, а затем сначала ищет в закешированных данных, а затем отправляет новый запрос к серверу. Код google suggestion также поддерживает старые браузеры, не имеющие в ядре объект XMLHttp, использую технологию cookies и перезагружая фрейм.

Обычный запрос к серверу Google довольно прост. При обращении к серверу формируется строка http://www.google.com/complete/search?hl… (для примера использована фраза "fast bug").

Затем задается _xmlHttp.onchange колбэк-функция, которая получит данные запроса:

sendRPCDone(frameElement, "fast bug", new Array("fast bug track", "fast bugs", "fast bug", "fast bugtrack"), new Array("793,000 results", "2,040,000 results", "6,000,000 results", "7,910 results"), new Array(""));

Эта функция объявляется в файле ac.js. Она задает время основного цикла запроса, кэширует полученные результаты поиска и заполняет ими элемент _completeDiv DIV.

Функция displaySuggestedList отображает полученные результаты, создавая структуру данных из элементов DIV и SPAN. Для каждого элемента в полученном списке структура данных будет иметь следующий порядок:

<DIV class="aAutoComplete">
<SPAN class="lAutoComplete">
<SPAN class="cAutoComplete">
bug tracking
</SPAN (ua)>
<SPAN class="dAutoComplete">
500,000 results
</SPAN (ea)>
</SPAN>
</DIV (u)>


Функция Pa() вызывается тогда, когда данные с сервера получены, а так же когда нажимается кнопка. Она подсвечивает введенный текст.

Это интересно:








версия для печатиРаспечатать статью


Вернуться в раздел: Programming / JavaScript


Реклама:
Читать наc на:

Add to Google
Читать в Яндекс.Ленте






Rambler's Top100
© Copyright 1998-2012 Александр Томов. All rights reserved.