Ajax es una de las técnicas para el desarrollo de aplicaciones web de forma interactivas más extendidas en la actualidad, por ello, NodeJS no se queda atrás y nos permite cargar nuevo contenido de forma directa sin tener que recargar toda la página.

 

Instalando el modulo de XML

Lo primero que debemos realizar es instalar un módulo para lidiar con XML, es decir para manejar objetos y llevarlos a XML y viceversa.

1
npm install xml2js

 

Recibiendo datos desde el servidor

Vamos a crear una sencilla aplicación que nos muestre información sobre los datos básicos de usuarios que existen en nuestro sistema. Una vez que hayamos instalado el módulo de XML, procederemos con crear la página HTML que mostraremos al cliente y que recibirá la información del servidor:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!doctype html>
<html>
<head>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js>
</script>
<style>
#frm, #raw {display:block; float:left; width:210px}
#raw {height:150px; width:310px; margin-left:0.5em}
</style>
</head>
<body>
<form id='frm'>
Perfil:
<select id='profiles'>
<option></option>
</select>
<br>
Formato:
<select id='formats'>
<option value='json'> JSON </option>
<option value='xml'> XML </option>
</select>
<br><br>
<div id='output'></div>
</form>
<textarea id='raw'></textarea>
</body>
</html>

Esta página nos mostrará 2 componentes <SELECT> donde mostraremos los nombres de los usuarios que deseamos mostrar y el tipo de salida que queremos obtener ( XML / JSON). Los componentes <SELECT> se cargarán de forma automática. Lo siguiente es crear nuestro servidor en  NodeJS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
var http = require('http');
var fs = require('fs');
var path = require('path');
var profiles = require('./profile');
var xml2js = require('xml2js');
var index = fs.readFileSync('index.html');
var routes, mimes = {xml: "application/xml", json: "application/json"};

routes = {
'profiles': function (format) {
return output(Object.keys(profiles), format);
},
'/profile': function (format, basename) {
return output(profiles[basename], format, basename);
} };
function output(content, format, rootNode) {
if (!format || format === 'json') {
return JSON.stringify(content);
}
if (format === 'xml') {
return (new xml2js.Builder({
rootName: rootNode
})).buildObject(content);
} }

http.createServer(function (request, response) {
var dirname = path.dirname(request.url),
extname = path.extname(request.url),
basename = path.basename(request.url, extname);
extname = extname.replace('.', ''); //remove period
response.setHeader("Content-Type", mimes[extname] ||
'text/html');
if (routes.hasOwnProperty(dirname)) {
response.end(routes[dirname](extname, basename));
return;
}
if (routes.hasOwnProperty(basename)) {
response.end(routes[basename](extname));
return;
}
response.end(index);
}).listen(8080);

El servidor consta de 2 rutas, una que nos retornará los nombres de los usuarios, y la otra ruta nos retornará la información para un usuario en particular.  Ahora nos falta el código JQuery que nos permite realizar las peticiones AJAX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script>
$.get('http://localhost:8080/profiles',
function (profile_names) {
$.each(profile_names, function (i, pname) {
$('#profiles').append('<option>' + pname + '</option>');
});
}, 'json');

$('#formats, #profiles').change(function () {
var format = $('#formats').val();
$.get('http://localhost:8080/profile/' + $('#profiles').val() +
'.' + format,
function (profile, stat, jqXHR) {
var cT = jqXHR.getResponseHeader('Content-Type');
$('#raw').val(profile);
$('#output').html('');
if (cT === 'application/json') {
$.each($.parseJSON(profile), function (k, v) {
$('#output').append('<b>' + k + '</b> : ' + v + '<br>');
});
return; }
if (cT === 'application/xml') {
profile = jqXHR.responseXML.firstChild.childNodes;
$.each(profile,
function (k, v) {
if (v
&& v.nodeType === 1) {
$('#output').append('<b>' + v.tagName + '</b> : ' +
v.textContent + '<br>');
}
});
}
}, 'text');
});
</script>

Por último, creamos un sencillo archivo con los perfiles (profile.js) que deseamos mostrar:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module.exports = {
Juan: {
nombre: "Juan Perez",
twitter: "juanito",
github: "jr",
location: "San José, CR",
observacion: "Fundador ONG Manos Limpias"
}, Manuel: {
nombre: "Manuel Morillo",
twitter: "manny",
github: "mn",
location: "San José, CR",
observacion: "SAP"

} };

 

(Visited 777 times, 1 visits today)