Pull to refresh

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

Website development
Translation
Original author: Chris Justus
Разные люди немного разбирались в принципе работы 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 довольно прост. При обращении к серверу формируется строка www.google.com/complete/search?hl=en&js=true&qu=fast%20bug (для примера использована фраза «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 (u) - mousedown/mouseover/mouseout class="aAutoComplete">
<SPAN (ka) class="lAutoComplete">
<SPAN (ua) class="cAutoComplete">
bug tracking
</SPAN (ua)>
<SPAN (ea) class="dAutoComplete">
500,000 results
</SPAN (ea)>

</DIV (u)>

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

Tags:googlejavascript
Hubs: Website development
Total votes 79: ↑74 and ↓5 +69
Views2.1K

Popular right now

JavaScript Developer
from 2,700 €DiscoRemote job
Product-manager
from 200,000 ₽ПризываНетМосква
Frontend / Backend Разработчик (Vue)
from 200,000 ₽StroybotRemote job
JavaScript-разработчик
to 180,000 ₽MobilityРязань
Fullstack JavaScript developer
from 5,500 to 6,500 $BrightdataRemote job

Top of the last 24 hours