Schauen wir uns ein Codebeispiel in einer HTML5 -Seite an, um Daten zu erhalten, die von HTTP Server über AJAX -Anforderung zurückgegeben wurden. Da wir den Port des Servers als 1337 angeben und HTML5-Seiten von einer Website mit Port 80 ausführen, ist dies ein Cross-Domänen-Betrieb. Das Feld "Access_Control_Allow_Origin" zum HTTP -Antwortheader und das Angeben des Parameters zum Anfordern von Daten vom Server zum Domänennamen + Portnummer (Wenn Sie die Portnummer weglassen, können Sie einen Port unter dem Domänennamen anfordern, um Daten aus dem Server anzufordern).
Statische Seite: Index.html (Hinweis: Es muss in die Serverumgebung platziert werden. Wenn es sich um ein Win7 -System handelt, können Sie den IIS -Service aktivieren und die Seite direkt nach dem Seitentest ausführen.)
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<head Lang = "en">
<meta charset = "utf-8">
<title> AJAX -Anforderung im Knoten (HTML5 -Seite) </title>
<script type = "text/javaScript">
Funktion getData () {
var xhr = new xmlhttprequest ();
xhr.open ("get", "http: // localhost: 1337/", true);
xhr.onreadyStatechange = function () {
if (xhr.readystate == 4) {
if (xhr.status == 200) {
document.getElementById ("res"). Innerhtml = xhr.responsetext;
}
}
}
xhr.send (null);
}
</script>
</head>
<body>
<input type = "button" value = "data" onclick = "getData ()" />
<div id = "res"> dsdf </div>
</body>
</html>
Knotencode:
Die Codekopie lautet wie folgt:
var http = required ("http");
var server = http.createServer (Funktion (req, res) {
if (req.url! == "/favicon.ico") {
Res.WriteHead (200, {"Content-Type": "Text/Plain", "Access-control-allow-origin": "http: // localhost"});
res.write ("Hallo!");
}
res.end ();
});
server.Listen (1337, "localhost", function () {
console.log ("Starten Sie zuzuhören ...");
});
Aktivieren Sie zuerst den Dienst: node server.js
Starten Sie eine statische Seite:
Klicken Sie auf die Schaltfläche "Daten abrufen"
Wenn Sie der Meinung sind, dass es zu problematisch ist, eine Serverumgebung zu konfigurieren, können Sie die Vorteile des Editors ausleihen, um dies zu tun.
Zum Beispiel verwende ich Webstrom 8.0;
Wenn ich die Seite starte, wird dieser Pfad im Browser angezeigt:
Der Port ist 63342. Zu diesem Zeitpunkt wurde der Code unseres Teams geändert:
Server.js -Code des Knotens:
Die Codekopie lautet wie folgt:
var http = required ("http");
var server = http.createServer (Funktion (req, res) {
if (req.url! == "/favicon.ico") {
Res.Writehead (200, {"Content-Type": "Text/Plain", "Access-control-Owlalow-Origin": "http: // localhost: 63342"});
//res.setheader ();
res.write ("Hallo!");
}
res.end ();
});
server.Listen (1337, "localhost", function () {
console.log ("Starten Sie zuzuhören ...");
});
Modifizierte den Wert von "Access-Control-Allow-Origin".
Führen Sie die Demo erneut aus und Sie werden feststellen, dass der gleiche Effekt erreicht wird
Sie können den Antwortheader auch separat durch res.seetheader einstellen.
Sie können die oben genannte res.writeHead () in res.setheader () ändern.
Die Codekopie lautet wie folgt:
var http = required ("http");
var server = http.createServer (Funktion (req, res) {
if (req.url! == "/favicon.ico") {
//res.writehead(200, {"content-type"
res.setheader ("Inhaltstyp", "Text/Ebene");
res.setheader ("Access-control-allow-origin", http: // localhost: 63342 ");
res.write ("Hallo!");
}
res.end ();
});
server.Listen (1337, "localhost", function () {
console.log ("Starten Sie zuzuhören ...");
});
Sorgfältige Schüler haben möglicherweise festgestellt, dass bei der Verwendung der Setheader -Methode ein Statuscode fehlt, z. B. 200. Wie setzen wir den Statuscode fest, wenn wir res.setheader verwenden? Gehen wir später zum Code.
AJAX kehrt am Server -Seite zurück:
Wir können dieses Feld löschen, wenn wir auf der Serverseite zurückkehren.
Setzen res.sendData = false;
Die Codekopie lautet wie folgt:
var http = required ("http");
var server = http.createServer (Funktion (req, res) {
if (req.url! == "/favicon.ico") {
//res.writehead(200, {"content-type"
Res.StatusCode = 200;
res.Senddate = false;
res.setheader ("Inhaltstyp", "Text/Ebene");
res.setheader ("Access-control-allow-origin", http: // localhost: 63342 ");
res.write ("Hallo!");
}
res.end ();
});
server.Listen (1337, "localhost", function () {
console.log ("Starten Sie zuzuhören ...");
});
Der Statuscode wird festgelegt und die Datumsinformationen blockiert.
Res.Getheader (Name) erhält die von uns festgelegten Antwort -Header -Informationen
Res.RemoveHeader (Name); Löscht unsere Header -Informationen. Es muss aufgerufen werden, wenn die Daten in unserer Schreibmethode gesendet werden.
Die Rese.HeaderSent -Immobilie ist ein Boolescher Wert. Wenn der Antwortheader gesendet wurde, ist der Eigenschaftswert wahr; Wenn der Antwortkopf nicht gesendet wurde, ist der Eigenschaftswert falsch.
Server.js Code:
Die Codekopie lautet wie folgt:
var http = required ("http");
var server = http.createServer (Funktion (req, res) {
if (req.url! == "/favicon.ico") {
if (res.headersent)
console.log ("Antwortheader gesendet");
anders
console.log ("Antwortheader nicht gesendet");
Res.Writehead (200, {"Content-Type": "Text/Plain", "Access-control-Owlalow-Origin": "http: // localhost: 63342"});
if (res.headersent)
console.log ("Antwortheader gesendet");
anders
console.log ("Antwortheader nicht gesendet");
res.write ("Hallo!");
}
res.end ();
});
server.Listen (1337, "localhost", function () {
console.log ("Starten Sie zuzuhören ...");
});
Führen Sie die Demo aus, um die Ergebnisse anzuzeigen:
Die Methode res.Write () sendet Daten an den Client und hat tatsächlich einen Rückgabewert.
Wenn die an den Client gesendete Datenmenge klein ist oder die Netzwerkgeschwindigkeit schnell ist, sendet der Knoten die Daten immer direkt an den Kernel -Cache -Bereich des Betriebssystems, holt die Daten dann aus dem Kernel -Cache -Bereich ab und sendet sie an die andere Partei. Zu diesem Zeitpunkt wird Write wahr zurückkehren.
Wenn die Netzwerkgeschwindigkeit langsam ist oder die Datenmenge groß ist, sendet der HTTP -Server die Daten nicht unbedingt sofort an den Client. Der Knoten wird die Daten im Speicher zwischengespeichert und die Daten im Speicher an die andere Partei über den Kernel des Betriebssystems senden, wenn die andere Partei die Daten akzeptieren kann. Zu diesem Zeitpunkt kehrt Schreiben falsch zurück.
Sie können den Inhalt von Test.txt festlegen, um die Ergebnisse zu testen.
Ein einfacher Knoten+AJAX -Effekt wird realisiert. Ist es nicht sehr einfach? Wenn wir komplexere Funktionen erstellen möchten, müssen wir natürlich noch weiter lernen, und wir werden die Initiative ergreifen, um sie in Zukunft zu aktualisieren.