Javascript- und XHR-Serveranfragen

Question

Ich arbeite gerade an einer Aufgabe für meine JavaScript-Klasse und brauchte Hilfe oder eine Anleitung, um loszulegen. Es ist ein sehr einfaches Programm, das die Länge und Breite durch Benutzereingaben ermittelt, dann den Bereich und den Umfang berechnet und in Textfeldern anzeigt.

Dieser Teil war einfach genug zu tun, aber wir müssen dann das Programm so ändern, dass es die vom Benutzer eingegebene Länge und Breite an einen Node.js Express-Server sendet. Der Server soll die Berechnungen mit den 2 vom Benutzer eingegebenen Parametern durchführen, die sich in der URL befinden. Nachdem die Berechnungen abgeschlossen sind, werden die Bereichs- und Perimeterwerte in einem JSON-Objekt zurückgegeben.

Jetzt die 2 Probleme, die ich in läuft, ist, dass ich nicht die Benutzereingaben an den Express-Server senden kann und ich auch nicht herausfinden, wie das zurückgegebene JSON-Objekt in der ursprünglichen JS-Datei zu fangen. Unten ist die Haupt-JavaScript-Datei gefolgt von der Express-Server-Datei. Jede Hilfe oder Hinweise werden sehr geschätzt.

Dies waren die Anweisungen für die Zuordnung:

• einen Handler Schreibanforderungen an die URL "/ calc /"
• Die URL sollte erwarten 2 URL params, Länge und Breite oben zu akzeptieren. z.B. http://localhost/calc/?length=1&width=1
• Im Körper des Handlers, die Berechnung der Fläche und Umfang und bringt sie in einem Objekt JSON wie folgt: { "Bereich": 1 "Perimeter": 1}

• weiteren Handler schreiben, die auf Anfragen akzeptiert Die URL "/", dieser Handler sollte die angehängte HTML-Datei zurückgeben -Die HTML- und JS-Dateien (angehängt) aktualisieren, um Ihren neuen Anwendungsserver zu nutzen, anstatt auf der Clientseite zu berechnen.

  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; 
  
  } 
  

  Zweite Datei

  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

Sie müssen im Grunde die Antwort aus der xhttp auf xhttp.onload lesen. Hier ist ein einfaches Beispiel

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; 
} 

Sie haben Ihre Antwortdaten je nach analysieren, was vom Server-Skript gesendet wird.

Es gibt andere Dinge, wie Content-Type Header encoding usw. kümmern für eine vollständigere Lösung, aber vorausgesetzt, Sie zu grundlegenden JavaScript bleiben möchten, können Sie sich für den Moment mit JSON.parse tun.