Clever Geek Handbook

AjaxをVKontakteとして使用してページをロードする

少し前まで、VKontakteのようなajaxスクリプトを使用してページをロードし、同時に検索エンジンでインデックスを作成する方法を考えました。



このスクリプトは、JS jQueryフレームワーク（ サイトにアクセス ）とHashChangeプラグイン（ プラグインページに アクセス ）に基づいて作成しました。



最初にしたことは、ページ上のスクリプトをプラグインし、ページハッシュの変更を追跡する関数を作成することでした。



スクリプト接続： 

<script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/hashchange.js"></script>




機能： 

  $jQuery = jQuery.noConflict(); $jQuery(window).hashchange(function(){ var link = window.location.hash.replace("#", ""); get_page_by_hash(link); });




この関数は、ページのハッシュが変更されるとget_page_by_hash関数を呼び出します。最初の引数はページへのリンクになります。



2番目のステップでは、get_page_by_hash関数自体を作成しました。 



  function get_page_by_hash(link){ if(typeof(link) != "undefined"){ if(link != ""){ $jQuery.ajax({ type: "POST", cache: false, async: false, url: link, success: function(data){ if(data != ""){ $jQuery("body").html(data); } } }); } } }




この関数では、本文のhtmlがリクエストへの応答で送信されたhtmlに置き換えられます。

1.データ転送の方法-ページにアクセスしたばかりなのか、それともajaxを介したリクエストなのかを判断するには、POSTが必要です。 これにより、テンプレートは、スクリプトによって要求されたときに表示する必要のないデータを非表示にする条件を作成できます。 



 if($_SERVER["REQUEST_METHOD"] == "GET"){ }




また、このメソッドを使用すると、タグ内ではなく、jQueryを使用して選択できる任意の要素内のhtmlを置換でき、上記の条件を使用してテンプレートで不要なすべてをトリミングできます。



次のステップは、上記の関数を使用して追跡しているページのハッシュを設定することでした： 



 $jQuery("a").click(function(){ if($jQuery(this).attr("href").substr(0, 1) == "/"){ window.location.hash = $jQuery(this).attr("href"); } });




この関数を使用すると、ブラウザーのアドレスバーにハッシュを追加できます。すべてのブラウザーで機能します。



また、MozillaおよびChromeブラウザーのVKontakteがページをリロードせずにアドレスを変更することも確認しました。これを実現するには、さらにいくつかの手順を実行する必要があります。



1.この機能を使用してブラウザを定義する必要があります。 



 function getNameBrouser() { var userAgent = navigator.userAgent.toLowerCase(); //  Internet Explorer if (userAgent.indexOf("msie") != -1 && userAgent.indexOf("opera") == -1 && userAgent.indexOf("webtv") == -1) { return "msie"; } // Opera if (userAgent.indexOf("opera") != -1) { return "opera"; } // Gecko = Mozilla + Firefox + Netscape if (userAgent.indexOf("gecko") != -1) { return "gecko"; } // Safari,   MAC OS if (userAgent.indexOf("safari") != -1) { return "safari"; } // Konqueror,   UNIX- if (userAgent.indexOf("konqueror") != -1) { return "konqueror"; } return "unknown"; }




2.次に、ページのハッシュ更新機能を拡張する必要があります。 

 $jQuery("a").click(function(){ if($jQuery(this).attr("href").substr(0, 1) == "/"){ if(getNameBrouser() == "gecko"){ window.history.pushState("", "", $jQuery(this).attr("href")); window.history.replaceState("", "", $jQuery(this).attr("href")); get_page_by_hash($jQuery(this).attr("href")); }else{ window.location.hash = $jQuery(this).attr("href"); } return false; } });




これらのスクリプトを使用すると、VKontakte.ruに似た（ページナビゲーションで）サイトができます。


More articles:


All Articles