Open Source Web Development Tutorials - Dev Shed

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

サンプルAjaxアプリケーションのソースコード

　あなたが今読んだセクションで、Goggle APIを使用して、jQueryライブラリを圧縮せずにダウンロードする簡単な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 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>

(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;
?>

(definition for 'data.txt' 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. These are contents of sample file.

　上のAjaxプログラムのソースコードは自由に使用して構わない。Googleのサーバーから、jQueryライブラリの圧縮を使用または使用せずに配布した場合の実行時間の相違を簡単にテストできると思う。このGoogle APIを使用するかどうかを決定するときに、確かなことが1つある。それは、このAPIを使用して、楽しく遊んでみることだ！

まとめ

　この長くて希望に満ちた修学旅行を終えて、このシリーズも終わりを迎えた。それぞれのチュートリアルに含まれているコードサンプルによって示したように、GoogleのAjaxライブラリAPIの使用方法は非常に簡単である。このシリーズでは、全体のプロセスを2種類のJavaScriptメソッドの使用に絞った。あなたが選択したJavaScriptパッケージを使用するときに、このAPIを使用するかどうかは、あなた次第だ。

　それでは、また次のチュートリアルで！

（著者：Alejandro Gervasio）

【原文へのリンク】

前のページ 1 2 3 4