Open Source Web Development Tutorials - Dev Shed

Google AjaxライブラリAPIを使おう
（2009/02/23公開）

Prototype JavaScriptライブラリで簡単なAjaxアプリケーションを作る

　特定のJavaScriptライブラリとあわせてGoogleのAPIを利用する方法を説明する前に、Prototypeフレームワークを使用して、簡単なAjaxプログラムを作成してみよう。これには従来のアプローチを使用することにする。つまり、プログラムの作成には、フレームワークのローカルコピーを使用する。

　このAjaxアプリケーションがどのように機能するかを理解してから、GoogleのAPIを使用して作成する方法を学ぶことにしよう。こうすることにより、両方のアプローチの相違を明らかにすることができると思う。

　この点を明らかにしてから、このサンプルAjaxプログラムの開発を開始しよう。簡単に言えば、このプログラムのタスクは、通常はWebサーバーに格納されているテキストファイルの内容を読み取り、PrototypeにバンドルされているAjaxモジュールを通じて画面に表示することだ。簡単に理解できる、よね？

　下記は基本的なテキストファイルdata.txtの定義で、この内容をAjaxを使用してフェッチする。

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アプリケーションを作成すればよい。このアプリケーションの完全なソースコードは次のようになる。

(definition for 'ajax_file_reader.htm' file)

<!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 Prototype 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="prototype-1.4.0.js"></script>
<script language="javascript">
// read file contents with Ajax
function readFileContents(){
// send http request
var ajaxobj=new Ajax.Request('read_file.php',{method: 'get',onComplete:displayFileContents,onFailure: displayError});
}
// display file contents
function displayFileContents(requestObj){
$('filecontents').innerHTML=requestObj.responseText;
}
// display error message
function displayError(requestObj){
$('filecontents').innerHTML='Error reading file contents!';
}
// initialize file reading application
function initializeApplication(){
// attach handler to HTML button
Event.observe('btn','click',readFileContents);
}
// attach handler to window object
Event.observe(window,'load',initializeApplication,false);
</script>
</head>
<body>
<h1>Reading file contents with Prototype library</h1>
<p><input type="button" id="btn" value="Read File Now!" /></p>
<div id="filecontents"></div>
</body>
</html>

(definition for 'read_file.php' file)

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

　Prototype JavaScriptライブラリの使い方をよく知らない場合でも、上のAjaxアプリケーションの機能を理解することは難しいことではない。このアプリケーションは、ライブラリのローカルコピーをダウンロードし、前述したテキストファイルの内容をフェッチして、AjaxベースのHTTPリクエストを通じてブラウザに表示する。

　また、ターゲットファイルを実際に読み取り、そのデータをクライアントに送り返すスクリプトはread_file.phpという名前のスクリプトで、その内容も上記に示している。

　前の説明を補足するために、このAjax駆動型プログラムがどのように機能するかを明確に示しているスクリーンショットを下に示しておく。

　さて、これで、Prototypeフレームワークのローカルコピーを使用して、基本的なAjaxアプリケーションを作成する方法を説明することができた。それでは、次に、Google APIを使用して、このアプリケーションを作成してみよう。

　これを達成する詳細な方法を学ぶには、次のページを読んでほしい。

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