[プログラム学習] JavaScript #5 「ファイル書き込み」

2015年11月11日

Javascript テクノロジー プログラミング 学習 特集

JavaScriptにおけるファイル操作は、読み込みでも苦労したように書き込みも基本的には行うことができません。 サーバーサイドプログラムと併用して行うのが一般的です。

簡単に言うと・・・

WEBページ -> JavaScript -> PHP(他の言語でもOK)をajaxでデータ送信 このような感じでデータを書き込むことが可能です。 get-methodでも可能であれば、scriptタグでも可能です。

サンプル

サーバーサイドに設置

「write.php」 <? php file_put_contents("data.log",$_REQUEST['data']);

scriptタグで書き込み

下記のアクセスで「abcdefg」という文字列が書き込まれます。 基本的に書き込み処理はサーバーサイドで行うため、あくまでJSではデータ送信するだけです。 <script type="text/javascript" src="write.php?data=abcdefg"></script>

Ajax処理で書き込み

Ajaxで書き込みできるメリットはpost送信ができるという点でしょう。 ただし、SSL仕様のサイトでのクロスドメインは基本的にできないので、要注意です。 var ajax = { xmlObj:function(f){ var r=null; try{ r=new XMLHttpRequest(); } catch(e){ try{ r=new ActiveXObject("Msxml2.XMLHTTP"); } catch(e){ try{ r=new ActiveXObject("Microsoft.XMLHTTP"); } catch(e){ return null; } } } return r; }, /** * XMLHttpRequestオブジェクト生成 */ set:function(option){ if(!option){return} ajax.httpoj = ajax.createHttpRequest(); if(!ajax.httpoj){return;} //open メソッド; ajax.httpoj.open(option.method , option.url , option.async); ajax.httpoj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //受信時に起動するイベント; ajax.httpoj.onreadystatechange = function(){ //readyState値は4で受信完了; if (this.readyState==4){ alert(this.responseText); } }; //query整形 var data = []; if(typeof(option.query)!="undefined"){ for(var i in option.query){ data.push(i+"="+encodeURIComponent(option.query[i])); } } if(typeof(option.querys)!="undefined"){ for(var i=0;i<option .querys.length;i++){ data.push(option.querys[i][0]+"="+encodeURIComponent(option.querys[i][1])); } } //send メソッド if(data.length){ ajax.httpoj.send( data.join("&") ); } else{ ajax.httpoj.send(); } }, createHttpRequest:function(){ //Win ie用 if(window.ActiveXObject){ try { //MSXML2以降用; return new ActiveXObject("Msxml2.XMLHTTP") } catch(e){ try { //旧MSXML用; return new ActiveXObject("Microsoft.XMLHTTP") } catch(e2){ return null } } } //Win ie以外のXMLHttpRequestオブジェクト実装ブラウザ用; else if(window.XMLHttpRequest){ return new XMLHttpRequest() } else{ return null } } }; ajax.set({ url:"write.php", methos:"post", async:true, query:{"data":"abcdefg"} });

組み合わせを恐れるな

今回のように、別の言語や環境と組み合わせないと実行が出来ないことは、システム開発においてよく発生します。 もちろん、サーバーサイドプログラムもできるようになる事が重要ですが、ひとつのプログラム言語だけで、全ての作業を完了するという事の方が難しいので、そのへんは腹をくくって勉強しましょう。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。