Javascript (カレンダー015_Nodeへ移す5(Post処理))
■クライアント-サーバの処理(Post処理)
前回から、カレンダー内の日付をクリックしてテキストエリアにデータを出せるよう試してきた。まだできていないけど、試行錯誤していく中で、どうやらクライアント側（パソコン上のブラウザ表示）とサーバ側（実際にnodeを起動して動作している部分）のやり取りが必要みたい。クライアント側だけなら、Javascriptファイル内のどこでも「document.getElementById("diary_title").innerHTML = diary_title;」といった関数は問題なく動いていたけど、javascriptファイルをサーバ側に持っていたことでエラーが出るようになったよう。
Nodeの起動の流れとして、
１．コマンドプロンプトでNode起動。
↓
２．関連するjavascriptファイルが実行され、その中でデータベースへアクセスし必要な情報を得て、それを基にhtmlファイルを生成し、サーバをListen状態で立ち上げる。
↓
３．ChromeなどのブラウザからListen状態のサーバへアクセス。
↓
４．ブラウザ上で既に生成されたhtmlファイルを表示する。
という手順になっている。
そのため、ブラウザでは下のbody部分で生成した後のhtmlのコードしか表示されていないし、サーバ側に置いているjavascriptファイルにgetElementByIdなどを使っても、うまく動かないのではと思う。
クライアント―サーバ間の処理として次のものがいる。
・クライアント側でクリックし、タイトルと本文をブラウザのテキストに表示させる：
クリックした日付の情報をサーバ側に送り、データベースから該当する日付のタイトル、本文を取得し、クライアント側へ戻す。
・データベースにタイトルと本文を入力する：
保存ボタンを押してタイトルと本文をサーバ側へ送り、データベースへ登録する。
このためのクライアント-サーバ間の処理として、Post、Getの処理が必要となるよう。
頭の中は少しスッキリした。
async function start(response, postData) {
console.log("Request handler 'start' was called.");
setData = await getdataMysql()
body = '<html>'+
'<head>'+
'<meta charset="utf-8">'+
'<title>Calendar</title>'+
'</head>'+
'<body>'+
'<div class="frame-box">'+
'<div class="calendar-box">'+
'<div id="calendar" class="calendar"'+
'<div>'+
cal.displayCal(setData)+
'</div>'+
...
先に比較的簡単なデータベースへの入力を試してみる。
Post処理について調べてみたところ、formタグで入力すればいいらしいのでタイトルと本文を入力する部分をformタグで下のように囲んだ。
'<form action="" method="post">'+
'<input type="text" name="diary_title" size="16"><br>'+
'<textarea id="diary_text" name="diary_body" rows="10" cols="18"></textarea><br>'+
'<input type="submit" value="Save" />'+
'</form>'+
ブラウザ上でタイトルと本文を入力し（上がdiary_title, 下がdiary_text）、Saveボタンを押すとPostされる。ここでPostされたものは、server.js内の下のrequest.addListenerでキャッチされている。この中にデータベース登録に関する処理を入れる（登録については以前カレンダー010あたりで確かめた）。
function start(route, handle) {
function onRequest(request, response) {
var postData = "";
var pathname = url.parse(request.url).pathname;
console.log("Request for " + pathname + " received.");
request.setEncoding("utf8");
request.addListener("data", function(postDataChunk) {
postData += postDataChunk;
console.log("Received POST data chunk '"+
postDataChunk + "'.");
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth()+1;
var today=date.getDate();
var todayStr = year + "." + month +"."+today;
setdataMysql(postDataChunk);
});
request.addListener("end", function() {
route(handle, pathname, response, postData);
});
}
http.createServer(onRequest).listen(8888);
console.log("Server has started.");
}
適当な値を入れてSaveボタンを押してみると、postDataChunkにはデータは入っているよう（下は「console.log("Received POST data chunk '"+～」の表示結果）。
ただ、postDataChunkのデータの持ち方がよくわからない。連想配列かと思い、postDataChunk[diary_body]、postDataChunk['diary_body']とか試してみたけど、うまく取得できなかった。postDataChunk[0]では先頭の文字が表示され、postDataChunk.lengthでは（おそらく）文字数が表示されたので、 一文字を要素とする配列かと思うけど、何か必要な情報をとる方法はないものか。
もう少しここについて調べてみる。
My brother recommended I might like this blog. He was once totally right. Alix Miner Alviani