Veamos un ejemplo de código en una página HTML5 para obtener los datos devueltos por el servidor HTTP a través de la solicitud AJAX. Dado que especificamos el puerto del servidor como 1337 y ejecutaremos páginas HTML5 desde un sitio web con el puerto 80, esta es una operación de dominio cruzado. Requiere agregar el campo Access_control_allow_origin al encabezado de respuesta HTTP, y especificando el parámetro para permitir la solicitud de datos del servidor al número de nombre de dominio + el número de puerto (al omitir el número de puerto, cualquier puerto bajo el nombre de dominio puede solicitar datos del servidor).
Página estática: index.html (nota: debe colocarse en el entorno del servidor. Si es un sistema Win7, puede habilitar el servicio IIS y ejecutar la página directamente después de la prueba de la página).
La copia del código es la siguiente:
<! Doctype html>
<html>
<head lang = "en">
<meta charset = "utf-8">
<title> solicitud Ajax en nodo (página html5) </title>
<script type = "text/javaScript">
función 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.esponsetext;
}
}
}
XHR.SEND (NULL);
}
</script>
</ablo>
<Body>
<input type = "button" value = "get data" onClick = "getData ()" />
<div id = "res"> dsdf </div>
</body>
</html>
Código de nodo:
La copia del código es la siguiente:
var http = require ("http");
var server = http.createServer (function (req, res) {
if (req.url! == "/favicon.ico") {
Res.Writehead (200, {"Content-type": "Text/Plain", "Access-Control-Allow-Origin": "http: // localhost"});
res.write ("¡Hola!");
}
res.end ();
});
server.listen (1337, "localhost", function () {
console.log ("Empiece a escuchar ...");
});
Primero habilite el servicio: Node Server.js
Comience una página estática:
Haga clic en el botón "Obtenga datos"
Si cree que es demasiado problemático configurar un entorno de servidor, puede tomar prestadas las ventajas del editor para hacerlo.
Por ejemplo, estoy usando WebStrom 8.0;
Cuando comienzo la página, esta ruta se muestra en el navegador:
El puerto es 63342. En este momento, el código de nuestro equipo ha sido modificado:
Código de Node's Server.js:
La copia del código es la siguiente:
var http = require ("http");
var server = http.createServer (function (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 ("¡Hola!");
}
res.end ();
});
server.listen (1337, "localhost", function () {
console.log ("Empiece a escuchar ...");
});
Modificado el valor de "Origin de acceso de acceso de acceso".
Vuelva a ejecutar la demostración y encontrará que se logrará el mismo efecto
También puede establecer el encabezado de respuesta por separado a través de Res.Seetheader.
Puede cambiar el res.writehead () a res.setheader ();
La copia del código es la siguiente:
var http = require ("http");
var server = http.createServer (function (req, res) {
if (req.url! == "/favicon.ico") {
//res.writehead(200,{"content-type":"text/plain","access-control- elow-origin":"http://localhost:63342 "});
res.setheader ("Content-type", "Text/Plain");
res.setheader ("Access-Control-Allow-Origin", "http: // localhost: 63342");
res.write ("¡Hola!");
}
res.end ();
});
server.listen (1337, "localhost", function () {
console.log ("Empiece a escuchar ...");
});
Los estudiantes cuidadosos pueden haber descubierto que al usar el método Setheader, falta un código de estado, como 200. Entonces, cuando usamos Res.Setheader, ¿cómo establecemos el código de estado? Vamos al código más tarde.
AJAX regresa en la fecha del lado del servidor:
Podemos eliminar este campo al volver en el lado del servidor.
Establecer res.sendData = false;
La copia del código es la siguiente:
var http = require ("http");
var server = http.createServer (function (req, res) {
if (req.url! == "/favicon.ico") {
//res.writehead(200,{"content-type":"text/plain","access-control- elow-origin":"http://localhost:63342 "});
res.statuscode = 200;
res.senddate = false;
res.setheader ("Content-type", "Text/Plain");
res.setheader ("Access-Control-Allow-Origin", "http: // localhost: 63342");
res.write ("¡Hola!");
}
res.end ();
});
server.listen (1337, "localhost", function () {
console.log ("Empiece a escuchar ...");
});
El código de estado está establecido y la información de la fecha está bloqueada.
res.getheader (nombre) obtiene la información del encabezado de respuesta que establecemos
res.removeheader (nombre); Elimina nuestra información del encabezado. Debe llamarse cuando los datos se envían en nuestro método de escritura.
La propiedad Res.headerssent es un valor booleano. Cuando se ha enviado el encabezado de respuesta, el valor de la propiedad es verdadero; Cuando no se ha enviado el encabezado de respuesta, el valor de la propiedad es falso.
Código de server.js:
La copia del código es la siguiente:
var http = require ("http");
var server = http.createServer (function (req, res) {
if (req.url! == "/favicon.ico") {
if (res.headerssent)
console.log ("Encabezado de respuesta enviado");
demás
console.log ("Encabezado de respuesta no enviado");
Res.Writehead (200, {"Content-type": "Text/Plain", "Access-Control-Allow-Origin": "http: // localhost: 63342"});
if (res.headerssent)
console.log ("Encabezado de respuesta enviado");
demás
console.log ("Encabezado de respuesta no enviado");
res.write ("¡Hola!");
}
res.end ();
});
server.listen (1337, "localhost", function () {
console.log ("Empiece a escuchar ...");
});
Ejecute la demostración para ver los resultados:
El método Res.Write () envía datos al cliente, y en realidad tiene un valor de retorno.
Cuando la cantidad de datos enviados al cliente es pequeño o la velocidad de la red es rápida, el nodo siempre envía los datos directamente al área de caché del núcleo del sistema operativo, y luego obtiene los datos del área de caché del núcleo y los envía a la otra parte. En este momento, Write volverá verdadero.
Cuando la velocidad de la red es lenta o la cantidad de datos es grande, el servidor HTTP no necesariamente enviará los datos al cliente de inmediato. El nodo almacenará en caché los datos en la memoria y enviará los datos en la memoria a la otra parte a través del núcleo del sistema operativo cuando la otra parte pueda aceptar los datos. En este momento, escribir devuelve falso.
Puede establecer el contenido de Test.txt para probar los resultados.
Se realiza un nodo simple+AJAX. ¿No es muy simple? Por supuesto, si queremos crear funciones más complejas, aún necesitamos aprender más, y tomaremos la iniciativa de actualizarlas en el futuro.