Ajax desde nodeJS
Es una tecnica de desarrollo web donde las aplicaciones se ejecutan en el navegador, sirve para realizar cambios sobre las paginas sin recargarlas, donde los datos se piden al servidor y se cargan en segundo plano.
Instalamos el paquete jQuery
npm install jquery
Creamos la siguiente ruta
var router = express.Router();
router.get('/', function(req, res, next) {
var listausuarios = ['juan','pedro','maria','antonio','luis'];
res.send({
usuarios : listausuarios //Envia datos en formato JSON
});
});
module.exports = router;
En el modulo creamos una lista de
usuarios y enviamos la respuesta como JSON
Insertamos en el modulo principal
que use la rutas:
app.get('/',function(req,res,next){
res.render('index.html');
});
res.render('index.html');
});
app.use('/ajax',ajax);
Si
estamos en localhost nuesta ruta de peticion de datos es:
http://localhost:4200/ajax
Creamos un
archivo llamado index.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./viewsfiles/javascripts/miSriptNavegador.js"></script>
</head>
<body>
<button id="boton" name="boton">Pulsar</button>
<div id="div">
</div>
</body>
</html>
Donde insertamos el script:
<script src="./viewsfiles/javascripts/miSriptNavegador.js"></script>
Creamos un archivo
llamado miScript.js en la carpeta principal del proyecto:
var $boton = null;
$(document).ready(function () {
$boton = $('button#boton');
$boton.click(function(){
console.log('pulsado');
$.ajax({
url: '/ajax', //pide el formato JSON a la url
success: function(respuesta) { //Se ejecuta la funcion si ha habido exito
var listaUsuarios = $("#div");
//datos del JSON
$.each(respuesta.usuarios, function(index, elemento) { //Para cada elemento
listaUsuarios.append(
'<div>'
+ '<p>' + elemento + '</p>'
+ '</div>'
);
});
},
error: function() {
console.log("No se ha podido obtener la información");
}
});
});
});
Verificamos que tengamos lo siguiente puesto en el script de package.json:
"browser": " browserify miScript.js -o viewsfiles/javascripts/miSriptNavegador.js"
Ejecutamos
el comando siguiente para adaptar el modulo a nodeJS:
npm
run browser
Donde
el método
$.ajax()
tiene la siguiente sintaxis:
$.ajax(url,
{ parametros de ejecución } );
Los parametros son los siguientes:
- type : Tipo de la petición, GET o POST, get es el tiene por defecto
- url : Url de la peticion.
- data : Datos que se envian al servidor.
- dataType : Tipo de datos que se obtienen del servidor.
- success : Si hay éxito se ejecuta la función.
- error : Si no hay éxito se ejecuta la función.
No hay comentarios:
Publicar un comentario