新卒から文系エンジニア→人材業界に転職した人のブログ

新卒から文系エンジニア→人材業界に転職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界へ。異業種×異職種の転職経験有り。

このエントリーをはてなブックマークに追加

【Javascript・php・xmlhttprequest・ajax】外部ファイル(text)に書き込む&読み込む

【今回の紹介】


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

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

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



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



【処理の流れ(概要)】


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

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

【処理の流れ(詳細)】

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

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

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

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

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



【メモ】


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



■読み込み処理

 ✔1,読み込みボタン押下時にjavascriptでイベント駆動
 ✔2,xmlhttprereqeustからを呼び出す(php関係なく単純にテキストを呼び出す?)
 ✔3,レスポンスでテキストに保存されているIDとテキストを
  受け取る
 ✔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);
?>
.hatena-module:nth-of-type(10) { background: transparent; } .hatena-module:nth-of-type(10) .hatena-module-title{ display: none; } .hatena-module:nth-of-type(10) .hatena-module-body { padding: 0; }