La notación de objetos Javascript (JSON) es un formato ampliamente utilizado para enviar y recibir datos hacia o desde el servidor. En este artículo, utilizaremos la API de búsqueda para enviar y recibir datos del servidor NodeJS .
Ventajas de JSON:
- Debido a su sintaxis fácil y pequeña, ejecuta la respuesta de una manera más rápida.
- Es compatible con una amplia gama de navegadores.
- El análisis en el lado del servidor usando JSON es muy rápido.
- Es el formato más adecuado para transferir datos de cualquier tamaño. Esto se debe al hecho de que JSON almacena datos en arrays, lo que facilita su transmisión.
¿Por qué usar la API de búsqueda?
- Fetch API es un método moderno que permite a los navegadores web enviar requests HTTP a los servidores.
- Es similar a XMLHttpRequest pero mucho más simple y claro.
- Hace uso de Javascript Promises para brindar opciones más personalizables para realizar requests de servidor desde navegadores web.
Configuración e instalación
Paso 1: Cree una carpeta llamada SendDataToClient y ejecute el siguiente comando para iniciar una aplicación NodeJS.
npm init -y
Paso 2: instale los paquetes npm necesarios con el siguiente comando.
npm install express body-parser
Paso 3: Cree index.html y server.js en su directorio de Proyecto.
Estructura del proyecto: Ahora, nuestro directorio de proyectos se verá así.
Código frontend: la estructura es sencilla, con dos entradas: una para el nombre y otra para el correo electrónico. Un botón de envío para enviar los datos de entrada al servidor y un párrafo vacío para mostrar la respuesta JSON del servidor.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Send data to client</title>
<script>
function sendData() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var result = document.getElementById("result");
fetch("/jsondata", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ name: name, email: email }),
})
.then(function (response) {
return response.json();
})
.then(function (data) {
result.innerHTML = data.msg;
})
.catch(function (error) {
console.log(error);
});
}
</script>
</head>
<body>
<h1 style="color: green">GFG</h1>
<input type="text" id="name" placeholder="Your name" />
<input type="email" id="email" placeholder="Email" />
<button onclick="sendData()">Send</button>
<p id="result" style="color: orange"></p>
</body>
</html>
Código de backend: el marco Express con NodeJS se usa para construir el servidor, que se ejecuta en el puerto 3000 . Cada vez que el usuario hace clic en el botón Enviar, envía una solicitud POST que contiene datos JSON en la ruta /jsondata y luego el servidor responde con una respuesta JSON.
server.js
const express = require("express");
const bodyParser = require("body-parser");
const app = express();
app.use(express.json());
app.get("/", function (req, res) {
res.sendFile(__dirname + "/index.html");
});
app.post("/jsondata", function (req, res) {
res.json({ msg: `Hello ${req.body.name}, your email is ${req.body.email}` });
});
app.listen(3000, function () {
console.log("Server started on port 3000");
});
Pasos para Ejecutar la Aplicación: Para ejecutar la aplicación usando el siguiente comando:
node server.js
Salida: Vaya a http://localhost:3000/ para ver la pantalla de salida.
Publicación traducida automáticamente
Artículo escrito por vishalkumar98765432 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA