indare/ajaxTest.js

## ajaxTest.js
function getJsonData(){

    $.ajax({
        url: "http://localhost/php/gist/temp.php",          // リクエストURL
        dataType: "json",                                   // JSON形式
        cache: true,                                        // キャッシュする
        type: "POST",                                       // POST指定
        success: function(data) {                           // 通信成功時の無名関数
            $("#targetElement").children().remove();
            $("#targetElement").
                    append( data[0].title + '|').
                    append( data[0].name + '|').
                    append( data[0].price ).
                    append('<br />').
                    append( data[1].title + '|').
                    append( data[1].name + '|').
                    append( data[1].price ).
                    append('<br />').
                    append( data[2].title + '|').
                    append( data[2].name + '|').
                    append( data[2].price ).
                    append('<br />');

        },
        error: function(XMLHttpRequest, status, errorThrown) {
            alert(XMLHttpRequest); // XMLHttpRequestオブジェクト
            alert(status); // status は、リクエスト結果を表す文字列
            alert(errorThrown); // errorThrown は、例外オブジェクト
        }
    });
}

## index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>ajax test</title>
    <script language="JavaScript" src="ajaxTest.js"  type="text/javascript" charset="UTF-8"></script>
    <script language="JavaScript" src="jquery-1.7.1.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body onload="getJsonData();">
<div id="targetElement"></div>

</body>
</html>

## temp.php
<?php
$returnJson = array();

$tmpArray = array();

$tmpArray["title"] = "title01";
$tmpArray["name"] = "name01";
$tmpArray["price"] = "price01";

array_push($returnJson, $tmpArray);

$tmpArray = array();

$tmpArray["title"] = "title02";
$tmpArray["name"] = "name02";
$tmpArray["price"] = "price02";

array_push($returnJson, $tmpArray);

$tmpArray = array();

$tmpArray["title"] = "title03";
$tmpArray["name"] = "name03";
$tmpArray["price"] = "price03";

array_push($returnJson, $tmpArray);

echo json_encode($returnJson);
?>
	function getJsonData(){

	$.ajax({
	url: "http://localhost/php/gist/temp.php", // リクエストURL
	dataType: "json", // JSON形式
	cache: true, // キャッシュする
	type: "POST", // POST指定
	success: function(data) { // 通信成功時の無名関数
	$("#targetElement").children().remove();
	$("#targetElement").
	append( data[0].title + '\|').
	append( data[0].name + '\|').
	append( data[0].price ).
	append('<br />').
	append( data[1].title + '\|').
	append( data[1].name + '\|').
	append( data[1].price ).
	append('<br />').
	append( data[2].title + '\|').
	append( data[2].name + '\|').
	append( data[2].price ).
	append('<br />');

	},
	error: function(XMLHttpRequest, status, errorThrown) {
	alert(XMLHttpRequest); // XMLHttpRequestオブジェクト
	alert(status); // status は、リクエスト結果を表す文字列
	alert(errorThrown); // errorThrown は、例外オブジェクト
	}
	});
	}
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	<title>ajax test</title>
	<script language="JavaScript" src="ajaxTest.js" type="text/javascript" charset="UTF-8"></script>
	<script language="JavaScript" src="jquery-1.7.1.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body onload="getJsonData();">
	<div id="targetElement"></div>

	</body>
	</html>
	<?php
	$returnJson = array();

	$tmpArray = array();

	$tmpArray["title"] = "title01";
	$tmpArray["name"] = "name01";
	$tmpArray["price"] = "price01";

	array_push($returnJson, $tmpArray);

	$tmpArray = array();

	$tmpArray["title"] = "title02";
	$tmpArray["name"] = "name02";
	$tmpArray["price"] = "price02";

	array_push($returnJson, $tmpArray);

	$tmpArray = array();

	$tmpArray["title"] = "title03";
	$tmpArray["name"] = "name03";
	$tmpArray["price"] = "price03";

	array_push($returnJson, $tmpArray);

	echo json_encode($returnJson);
	?>