トップページ >  Ajax >  サーバからファイルを取得して表示する
初版2009/08/11: 最終更新日2009/08/11
サーバからファイルを取得して表示する
目次
説明
サンプルソース(test.htmlを取得して<div id="test_html">の中に表示する)
実行例
説明
はじめに、Ajaxの基本である非同期通信によりサーバからファイルを取得して画面に表示してみます。
jQueryではサーバからGETでファイルを取得するのに、getメソッドを使用します。
getメソッドで静的なファイルを取得する際には以下のように呼び出します。
jQuery.get( ファイルのURL, コールバック関数 )
コールバック関数とはファイルの取得完了後呼び出される関数です。
ここには関数名か、function(data){ ~~ }という形で関数を入れます。
dataには取得したファイルの内容が入ります。
サンプルソース(test.htmlを取得して<div id="test_html">の中に表示する)
<html>
<head>
<title></title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script type="text/javascript">
$(document).ready(function(){
	$("#button").click(function () {
		jQuery.get('test.html', function(data){
			$("div#test_html").html(data);
		});
	});
});
</script>
</head>
<body>
    <input type="button" value="サンプル実行" id="button" /><br /><br />
    <div id="test_html"></div>
</body>
</html>
実行例
下のボタンを押すとサンプルコードを実行します。