<?php
  function executeQuery(){
    try {
    	// オブジェクト作成・接続
    	$db = new PDO('sqlite:sample.DB');
    	// データベースハンドルの属性を設定（PDOのエラーレポート表示など）
    	$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    	// 都道府県テーブル
    	$db->exec("CREATE TABLE IF NOT EXISTS prefecturesTbl(prefID integer, prefecture_Name text)");
    	// 市区町村テーブル
    	$db->exec("CREATE TABLE IF NOT EXISTS cityTbl(cityID integer, prefID integer, city_Name text)");
    } catch (PDOException $e) { 
    	print '<div>データベースへの接続でエラーが発生しました！。</div>';
    	exit;
    }
    return $db;
  }									　
?>										　               

									window.onload = init;
									function init() {
										// ブラウザの判定 
										if (window.XMLHttpRequest) {
											var xmlhttp = new XMLHttpRequest();
										} else {
											alert("IEバージョン7.0以上のブラウザをご利用ください！。");
											return null;
										}
													
										// アドレスへ接続開始
										xmlhttp.open("POST","preflist.php",true);
									
										// 通信完了で関数を呼び出し
										xmlhttp.onreadystatechange = function(e) {
											// サーバーの応答を定義
											if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
												// サーバーからデータ取得
												document.getElementById("preflist").innerHTML = 
												xmlhttp.responseText;
											}
										}        
									
										// ヘッダー
										/* POST送信のときsendメソットに引数を設定しない場合は、必要ない。
										* が、ブラウザによっては送信エラーが生じる恐れがあるかもしれません。
										* なるべく設定して置いた方がよいでしょう。
										*/
										xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
										// リクエスト
										xmlhttp.send();               
									}
									
									function city(obj) {
										// 都道府県のIDを取得
										var prefId = obj.options[obj.selectedIndex].value;
										// 都道府県の名前を取得
										var prefecture_Name = obj.options[obj.selectedIndex].text;
											
										if(prefId == "") {
											document.getElementById("citylist").innerHTML = "";
											return;
										} else {
											if(window.XMLHttpRequest) {
												xmlhttp = new XMLHttpRequest();
											} else {
												alert("IEバージョン7.0以上のブラウザをご利用ください！。");
												return null;
											}
									
											xmlhttp.open("POST","citylist.php",true);
											
											xmlhttp.onreadystatechange = function() {
												if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
													document.getElementById("citylist").innerHTML = 
													xmlhttp.responseText;
												}
											}
									
											// エンコード
											var prefId = encodeURI(prefId);
											var prefecture_Name = encodeURI(prefecture_Name);   
											
											xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
											
											// OPENメソットにPOSTを指定しているため、sendメソットに引数を設定
											xmlhttp.send("prefId="+prefId+"&prefecture_Name="+prefecture_Name);
										}       
									}									　
									

									<?php
									require_once "sampleDB.php";
									
									$db = executeQuery();
									$sql="SELECT * FROM prefecturesTbl";
									$result = $db->query($sql);
									
									print '<form>
										<p>これはサーバーにあるデータベースのデータです。</p>
										<select onchange="city(this)" style="width:150px;height:26px;">
										<option value="" selected >都道府県名</option>
									';
									if(!$result){
										echo "DataBase　Error!";
										return;
									} else {
										foreach ($result as $row) {
											print '<option value = "'.
											$row['prefID'].'">'.$row['prefecture_Name'].'</option>';
										}
									}  
									print '</select></form>';
									
									?> 								　               
									

										<?php
										require_once "sampleDB.php";
										
										$prefid = '';
										
										if (isset($_POST['prefId'])) {
											$prefid = htmlspecialchars($_POST['prefId']);
										}
										
										//クエリーを送信
										$db = executeQuery();
										$sql="SELECT * FROM cityTbl WHERE prefID =".$prefid;
										$result = $db->query($sql);
										
										print '<form>
											<p>これはサーバーにあるデータベースのデータです。</p>
											<select style="width:150px;height:26px;">
											<option value="" selected>市区町村名</option>
										';
										foreach ($result as $row) {
											print '<option value = "'.$row['cityID'].'">'.$row['city_Name'].'</option>';
										}
										print '</select></form>';
										　
										?> 									　               
										

									<!DOCTYPE html>
									<html lang="ja">
									<head>
									<meta http-equiv="content-type" content="text/html; charset=UTF-8">
									<title>Ajax通信のサンプルプログラム</title>
									<script type="text/javascript" src="prefcity.js"></script>
									</head>
									<body>
									<article>
										<h1 style="width:480px;padding:8px;background:#49ECFE;">Ajax通信を使ってサーバーからデータを取得</h1>
										<h2>・全国都道府県リスト</h2>
										<div id="preflist">ロード中......</div><br />
										<h2>・全国市区町村リスト</h2>
										<div id="citylist">ロード中......</div><br /><br />
										<button onclick="init();">Get</button>
									</article>
									</body>
									</html>