Ajax es una técnica para cargar asíncronamiente datos que podremos usar en nuestras páginas web. Esta técnica ha permitido a las aplicaciones web que evolucionen hasta el nivel actual y darán lugar a nuevas aplicaciones más potentes y complejas.
Esta técnica se basa en el uso de xmlhttprequest() para lanzar llamadas de forma asíncrona al servidor, pudiendo así devolver datos cargados posteriormente a la carga de la página. De esta forma la carga inicial de la página puede ser menor y dejar a elección del usuario cargar los datos a medida que los vayan necesitando.
El problema no lo encontramos con la cantidad de datos. Si el número de datos devueltos por el servidor es muy alto esto suele convertirse en una larga espera, con el fichero .gif de loading reglamentario.
Para intentar mitigar este problema he estado haciendo una serie de pruebas, con fín de dejar los ficheros XML que hasta ahora he estado usando en algunos proyectos.
XML
Durante mucho tiempo ha sido el sistema usado en muchas implementaciones para obtener datos de forma asíncrona. De ahí el propio nombre de AjaX (Asynchronous JavaScript And XML). Estos ficheros, generalmente ofrecen mayor interconexión con multiples herramientas.
En un uso para carga asíncrona, nos encontramos como príncipal problema el peso del fichero y tiempo invertido en recorrer el fichero XML para obtener los datos.
....
<hotel>
<code>0000</code>
<name>Hotel0</name>
<direction>Calle0</direction>
<telef>Telf0</telef>
<geo>
<lat>00</lat>
<lng>00</lng>
</geo>
</hotel>
....
// Javascript
var hotelDescription = data, hotelList = [];
var data = data.getElementsByTagName("hotel");
for (var x in data) {
var hotel = data[x];
if (!hotel.getElementsByTagName) continue;
hotelList.push(hotel.getElementsByTagName("name")[0].firstChild.data);
hotelDescription[hotel.getElementsByTagName("name")[0].firstChild.data] = {
code: hotel.getElementsByTagName("code")[0].firstChild.data,
name: hotel.getElementsByTagName("name")[0].firstChild.data,
direction: hotel.getElementsByTagName("direction")[0].firstChild.data,
telf: hotel.getElementsByTagName("telef")[0].firstChild.data,
geo: {
lat: hotel.getElementsByTagName("lat")[0].firstChild.data,
lng: hotel.getElementsByTagName("lng")[0].firstChild.data
}
};
}JSON
La primera alternativa, fué JSON, una implementación muy clara y natural de mostrar datos. Al tratarse de un fichero TXT podemos hacer que ocupe menos espacio y al evitar la estructura XML conseguimos que el tiempo invertido en recorrer el XML para obtener los datos.
Pero por contra, para poder usar los datos obtenidos hemos de usar la función eval() lo que nos penaliza la carga del fichero. Una vez evaluado el código el tiempo empleado en preparar los datos para poder usarlos es mínimo y sin duda, el más rápido de los sistemas exáminados.
....
{
code: 0000,
name: 'Hotel0',
direction: 'Calle0',
telef: 'Telf0',
geo: {
lat: 00,
lng: 00
}
}
....
// Javascript
var hotelDescription = data, hotelList = [];
for (var x in data) hotelList.push(data[x].name);TXT
La gente de Flickr comentaba hace poco como hicieron para devolver más de 10.000 resultados en menos de 200ms. Y obviamente me ví obligado a contemplar esta técnica.
Se basa en usar una estructura preestablecida en un fichero de texto plano. Usando un separador por registro y otro por campos dentro de cada registro. De esta forma a la hora de cargar el fichero simplemente tendremos que hacer una serie de split() para cortar la cadena y convertirla en una variable que podamos usar.
Como mayor ventaja, esta técnica ofrece un tamaño de fichero mucho más pequeño que los comentados anteriormente. Por contra el tiempo de proceso sobre los datos para obtener una variable que pdamos usar es mucho mayor que la necesaria para procesar el fichero JSON, pero bastante menor que el empleado para un fichero XML.
0000:Hotel0:Calle0:Telf0:00:00|...
// Javascript
var tmp = data.split("|");
var hotelList = [];
var hotelDescription = [];
for (var x = 0, len = tmp.length; x<len; x++) {
var hotel = tmp[x].split(":");
hotelList.push(hotel[1]);
hotelDescription[hotel[1]] = {
code: hotel[0],
name: hotel[1],
direction: hotel[2],
telf: hotel[3],
geo: {
lat: hotel[4],
lng: hotel[5]
}
};
}Comparativas
Para las pruebas, he realizado una pequeña aplicacion que nos permite cargar 500, 1000, 2000, 5000 o 10000 registros en los formatos anteriores (XML, JSON o TXT). Para los gráficos he usado los resultados obtenidos en Firefox 3.0.7 en Mac Os X.
Si queréis podéis probar por vosotros mismos los resultados que obtendríais en diferentes navegadores directamente aqui.
500 registros
1000 registros
2000 registros
5000 registros
10000 registros
Parece que los gráficos hablan por si solos, y podemos sacar una información interesante.
Conclusiones
De los resultados obtenemos las siguientes premisas:
XML
- Son los ficheros más pesados
- El tiempo de procesamiento es mayor que los demás.
JSON
- Son los ficheros que más tiempo tardan en cargar completamente.
- El tiempo de procesamiento es el más rápido de los testeados.
TXT
- Son los ficheros menos pesados.
- El tiempo de proceso y carga son bajos aunque no destacan frente a los demás.
- El tiempo total es el menor de los testeados.
Descargar el proyecto
He subido el proyecto a Github para que los descargueis y usais si quereis.
25 comentarios, 6 referencias
+
#