Google Suggest - a view from the inside ...
Different people understood a bit about how Google Suggest works, but I rewrote the compressed javascript code so that every regular developer can learn in detail how this system works. My final rewritten version of the script is available here .
I saw the coolest thing I have seen since I discovered a SOAP client with WSDL support in a Mozilla browser. Google Prediction query prediction technology works in real time. With the introduction of each new letter the list of options is updated. The script is technically delightful for at least two reasons:
1. Speed. Even with fast printing, the list of options is amazingly quick after each keystroke.
2. Interface. I used mostly server code and tried to avoid javascript, but began to change my opinion about client scripts, using impressive gmail interfaces, and now google suggest (as well as many other Google products).
')
I think that everyone can positively evaluate the work of the code for the following reasons:
1. The drop-down menu perfectly matches the width of the search bar ...
2. The most suitable option in the search bar is highlighted.
3. Well implemented tracking keystrokes and the position of the mouse cursor.
4. Excellent cache support, so after pressing Backspace, the script does not send a new request to the server.
5. Dynamic adjustment of the update speed depending on the ping on Google.
So, I wanted to understand the dynamic interface of this development.
I saved the html and javascript locally ... I ran it and used debugging to “decrypt” the obfuscated script.
The XMLHTTP / XMLHttpRequest object serves to communicate with the Google server, send requests and receive data without refreshing the page ... In order to fully understand the code, I needed to know what the server sends back. But when I tried to open the url directly, I did not receive anything except 404 errors. I tried to use a local proxy server for the browser, but it turned out that the XMLHttp object does not use a browser proxy when connecting.
The original obfuscated Google skipt is available here ...
The script execution is called from the HTML page by the InstallAC () command ...
Interestingly, this checks are performed:
var Jb = "zh-CN | zh-TW | ja | ko | vi |"
That is, the system is trying to identify users from Japan, Korea and China, which may indicate support not only for English, but also for Asian languages.
The InstallAC function calls another function (installACPart2), which checks browser support for XMLHttp and creates the “_completeDiv” resource, to which content received from the server is sent.
The mainLoop function is called periodically using the javascript function setTimeout. It is interesting to note that the developers decided to use a mechanism based on timeout, and not on keydown. This was done for those users who have fast print speeds and slow Internet connection. This function finds out whether the value of the text field has changed, and then first searches in the cached data, and then sends a new request to the server. The google suggestion code also supports older browsers that do not have an XMLHttp object in the kernel, use cookies and reload the frame.
The usual request to the Google server is quite simple. When contacting the server, the line www.google.com/complete/search?hl=en&js=true&qu=fast%20bug is formed (for example, the phrase “fast bug” is used).
Then the _xmlHttp.onchange callback function is set, which will receive the request data:
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 (" "));
This function is declared in the ac.js file. It sets the time of the main query cycle, caches the search results received and fills the _completeDiv DIV element with them.
The displaySuggestedList function displays the results obtained, creating a data structure from the DIV and SPAN elements. For each item in the resulting list, the data structure will have the following order:
</ Div (u)>
The Pa () function is called when data from the server is received, as well as when the button is pressed. It highlights the entered text.
I saw the coolest thing I have seen since I discovered a SOAP client with WSDL support in a Mozilla browser. Google Prediction query prediction technology works in real time. With the introduction of each new letter the list of options is updated. The script is technically delightful for at least two reasons:
1. Speed. Even with fast printing, the list of options is amazingly quick after each keystroke.
2. Interface. I used mostly server code and tried to avoid javascript, but began to change my opinion about client scripts, using impressive gmail interfaces, and now google suggest (as well as many other Google products).
')
I think that everyone can positively evaluate the work of the code for the following reasons:
1. The drop-down menu perfectly matches the width of the search bar ...
2. The most suitable option in the search bar is highlighted.
3. Well implemented tracking keystrokes and the position of the mouse cursor.
4. Excellent cache support, so after pressing Backspace, the script does not send a new request to the server.
5. Dynamic adjustment of the update speed depending on the ping on Google.
So, I wanted to understand the dynamic interface of this development.
I saved the html and javascript locally ... I ran it and used debugging to “decrypt” the obfuscated script.
The XMLHTTP / XMLHttpRequest object serves to communicate with the Google server, send requests and receive data without refreshing the page ... In order to fully understand the code, I needed to know what the server sends back. But when I tried to open the url directly, I did not receive anything except 404 errors. I tried to use a local proxy server for the browser, but it turned out that the XMLHttp object does not use a browser proxy when connecting.
The original obfuscated Google skipt is available here ...
The script execution is called from the HTML page by the InstallAC () command ...
Interestingly, this checks are performed:
var Jb = "zh-CN | zh-TW | ja | ko | vi |"
That is, the system is trying to identify users from Japan, Korea and China, which may indicate support not only for English, but also for Asian languages.
The InstallAC function calls another function (installACPart2), which checks browser support for XMLHttp and creates the “_completeDiv” resource, to which content received from the server is sent.
The mainLoop function is called periodically using the javascript function setTimeout. It is interesting to note that the developers decided to use a mechanism based on timeout, and not on keydown. This was done for those users who have fast print speeds and slow Internet connection. This function finds out whether the value of the text field has changed, and then first searches in the cached data, and then sends a new request to the server. The google suggestion code also supports older browsers that do not have an XMLHttp object in the kernel, use cookies and reload the frame.
The usual request to the Google server is quite simple. When contacting the server, the line www.google.com/complete/search?hl=en&js=true&qu=fast%20bug is formed (for example, the phrase “fast bug” is used).
Then the _xmlHttp.onchange callback function is set, which will receive the request data:
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 (" "));
This function is declared in the ac.js file. It sets the time of the main query cycle, caches the search results received and fills the _completeDiv DIV element with them.
The displaySuggestedList function displays the results obtained, creating a data structure from the DIV and SPAN elements. For each item in the resulting list, the data structure will have the following order:
<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)>
The Pa () function is called when data from the server is received, as well as when the button is pressed. It highlights the entered text.
Source: https://habr.com/ru/post/31672/
All Articles