MozillaブラウザでWSDL対応のSOAPクライアントを発見して以来、私が見た中で最もクールなものを見ました。 Googleサジェストクエリ予測テクノロジーはリアルタイムで機能します。 各新しいレターの導入に伴い、オプションのリストが更新されます。 このスクリプトは、少なくとも2つの理由で技術的に驚くべきものです。
1.スピード。 高速印刷でも、オプションのリストはキーストロークごとに驚くほど迅速に更新されます。
2.インターフェース。 私は主にサーバー側のコードを使用し、javascriptを避けようとしましたが、印象的なgmailインターフェースを使用してクライアントスクリプトについての考えを変え始めました。
次の理由で、誰もがコードの作業を積極的に評価できると思います。
1.ドロップダウンメニューは、検索バーの幅と完全に一致します...
2.最も適切なオプションが検索バーで強調表示されます。
3.キーストロークとマウスカーソルの位置の追跡を完全に実装しました。
4.優れたキャッシュサポート。したがって、Backspaceをクリックした後、スクリプトはサーバーに新しいリクエストを送信しません。
5. Googleのpingに応じて更新速度を動的に調整します。
ですから、この開発の動的なインターフェースを理解したかったのです。
私はhtmlとjavascriptをローカルに保存しました...実行し、デバッグを使用して難読化されたスクリプトを「解読」しました。
XMLHTTP / XMLHttpRequestオブジェクトは、Googleサーバーと通信し、ページを更新せずにリクエストを送信し、データを受信するために使用されます...コードを完全に理解するには、サーバーが何を送り返しているかを知る必要がありました。 しかし、URLを直接開こうとすると、404エラーしか表示されませんでした。 ブラウザーにローカルプロキシサーバーを使用しようとしましたが、接続時にXMLHttpオブジェクトがブラウザープロキシを使用しないことが判明しました。
元のGoogle難読化スクリプトはここから入手できます ...
スクリプトの実行は、InstallAC（）コマンドを使用してHTMLページから呼び出されます...
興味深いことに、これはチェックします：
var Jb = "zh-CN | zh-TW | ja | ko | vi |"
つまり、システムは、英語だけでなくアジア言語のサポートについて話すことができる日本、韓国、中国のユーザーを特定しようとしています。
InstallAC関数は別の関数（installACPart2）を呼び出します。この関数は、ブラウザーでXMLHttpサポートを確認し、サーバーから受信したコンテンツが送信されるリソース「_completeDiv」を作成します。
mainLoop関数は、javascript setTimeout関数を使用して定期的に呼び出されます。 開発者がキーダウンではなくタイムアウトに基づいたメカニズムを使用することにしたことに注意するのは興味深いことです。 これは、印刷速度が速く、インターネット接続が遅いユーザー向けに行われました。 この関数は、テキストフィールドの値が変更されたかどうかを確認し、キャッシュされたデータを最初に調べてから、サーバーに新しいリクエストを送信します。 Google提案コードは、Cookieテクノロジーを使用してフレームをリロードし、カーネルにXMLHttpオブジェクトを持たない古いブラウザーもサポートします。
典型的なGoogleサーバーリクエストは非常に簡単です。 サーバーにアクセスすると、 www.google.com / complete / search？hl = en＆js = true＆qu = fast ％20bugという行が形成されます（たとえば、「fast bug」というフレーズが使用されます）。
次に、_xmlHttp.onchangeコールバック関数が設定され、リクエストデータを受信します。
sendRPCDone（frameElement、「高速バグ」、新しい配列（「高速バグトラック」、「高速バグ」、「高速バグ」、「高速バグトラック」）、新規配列（「793,000結果」、「2,040,000結果」、「6,000,000結果」 "、" 7,910結果 "）、新しい配列（" "））;
この関数は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（）関数は、サーバーからデータが受信されたとき、およびボタンが押されたときに呼び出されます。 入力したテキストが強調表示されます。