Examinons un exemple de code dans une page HTML5 pour obtenir des données renvoyées par HTTP Server via la demande AJAX. Étant donné que nous spécifions le port du serveur en 1337 et exécuterons des pages HTML5 à partir d'un site Web avec le port 80, il s'agit d'une opération de domaine croisé. Il faut ajouter le champ Access_Control_Allow_origin à l'en-tête de réponse HTTP et spécifier le paramètre pour permettre la demande de données du serveur au nom de domaine + numéro de port (lors de l'omission du numéro de port, tout port sous le nom de domaine est autorisé à demander des données du serveur).
Page statique: index.html (Remarque: il doit être placé dans l'environnement du serveur. S'il s'agit d'un système Win7, vous pouvez activer le service IIS et exécuter la page directement après le test de page.)
La copie de code est la suivante:
<! Doctype html>
<html>
<head lang = "en">
<meta charset = "utf-8">
<Title> Demande ajax dans Node (page HTML5) </TITAL>
<script type = "text / javascript">
fonction 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);
}
</cript>
</ head>
<body>
<input type = "Button" value = "get data" onclick = "getData ()" />
<div id = "res"> dsdf </div>
</docy>
</html>
Code de nœud:
La copie de code est la suivante:
var http = require ("http");
var server = http.createServer (fonction (req, res) {
if (req.url! == "/ favicon.ico") {
res.writehead (200, {"Content-Type": "Text / Plain", "Access-Control-Allow-Origin": "http: // localHost"});
res.write ("Hello!");
}
res.end ();
});
server.Listen (1337, "localhost", function () {
console.log ("Commencez à écouter ...");
});
Activez d'abord le service: Node Server.js
Démarrer une page statique:
Cliquez sur le bouton "obtenir des données"
Si vous pensez qu'il est trop difficile de configurer un environnement de serveur, vous pouvez emprunter les avantages de l'éditeur pour le faire.
Par exemple, j'utilise Webstrom 8.0;
Lorsque je commence la page, ce chemin s'affiche dans le navigateur:
Le port est 63342. À l'heure actuelle, le code de notre équipe a été modifié:
Node's Server.js Code:
La copie de code est la suivante:
var http = require ("http");
var server = http.createServer (fonction (req, res) {
if (req.url! == "/ favicon.ico") {
res.writehead (200, {"Content-Type": "Text / Plain", "Access-Control-Allow-Origin": "http: // localhost: 63342"});
//res.sethEader ();
res.write ("Hello!");
}
res.end ();
});
server.Listen (1337, "localhost", function () {
console.log ("Commencez à écouter ...");
});
Modifié la valeur de "Access-Control-Allow-Origin".
Re-piste la démo et vous constaterez que le même effet sera atteint
Vous pouvez également définir l'en-tête de réponse séparément via Res.seetheader.
Vous pouvez modifier le res.writeHead () ci-dessus sur res.sethEader ();
La copie de code est la suivante:
var http = require ("http");
var server = http.createServer (fonction (req, res) {
if (req.url! == "/ favicon.ico") {
//res.writehead(200 ,"content-ype":"text/plain" ,"access-control-allow-origin":"http://localhost:63342 "});
res.sethEader ("contenu-type", "texte / plain");
res.sethEader ("Access-Control-Allow-Origin", "http: // localhost: 63342");
res.write ("Hello!");
}
res.end ();
});
server.Listen (1337, "localhost", function () {
console.log ("Commencez à écouter ...");
});
Les étudiants prudents ont peut-être découvert que lors de l'utilisation de la méthode Setheader, un code d'état est manquant, comme 200. Ainsi, lorsque nous utilisons Res.Setheader, comment définir le code d'état? Passons au code plus tard.
Ajax revient à la date du serveur:
Nous pouvons supprimer ce champ lors du retour du côté serveur.
Set res.sendData = false;
La copie de code est la suivante:
var http = require ("http");
var server = http.createServer (fonction (req, res) {
if (req.url! == "/ favicon.ico") {
//res.writehead(200 ,"content-ype":"text/plain" ,"access-control-allow-origin":"http://localhost:63342 "});
res.statuscode = 200;
res.sendDate = false;
res.sethEader ("contenu-type", "texte / plain");
res.sethEader ("Access-Control-Allow-Origin", "http: // localhost: 63342");
res.write ("Hello!");
}
res.end ();
});
server.Listen (1337, "localhost", function () {
console.log ("Commencez à écouter ...");
});
Le code d'état est défini et les informations de date sont bloquées.
res.getheader (nom) obtient les informations d'en-tête de réponse que nous définissons
res.RemoveHeader (nom); Supprime nos informations d'en-tête. Il doit être appelé lorsque les données sont envoyées dans notre méthode d'écriture.
La propriété Res.HeadeSent est une valeur booléenne. Lorsque l'en-tête de réponse a été envoyé, la valeur de la propriété est vraie; Lorsque l'en-tête de réponse n'a pas été envoyé, la valeur de la propriété est fausse.
Code server.js:
La copie de code est la suivante:
var http = require ("http");
var server = http.createServer (fonction (req, res) {
if (req.url! == "/ favicon.ico") {
if (res.HeadeSent)
console.log ("En-tête de réponse envoyé");
autre
console.log ("En-tête de réponse non envoyé");
res.writehead (200, {"Content-Type": "Text / Plain", "Access-Control-Allow-Origin": "http: // localhost: 63342"});
if (res.HeadeSent)
console.log ("En-tête de réponse envoyé");
autre
console.log ("En-tête de réponse non envoyé");
res.write ("Hello!");
}
res.end ();
});
server.Listen (1337, "localhost", function () {
console.log ("Commencez à écouter ...");
});
Exécutez la démo pour afficher les résultats:
La méthode res.write () envoie des données au client et elle a en fait une valeur de retour.
Lorsque la quantité de données envoyées au client est petite ou que la vitesse du réseau est rapide, le nœud envoie toujours les données directement à la zone de cache du noyau du système d'exploitation, puis récupère les données de la zone de cache du noyau et l'envoie à l'autre partie. Pour le moment, l'écriture reviendra vrai.
Lorsque la vitesse du réseau est lente ou que la quantité de données est importante, le serveur HTTP n'enverra pas nécessairement les données au client immédiatement. Le nœud mettra en cache les données en mémoire et enverra les données en mémoire à l'autre partie via le noyau du système d'exploitation lorsque l'autre partie peut accepter les données. À l'heure actuelle, l'écriture revient fausse.
Vous pouvez définir le contenu de Test.txt pour tester les résultats.
Un effet simple de nœud + ajax est réalisé. N'est-ce pas très simple? Bien sûr, si nous voulons créer des fonctions plus complexes, nous devons toujours en savoir plus et nous prendrons l'initiative de les mettre à jour à l'avenir.