JavascriptとXHRサーバーのリクエスト

Question

私は現在JavaScriptクラスの課題を取り組んでおり、何か助けや指示が必要です。これは、ユーザーの入力を介して長さと幅を取得し、領域と周囲を計算し、テキストボックスに表示する非常に単純なプログラムです。

この部分は簡単なものでしたが、ユーザーが入力した長さと幅をnode.jsエクスプレスサーバーに送信するようにプログラムを変更する必要がありました。サーバーは、urlにある2つのユーザー入力パラメーターを使用して計算を実行することになっています。計算が完了したら、領域と周囲の値がjsonオブジェクトに返されます。

私が実行している2つの問題は、ユーザー入力をエクスプレスサーバーに送信できないことと、元の.jsファイルで返されたjsonオブジェクトをキャッチする方法を見つけることができないことです。以下は、メインのJavaScriptファイルとそれに続くエクスプレスサーバーファイルです。どんな助けや指針も大変ありがとうございます。

これらの割り当てについて説明した。

• は、上記のURLが2つのURL paramsは、長さと幅を期待するべきである「/ CALC /」
• URLへの要求を受け入れるようにハンドラを記述します。例えば。ハンドラの本体で
• http://localhost/calc/?length=1&width=1、面積と周長を計算し、次のようにJSONオブジェクトにそれらを返す：{「面積」：1、「境界」：1}

• に要求を受け入れ、別のハンドラを書きますこのハンドラは、添付されたHTMLファイルを返す必要があります。 - クライアント側で計算する代わりに、新しいアプリケーションサーバーを活用するために、HTMLファイルとJSファイル（添付）を更新します。

  function calculate(){ 
  
  // alert statements are great for troublshooting, they let you know where you are in the program. 
  console.log('You just clicked the button!'); 
  alert("This must be a number, not something else"); 
  
  /* 
  Get a reference to the HTML element with the ID of 'length'. 
  Please note, this is a reference to the HTML element, NOT WHAT YOU TYPED IN THE BOX! 
  If you need to get what you typed in the box you will nedd to access the element's 'value' attribute, then convert it to a float. 
  */ 
  var length_element = document.getElementById('length'); 
  var length = parseFloat(length_element.value); 
  
  var width_element = document.getElementById('width'); 
  var width = parseFloat(width_element.value); 
  
  
  // Now make an XHR request to your server via the URL below. 
  // http://localhost:3000/calc?length=length&width=width 
  // Capture the results in the variables below 
  var xhttp = new XMLHttpRequest(); 
  xhttp.open("GET", "http://localhost:3000/calc/?legnth=" + length + "&width=" + width, true); 
  xhttp.send(null); 
  
  
  // Don't know what to do beyond this part or where to go from here. 
  var area = 
  var perimeter = 
  
  
  
  // If you need to set the 'value' attribute of a text box you can do it like this 
  var area_element = document.getElementById('area'); 
  area_element.value = area; 
  
  var perimeter_element = document.getElementById('perimeter'); 
  perimeter_element.value = perimeter; 
  
  } 
  

  セカンドファイル

  const express = require('express'); 
  const app = express(); 
  
  var path = require("path"); 
  
  app.get('/calc/', function (req, res) { 
      var length = req.query.length; 
      var width = req.query.width; 
      var area = length*width; 
      var perimeter = ((length*2) + (width*2)); 
      res.send({ "area": area, "perimeter": perimeter }); 
  }); 
  
  app.get('/', function(req,res){ 
      res.sendFile(path.join(__dirname+'/index.html')); 
      }) 
  
  app.listen(3000, function() { 
      console.log('Example app listening on port 3000!') 
  }); 
  

Answer 1

あなたは基本的にxhttp.onload上xhttpのオフ応答を読み取る必要があります。ここに簡単な例があります

var xhttp = new XMLHttpRequest(); 
xhttp.open("GET", "http://localhost:3000/calc/?legnth=" + length + "&width=" + width, true); 
xhttp.send(); 

xhttp.onload = function (e) { 
    var response = xhttp.response; 
} 

あなたは、サーバースクリプトから送信されているものに応じて応答データを解析する必要があります。

あり、より完全なソリューションのための世話をするためにContent-Typeヘッダencodingなどのような他のものがありますが、あなたはしばらくのJSON.parseと離れて行うことができ、基本的なJavaScriptに固執する必要があると仮定。