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
Реклама:
