Open Source Web Development Tutorials - Dev Shed

GoogleのAjaxライブラリAPIでgoogle.load()メソッドを使用する
（2009/03/16公開）

圧縮を使用せずにjQueryライブラリのサービスを行う

　前のセクションで作成した例と類似のアプローチを使用して、Google APIを通じて、いくつかのJavaScriptライブラリサービスの圧縮を使用せずに行うこともできる。もちろん、Prototypeを使用する場合の方法が理解できていれば、jQueryパッケージを使用して、同じプロセスを実行する方法を理解するのに大きな問題はないはずだ。

　それでは、この辺で前の理論から離れ、このタスクを実行する方法を、サンプルコードを使用して説明することにしよう。前のセクションで作成したAjaxアプリケーションのクライアントサイドの部分を書き直したものを下に示す。今回は、jQueryライブラリを使用する。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Reading file contents with jQuery library (uses Google API)</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: bold 18pt Arial, Helvetica, sans-serif;
color: #000;
}
#filecontents{
width: 600px;
padding: 10px;
border: 1px solid #999;
font: normal 10pt Arial, Helvetica, sans-serif;
color: #000;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
// load jQuery library with Google API (loads uncompressed source file)
google.load("jquery","1.2",{uncompressed:true});
google.setOnLoadCallback(function(){
$("#btn").click(function(){
$.get("read_file.php",function(fileContents){$("#filecontents").html(fileContents);});
});
});
</script>
</head>
<body>
<h1 id="header">Reading file contents with jQuery library (uses Google API)</h1>
<p><input type="button" id="btn" value="Read File Now!" /></p>
<div id="filecontents"></div>
</body>
</html>

　読んで簡単に理解できたと思うが、どうかな？上に示したように、このサンプルAjaxアプリケーションでは、jQueryライブラリを使用して、Webサーバー内のテキストファイルの内容をフェッチしている。ここで最も強調しておきたいことは、このJavaScriptパッケージを全く圧縮せずにダウンロードしていることで、google.load()メソッドを呼び出すときに、そのように指定している。

　Google APIを通じて、圧縮せずにほかのさまざまなライブラリのサービスを行う方法については、これ以上の説明は要しないだろう。したがって、このチュートリアルの最後の部分で、これまでに作成したAjaxプログラムの完全なソースコードを示すことにしよう。簡単にいじってテストできる。

　次のリンクをクリックして、ぜひ最後のセクションを読んでほしい。