Open Source Web Development Tutorials - Dev Shed

jQueryフレームワークとGoogleのAjaxライブラリAPIを併用する
（2009/03/02公開）

jQueryライブラリを使用する

　GoogleのAPIを利用して、このサーチエンジンのサーバーから直接Prototypeライブラリをダウンロードする方法が分かったら、このAPIを利用して、問題のjQueryフレームワークを使用する方法は一層簡単であることがお分かりいただけると思う。

　その理由は単純だ。使用するライブラリに関係なく、手順がほとんど変わらない。まず、google.load()メソッドを使用して指定したパッケージをダウンロードし、Webページを完全にロードした後で、google.setOnLoadCallback()メソッドを使用して具体的なJavaScript関数を呼び出す。

　実際に例を引いて、このAPIを利用してjQueryライブラリを使用する方法を詳細に示せば、このプロセスがよく理解できると思う。それで、前回取り上げた、jQueryのローカルコピーを使用した、Ajax駆動型アプリケーションを再掲することにする。
下記が、そのサンプルコードだ。

<!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</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 language="javascript" src="jquery.js"></script>
<script>
$(document).ready(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</h1>
<p><input type="button" id="btn" value="Read File Now!" /></p>
<div id="filecontents"></div>
</body>
</html>

　少し前のところで説明したように、上のサンプルコードは、jQueryライブラリを使用して、前のセクションで作成したのと同じ、ファイルを読み取るAjaxアプリケーションを作成する方法を明らかにするものだ。簡単に言えば、このプログラムは、Ajax HTTPリクエストを通じて、テキストファイルの内容をフェッチし、Webドキュメントの指定したDIV内に表示する。

　このデータをターゲットファイルから読み取るPHPスクリプトは次のようになる。

<?php
if(!$contents=file_get_contents('data.txt')){
trigger_error('Error reading file contents',E_USER_ERROR);
}
echo $contents;
?>

　テキストファイルdata.txtから内容をフェッチするPHPスクリプトを示したところで、次は、このサンプルファイルの内容を示す。

These are contents of sample file. These are contents of sample file.
These are contents of sample file. These are contents of sample file.
These are contents of sample file. These are contents of sample file.
These are contents of sample file. These are contents of sample file.
These are contents of sample file. These are contents of sample file.
These are contents of sample file. These are contents of sample file.
These are contents of sample file. These are contents of sample file.
These are contents of sample file. These are contents of sample file.
These are contents of sample file. These are contents of sample file.
These are contents of sample file. These are contents of sample file.
These are contents of sample file. These are contents of sample file.
These are contents of sample file. These are contents of sample file.
These are contents of sample file. These are contents of sample file.

　このAjaxプログラムを構成する各モジュールの機能が理解できたところで、このアプリケーションによって生成された出力を示すスクリーンショットをお目にかけよう。

　実に簡単でしょ？これで、jQueryライブラリを使用して、指定したテキストファイルからその内容をフェッチして画面に表示する、簡単なAjaxアプリケーションの作成方法が説明できた。もちろん、お分かりのように、この例は、ローカルコピーのライブラリを使用している。つまり、次は、GoogleのAPIを利用して、同じプログラムを作成する方法になる。

　それでは、最後に、その詳細を説明することにしよう。次のページを読んでほしい。

前のページ 1 2 3 4 次のページ