javascript Basic Ajax senden/empfangen mit node.js



(4)

Ich versuche also, einen sehr einfachen node.js-Server zu erstellen, der eine Anfrage für eine Zeichenkette annimmt, diese zufällig aus einem Array auswählt und die ausgewählte Zeichenkette zurückgibt. Leider habe ich ein paar Probleme.

Hier ist das Frontend:

function newGame()
{
   guessCnt=0;
   guess="";
   server();
   displayHash();
   displayGuessStr();
   displayGuessCnt();
}

function server()
{
   xmlhttp = new XMLHttpRequest();

   xmlhttp.open("GET","server.js", true);
   xmlhttp.send();

   string=xmlhttp.responseText;
}

Dies sollte die Anfrage an server.js senden:

var http = require('http');

var choices=["hello world", "goodbye world"];

console.log("server initialized");

http.createServer(function(request, response)
{
    console.log("request recieved");
    var string = choices[Math.floor(Math.random()*choices.length)];
    console.log("string '" + string + "' chosen");
    response.on(string);
    console.log("string sent");
}).listen(8001);

Es sind also offensichtlich einige Dinge schiefgelaufen:

  1. Ich habe das Gefühl, dass die Art und Weise, wie ich diese beiden Dateien "verbinde", nicht korrekt ist, sowohl in der xmlhttp.open Methode als auch in response.on , um die Zeichenfolge zurück an das Frontend zu senden.

  2. Ich bin ein wenig verwirrt, wie ich diese Seite auf localhost nenne. Das Frontend heißt index.html und der Server postet auf 8001. Auf welche Adresse sollte ich auf localhost zugreifen, um auf die erste HTML-Seite zuzugreifen, nachdem ich server.js initialisiert habe? Soll ich es in .listen(index.html) oder so ändern?

  3. .responsetext es andere offensichtliche Probleme mit dem, wie ich das implementiere (mit .responsetext etc.)

(Entschuldigung für den langen Multi-Fragen Post, aber die verschiedenen Tutorials und die node.js Quelle gehen alle davon aus, dass der Benutzer diese Dinge schon versteht.)


Answer #1

Hier ist ein voll funktionsfähiges Beispiel für das, was Sie erreichen möchten. Ich habe das Beispiel innerhalb von hyperdev und nicht von jsFiddle erstellt, damit Sie den serverseitigen und den clientseitigen Code sehen können.

Code https://hyperdev.com/#!/project/destiny-authorization : https://hyperdev.com/#!/project/destiny-authorization

Arbeitsanwendung anzeigen: https://destiny-authorization.hyperdev.space/

Dieser Code erstellt einen Handler für eine get-Anforderung, die eine zufällige Zeichenfolge zurückgibt:

app.get("/string", function(req, res) {
    var strings = ["string1", "string2", "string3"]
    var n = Math.floor(Math.random() * strings.length)
    res.send(strings[n])
});

Dieser jQuery-Code erstellt dann die Ajax-Anforderung und empfängt die zufällige Zeichenfolge vom Server.

$.get("/string", function(string) {
  $('#txtString').val(string);
});

Beachten Sie, dass dieses Beispiel auf dem Code von Jamund Fergusons Antwort basiert. Wenn Sie dieses nützlich finden, stellen Sie sicher, dass Sie ihn ebenfalls verbessern. Ich dachte nur, dieses Beispiel würde dir helfen zu sehen, wie alles zusammenpasst.


Answer #2

Express macht solche Sachen wirklich intuitiv. Die Syntax sieht folgendermaßen aus:

var app = require('express').createServer();
app.get("/string", function(req, res) {
    var strings = ["rad", "bla", "ska"]
    var n = Math.floor(Math.random() * strings.length)
    res.send(strings[n])
})
app.listen(8001)

http://expressjs.com/guide.html

Wenn Sie jQuery auf der Clientseite verwenden, können Sie Folgendes tun:

$.get("/string", function(string) {
    alert(string)
})

Answer #3

Ich sah folgenden Fehler mit Code (nodejs 0.10.13), von Ampersand zur Verfügung gestellt:

Herkunft ist nicht erlaubt von access-control-allow-origin

Das Problem wurde behoben

response.writeHead(200, {"Content-Type": "text/plain"});

zu

response.writeHead(200, {
                 'Content-Type': 'text/html',
                 'Access-Control-Allow-Origin' : '*'});

