Javascript (カレンダー018_Nodeへ移す8(サーバ側からの返信_続き))

■サーバ側からの返信の続き

前回で、サーバ側からデータを返し、データを反映したhtmlを作成するところまでできたが、画面上に反映させることができなかった。その後、location.reloadなど試してみたけど、リロードすると初期状態が表示されるだけで、カレンダー上でクリックした時にサーバ側から返ってくる値をテキストエリアに反映させられない。

MDN web docsのAjaxの記事に、サーバから受け取ったデータの処理があった。どのようにしているのかと思ったら、php使ってる。そのまま参考にはできないよう......
ただ、こちらでもresponseTextでサーバ側からのデータを受け取っていた。

webでいろいろ探してみたけど、やはり一度表示させたhtmlをさらに上書きするものは見つけられなかった。response.writeやresponse.endの部分で、クライアント側からのリクエストに対してレスポンスするわけではないのかな？URLの入力に対するレスポンスで画面表示するなら、ブラウザ上をクリックしリクエストしたときも、最終的には同じようにwrite, endの部分まで行くので画面が更新されるかと思ったけど、そうでもないよう。

方針を戻し、responseTextを使用する方法を検討。

前回、下のコードでresponse.endを使ってクライアント側へデータを返すことはできたけど、その時はエラーが出てしまった。

request.addListener("data", function(postDataChunk) {
     postData += postDataChunk;
     console.log("Received POST data chunk '"+ postDataChunk + "'.");
     
     var post = qs.parse(postDataChunk);
     
     if(post['diary_title']===undefined){
     response.end("aaa"+postDataChunk);

今回、response.endは、下のようにaddListener("end, ~)の中に入れ、さらにif文で条件分けすることでwriteが実行されないようにした（writeは「route(handle, pathname, response, postData);」の中で実行される）

 request.addListener("data", async function(postDataChunk) {
     console.log("Received POST data chunk '"+ postDataChunk + "'.");
     var post = qs.parse(postDataChunk);
 
     if(post['diary_title']===undefined){
       postData = postDataChunk;
       console.log("345 "+postData.length);

     }else {
       var date=new Date();
       var year=date.getFullYear();
       var month=date.getMonth()+1;
       var today=date.getDate();
       var todayStr = year + "." + month +"."+today;
      
       console.log("Today_date:"+todayStr+post['diary_title']);
       console.log("Today_date:"+todayStr+post['diary_body']);
       setdataMysql(postDataChunk);
     }
 });

 request.addListener("end", async function() {
     var array = await getdataMysql(postData);
     postData = array;
 
     if(postData.length===0){
       console.log("346 "+postData.length);
       route(handle, pathname, response, postData);
     } else {
       var string ="";
         for (i = 0; i < postData.length; i++) {
           string=postData[i].title+"#|||#"+postData[i].Note;
         }
     
       console.log("34123456 "+postData.length);

       response.end(string);

     }
});

クライアント側のコードもresponseTextを入れるように修正した。

 'xhr.send(dateStr);'+
 'xhr.onreadystatechange = function(){'+
   'if (xhr.status === 200) {'+

      'console.log(xhr.responseText);'+

      'var result = xhr.responseText.split("#|||#");'+
      'console.log(result[0]);'+
      'console.log(result[1]);'+
      'document.getElementsByName(\'diary_title\')[0].value = result[0];'+
      'document.getElementsByName(\'diary_body\')[0].innerHTML = result[1];'+
      '} else {'+
      'console.log("aaaa");'+    
      'console.log("3333333344444444443333");'+
      '}'+
   '};'+

結果的に、カレンダーの日付をクリックすると、日付に紐づけられるタイトルと本文をテキストエリアに表示させることができた。

カレンダーをクリックしたときの挙動として、xmlHttpRequest(xhr)のsendでサーバ側へ日付のデータを送り、"data", "end"部分でそのリクエストを受け、getdataMysqlでMysqlから該当する日付のタイトルと本文のデータを取得し、response.endでタイトル、本文をつなげた文字列を返すといった形になる。サーバへデータを送るときもparseといったもので処理しないといけないし、クライアントへ送るときも配列だとエラーとなったり、なかなかデータやり取りするのも手間がかかる。

やりたいことは一通りやったので、作ったものを少しテストしてみる。