CDNに設置されたjQueryファイルを使う

広告

ダウンロードしたjQueryファイルを使用する代わりに、GoogleやMicrosoftがCDN(Content Delivery Network)にて用意しているjQueryファイルを読み込んで使用することもできます。

現時点で利用可能なCDNは3つあります。 

Google Ajax API CDN
https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js

Microsoft CDN
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js

jQuery CDN
http://code.jquery.com/jquery-1.5.1.min.js

例えばGoogleが用意したものを利用する場合には次のように記述します。 

<script type="text/javascript"
 src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

一度読み込まれることでクライアント側でjQueryファイルがキャッシュされるため、多くのサイトで同じようにjQueryファイルをCDNから読み込んでいる場合、キャッシュの効果を見込むことができます。

サンプル

では簡単なサンプルを作成して試して見ます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>jQueryテスト</title>

<script type="text/javascript"
 src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">

$(function() {
  $("p").click(function(){
    alert("Hello!");
  });
});

</script>

</head>
<body>
  <p>Hello!</p>
</body>
</html>

上記を実際にブラウザ見てみると次のように表示されます。

p2-1

「Hello!」と書かれた部分をクリックすると次のようにダイアログが表示されます。

p2-2

実行結果は前ページのサンプルと同じです。

( Written by Tatsuo Ikura )