Javascript (カレンダー016_Nodeへ移す6(Post先での受信データ処理))

■クライアント-サーバの処理(Post先での受信データ処理)

前回のつづき。
formタグを使ってデータをクライアント側からサーバ側へ送るようにしたが、受信したデータがどんな持ち方になっているかよくわからなかった。下のようなformタグを使って、diary_titleやdiary_bodyをキーとして、「diary_title=34343&diary_body=13213223」（受信データが入力されたpostDataChunkの値）といったアンド（&）でつながったデータまでは取り出せたけど、そこからdiary_titleなどの値（34343など）を取ることができてなかった。

'<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>'+

いろいろ調べて試した結果、下の文を追加しパースした後、post['diary_title']、post['diary_body']として取得することができた。postDataChunk['diary_title']としてもデータは取れなかったので、qs.parseが重要だったよう。
var qs = require('querystring');
var post = qs.parse(postDataChunk);

下のコンソールから、取得できていることが分かる。
（console.log("Today_date:"+todayStr+postDataChunk);といった形で表示している。）

これでタイトルと本文をテキストエリアから入力し、データベースへ保存するところまでの目途はついた。

後は、カレンダーの日付をクリックしたときにタイトルと本文をテキストエリアへ表示する機能。入力では、formタグでサーバへ情報を送れたけど、カレンダーの場合はどうするか？サーバへ日付を送った後、日付に応じた結果を受け取るというイメージ。「クライアント　サーバ　通信」で検索してみると、XMLHttpRequestというインターフェースが使えるよう。

Webのサンプルを見ながら下のようなコードを入れてみた。

'<script>'+
'function presetDiary(dateStr) {'+
'let xhr = new XMLHttpRequest();'+
'xhr.open(¥'POST¥', ¥'¥', true);'+
'xhr.setRequestHeader("Content-Type", "text/html");'+
'xhr.send(dateStr);'+
'console.log("aaacc"+xhr.responseText);'+
'}'+
'</script>'+

function presetDiaryは、カレンダー上の日付をクリックすると起動する。その中で、XMLHttpRequestを使用して、通信の設定（open）、通信（send）を行っている。データの受信は、formタグで送信したときと同じく、postDataChunkで受信していた。受け取っている値は、xhr.send(dateStr)のdateStrだった。カレンダー上でクリックした際でも、クライアント側からサーバ側へ情報を送ることはできた。
次は、データをさらにクライアント側に返せないか調べてみる。