【Javascript・php・xmlhttprequest・ajax】外部ファイル（text）に書き込む＆読み込む - 新卒から文系エンジニア→人材業界に転職した人のブログ

【今回の紹介】

ずっとできなかったことができるようになりました。
掲題にある通り

外部のファイルの読み込みと書き込みを行う事です。

これができることにより具体的には、

javascriptで動的に追加したものが保存できます。

【処理の流れ（概要）】

①追加ボタン時に、
　・動的にlist要素の追加
・外部のテキストファイルへの書き込み

②読み込みボタン押下時に
　・外部のテキストファイルの情報を取得
　・取得情報を現在のページに追加

【処理の流れ（詳細）】

①追加ボタン時に、
　
　
　a.動的にlist要素の追加
　　→（1）javascriptからDOMを利用し、要素の生成を行う

　
　b.外部のテキストファイルへの書き込み
　　→（1）xmlhttprequestでphpファイルにPOSTを行う（渡すのは、idとテキスト）
　　　（2）phpから外部のテキストファイルに書き込みを行う
　

②読み込みボタン押下時に

　a.外部のテキストファイルの情報を取得
　　→（1）xmlhttprequestのresponsTextを使用し、外部のテキストファイルを取得
　　　（2）書き込まれているidとテキストを改行ごとに配列に格納
　　　（3）改行ごとになった情報をさらに「,」ごとに配列に格納する　

　b.取得情報を現在のページに追加
→(1)配列に格納された情報をＤＯＭに渡し、要素の追加を行う

【メモ】

ソース書いてる時のメモも載せておきます。
「読み込み処理」とはどんなことかを具体的に書き出してから、一つ一つ達成していくという
形で進めました。

■読み込み処理

　✔1,読み込みボタン押下時にjavascriptでイベント駆動
　✔2,xmlhttprereqeustからを呼び出す（php関係なく単純にテキストを呼び出す？）
　✔3,レスポンスでテキストに保存されているＩＤとテキストを
　　受け取る
　✔4,「,」区切りのデータを配列で受け取り
　　5.javascriptで指定のidの場所に格納する

【参考サイト】

「改行区切り」や「,」区切りにテキストを変換するときに役に立った
　サイト：http://kihon-no-ki.com/use-split-in-javascript-csv-into-array

【参考ソース】

<html>
<head>
<body >
<input type="text" id="input_text">
<input type="button" id="input_button" value="追加" onclick="add('ul2')">
<input type="button" id="road_button" value="読み込み" onclick="road_log('send.txt')">
<div id="div1">
<ul id="ul1">
<li>1番目</li>
<li>2番目</li>
<li>3番目</li>
</ul>
</div>
</br>
</br>
</br>
<div id="div2">
<ul id="ul2">
<li>1番目</li>
<li>2番目</li>
<li>3番目</li>
</ul>
</div>


<script Language="JavaScript" type="text/javascript">
	function add(add_point){
		var add_ul=document.getElementById(add_point);
		var add_text=document.getElementById("input_text").value;
		var textNode=document.createTextNode(add_text);
		var listNode=document.createElement("li");
		listNode.appendChild(textNode);
		add_ul.appendChild(listNode);
		send_log();
	}

<!--xmlhttprequest(phpへPOST)-->

	function send_log(){
		<!--text.idを設定-->
		var send_id="ul2";
		var send_text=encodeURIComponent(document.getElementById("input_text").value);
		var url="write.php";
		var httpobj =createHttpRequest();
		httpobj.onreadystatechange = function() {
  			if (httpobj.readyState == 4) {
    			alert(httpobj.statusText);
  			}
			};
		httpobj.open("POST",url);
		httpobj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		httpobj.send("input_log="+send_id+","+send_text);
	}
	
<!--textの読み込み-->
	function road_log(url){
		var httpobj =createHttpRequest();
		httpobj.onreadystatechange = function() {
  		if (httpobj.readyState == 4) {
    		alert(httpobj.statusText);
  		}
	};
		httpobj.open("GET",url,false);
		httpobj.send(null);
		road_str=httpobj.responseText;
		alert(road_str);
		}

	<!--xmlhttprequestobjの生成-->
	function createHttpRequest(){
	try{
			return new XMLHttpRequest();
		}catch(e){}
		try{
			return new ActiveXObject('MSXML2.XMLHTTP.6.0');
		}catch(e){}
		try{
			return new ActiveXObject('MSXML2.XMLHTTP.3.0');
		}catch(e){}
		try{
			return new ActiveXObject('MSXML2.XMLHTTP');
		}catch(e){}
	
		return null;
	}
	function road_log(road_url){
		var url=road_url;
		var httpobj =createHttpRequest();
		httpobj.onreadystatechange = function() {
  		if (httpobj.readyState == 4) {
    		alert(httpobj.statusText);
  		}
		};
		httpobj.open("GET",url,false);
		httpobj.send(null);
		road_str=httpobj.responseText;
		alert(road_str);
		format_text(road_str)
		}

	function format_text(change_text){
		change_text=change_text.replace(/\r\n/g,"\n");
		arr=change_text.split(/\n/g);
		all_par=arr.length;
		var data=[];
			for(var i=0; i<arr.length;i++){
				data[i]=arr[i].split(",");
			}
		alert(data[0][0]);
		alert(data[0][1]);

			for(var i=0; i<all_par;i++){
				var add_ul=document.getElementById(data[i][0]);
				var add_text=data[i][1];
				var textNode=document.createTextNode(add_text);
				var listNode=document.createElement("li");
				listNode.appendChild(textNode);
				add_ul.appendChild(listNode);
			}
	}
</script>
</body>
</html>

phpファイル

<?php
  header('Content-Type: text/html; charset=UTF-8');
    $input=$_POST['input_log'];
    $fh=fopen("send.txt","a");
	fwrite($fh,$input."\r\n");
	fclose($fh);
?>