asideコンテンツをMySQLDB化、PHPとJSのAjaxで非同期通信して表示

1.あらかじめasideコンテンツをパーツ化し、MySQLDBの各フィールドに保存する。
フィールド:通しNo、タイトル用No(全角混在)、画像のPATHファイル名を含めたimgタグ、サブタイトルのh4タグ、
コンテンツ文章のpタグ


2.aside用JS外部ファイルaside.jsのAjax関数を実行。メニューでコンテンツを選択した時はコンテンツNoをsend送信、
ページオープン時のランダム表示の場合は空データでsend送信してMySQL取得用phpと通信する。


3.リクエストのあったphpはsendできたデータのNoがあればそのNoを、なければrand関数でランダム番号を作って
WHEREで指定しMySQLDBからSELECT実行。取得した配列データをJSONのテキストデータに変換しechoで送信する。

	MySQLDBデータ取得、データ送信用php: aside_send.php
	---------------------------------------------------------------------
	<?php
	//XMLHttpRequest 以外はエラー
	$headers = getallheaders();
	
	if ($headers["X-Requested-With"] != "XMLHttpRequest") {
		header("HTTP/1.1 403 Forbidden");
		exit;
	}
	
	//セキュリティ用ヘッダー付与
	header("Content-Type: application/json; charset=utf-8");
	header('X-Content-Type-Options: nosniff');
	
	$val = $_POST["msg"];
	if ($val == ""){
		//no msg
		$val = rand(0,9);
		//no msg
	}
	$dsn  = "mysql:dbname=s.21;host=localhost";
	$user = "root";
	$pass = "xxxx";
	
	try{
		$my_Con = new PDO($dsn, $user, $pass);
	 }catch(PDOException $e){
		echo "接続に失敗しました:".$e->getMessage();
		exit;
	}
	$my_Row = $my_Con->query("SELECT * FROM aside WHERE no = \"$val\"");
	if(!$my_Row){
		$info = $my_Con->errorInfo();
		exit($info[2]);
	}
		
	$row = $my_Row->fetch(PDO::FETCH_ASSOC);
	echo json_encode($row);
	flush();
	?>
	---------------------------------------------------------------------
				


4.JSのAjax関数非同期通信で受け取ったJSONデータから配列データに変換し、それぞれのプレースホルダにinnerHTML
で表示させる。

	データ取得、リクエスト用Ajax関数
	---------------------------------------------------------------------
	function asideajx(url, index) {
	var val = encodeURI(index);
		
	var r = new XMLHttpRequest();
	r.open("POST", url, true);

	//HTTPヘッダー付与、JSON ハイジャック対策
	r.setRequestHeader("X-Requested-With","XMLHttpRequest");
	r.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

	r.onreadystatechange = function () {
		if (r.readyState != 4 || r.status != 200){
			return;
		};

		//JSON パース(eval インジェクション対策)
		//Internet Explorer 8 以降
		var msg = JSON.parse(r.responseText);
		var acr_no = msg["no"];
		var title = msg["sono"];
		var data = msg["img"]+msg["h4"]+msg["pt"];
		chk_radioselect("rd_casides")[acr_no][2].checked = true;
		getId("aside_title_sp").textContent = title;
		getId("contents_aside").innerHTML = data;
	};
	r.send("msg=" + val);
	}//end of function
	
	asideajx("aside_send.php", no);で指定したnoのasideコンテンツ表示
	asideajx("aside_send.php", "");でランダムのnoのasideコンテンツ表示
	---------------------------------------------------------------------