Answer #4
  1. Ihre Anfrage sollte an den Server gerichtet sein, NICHT an die Datei server.js, die sie instanziiert. Die Anfrage sollte also etwa so aussehen: xmlhttp.open("GET","http://localhost:8001/", true); Außerdem versuchen Sie, das Front-End (index.html) zu bedienen UND AJAX-Anfragen am selben URI zu bedienen. Um dies zu erreichen, müssen Sie Ihrer server.js eine Logik hinzufügen, die zwischen Ihren AJAX-Anfragen und einer normalen HTTP-Zugangsanfrage unterscheidet. Um dies zu tun, möchten Sie entweder GET / POST-Daten einführen ( http://localhost:8001/?getstring=true ) oder einen anderen Pfad für Ihre AJAX-Anfragen verwenden ( http://localhost:8001/?getstring=true http://localhost:8001/getstring ). Auf dem Serverende müssen Sie dann das Anforderungsobjekt untersuchen, um zu bestimmen, was auf die Antwort geschrieben werden soll. Für die letztere Option müssen Sie das Modul "url" verwenden, um die Anfrage zu analysieren.

  2. Sie rufen zwar listen() korrekt auf, schreiben die Antwort aber falsch. Wenn Sie index.html beim Navigieren zu http://localhost:8001/ bereitstellen möchten, müssen Sie den Inhalt der Datei mit response.write() oder response.end() in die Antwort schreiben. Zuerst müssen Sie fs=require('fs') um auf das Dateisystem zugreifen zu können. Dann müssen Sie die Datei tatsächlich bereitstellen.

  3. XMLHttpRequest benötigt eine Callback-Funktion, die angegeben wird, wenn Sie sie asynchron verwenden (dritter Parameter = true, wie Sie es getan haben) UND etwas mit der Antwort machen wollen. Wie Sie es jetzt haben, ist string nicht undefined (oder vielleicht null ), weil diese Zeile ausgeführt wird, bevor die AJAX-Anfrage abgeschlossen ist (dh der responseText ist noch leer). Wenn Sie es synchron verwenden (dritter Parameter = false), können Sie, wie Sie es getan haben, Inline-Code schreiben. Dies wird nicht empfohlen, da es den Browser während der Anfrage sperrt. Die asynchrone Operation wird normalerweise mit der Funktion onreadystatechange verwendet, die die Antwort nach ihrer Fertigstellung verarbeiten kann. Sie müssen die Grundlagen von XMLHttpRequest lernen. Fang here .

Hier ist eine einfache Implementierung, die alle oben genannten beinhaltet:

server.js:

var http = require('http'),
      fs = require('fs'),
     url = require('url'),
 choices = ["hello world", "goodbye world"];

http.createServer(function(request, response){
    var path = url.parse(request.url).pathname;
    if(path=="/getstring"){
        console.log("request recieved");
        var string = choices[Math.floor(Math.random()*choices.length)];
        console.log("string '" + string + "' chosen");
        response.writeHead(200, {"Content-Type": "text/plain"});
        response.end(string);
        console.log("string sent");
    }else{
        fs.readFile('./index.html', function(err, file) {  
            if(err) {  
                // write an error response or nothing here  
                return;  
            }  
            response.writeHead(200, { 'Content-Type': 'text/html' });  
            response.end(file, "utf-8");  
        });
    }
}).listen(8001);
console.log("server initialized");

Frontend (Teil von index.html):

function newGame()
{
   guessCnt=0;
   guess="";
   server();
   displayHash();
   displayGuessStr();
   displayGuessCnt();
}

function server()
{
   xmlhttp = new XMLHttpRequest();
   xmlhttp.open("GET","http://localhost:8001/getstring", true);
   xmlhttp.onreadystatechange=function(){
         if (xmlhttp.readyState==4 && xmlhttp.status==200){
           string=xmlhttp.responseText;
         }
   }
   xmlhttp.send();
}

Sie müssen mit AJAX vertraut sein. Verwenden Sie das Mozilla Learning Center, um mehr über XMLHttpRequest zu erfahren. Nachdem Sie das grundlegende XHR-Objekt verwenden können, werden Sie höchstwahrscheinlich eine gute AJAX-Bibliothek verwenden wollen, anstatt browserübergreifende AJAX-Anforderungen manuell zu schreiben (z. B. müssen Sie im IE ein ActiveXObject anstelle von XHR verwenden). Der AJAX in jQuery ist hervorragend, aber wenn Sie nicht alles andere brauchen, was jQuery bietet, finden Sie hier eine gute AJAX-Bibliothek: http://microjs.com/ . Sie müssen sich auch mit den here gefundenen node.js-Dokumenten vertraut machen. Durchsuchen Sie http://google.com nach einigen guten node.js-Server- und statischen Dateiserver-Lernprogrammen. http://nodetuts.com ist ein guter Anfang.

UPDATE: Ich habe response.sendHeader() auf den neuen response.writeHead() im obigen Code geändert !!!





node.js