Contenido

Ajax sin usar el objeto xmlhttprequest

4 Ene

+ 9

Ajax, siempre ha estado relacionado al objeto xmlhttprequest, que se encarga de generar una llamada remota y asincrona a nuestro servidor para poder así recuperar datos almacenados. Pero debido a los problemas de cross-browsing hemos tenido que condicionar la creación de este objeto, usando un ActiveX en caso de ser IE6 o inferior.

Pero tambien podemos hacer algo parecido, sin necesidad de condicionar nada, código Javascript de toda la vida. En esta página explican como utilizar le código JS para obtener datos (en formato plano) del servidor sin necesidad de utilizar el objeto xmlhttprequest.

El código

Primero necesitamos un fichero alojado en el servidor que será el encargado de devolvernos los datos. En nuestro caso un .php.

<?php
$html = '<b>This content came from our Ajax Engine</b>';
// Generamos un JS con el contenido de $html
?>
div = document.getElementById('contentdiv');
div.innerHTML = '<?php echo $html; ?>';

Una vez montado este fichero que nos carga una variable ($html) y que mediante Javascript queremos que la inserte dentro del elemento con ID contentdiv, tenemos que montar la función que nos llamará a esta página para obtener los datos.


url = document.location.href;
xend = url.lastIndexOf("/") + 1;
var base_url = url.substring(0, xend);

function ajax_do (url) {
        // ¿La URL empieza por http?
        if (url.substring(0, 4) != 'http') {
                url = base_url + url;
        }

        // Creamos un nuevo elemento <script></script>
        var jsel = document.createElement('SCRIPT');
        jsel.type = 'text/javascript';
        jsel.src = url;

        // Añadimos el elemento al body de nuestro fichero.
        document.body.appendChild (jsel);
}

En esta función estamos creando un tag <script></script> que llamará al fichero que nosotros pasaremos por el parametro URL, y una vez cargado el fichero lo añadirá al elemento body mostrando el resultado de la ejecución del mismo.


<html>
<head>
	<title>Demo 1 - The Basic's</title>
        <script type="text/javascript">
	url = document.location.href;
	xend = url.lastIndexOf("/") + 1;
	var base_url = url.substring(0, xend);
	function ajax_do (url) {
	        // ¿La URL empieza por http?
	        if (url.substring(0, 4) != 'http') {
	        url = base_url + url;
	        }
	        // Creamos un nuevo elemento <script></script>
	        var jsel = document.createElement('SCRIPT');
	        jsel.type = 'text/javascript';
	        jsel.src = url;

       		// Añadimos el elemento al body de nuestro fichero.
	        document.body.appendChild (jsel);
	}	</script>
	</head>
	<body>
	<div id="contentdiv"></div>
		<a href="javascript:ajax_do ('pagina.php');">Cargar contenido</a>
        </body>
</html>

De esta forma estamos haciendo que al hacer click sobre el enlace nos carque el contenido del fichero pagina.php.

[Ejemplo]

  • Solo queria felicitarte por tu web, es actualmente mi preferida… cada dia me enseña algo nuevo y eso para mi es muy importante.

    Pero…. el nuevo diseño no me gusta nada…

    Muchos detalles en css pero para navegar por los articulos es fatal… mucho mejor antes…

    De todas formas… FELICIDADES POR TUS CONTENIDOS.

    Saludos

  • #1 ¿De verdad es tan incómodo? ¿O simplemente que es nuevo y no lo controlas mucho?

    Es que ya he recibido algún que otro comentario al respecto, y la verdad me está empezando a preocupar. Por que yo lo veo mucho más cómodo que antes.

    Un saludo.

  • Yo también lo encuentro incómodo, mas que nada por el menú+titulo abajo.
    La costumbre empuja fuerte, y la gente busca instintivamente el menú+titulo arriba o a un lateral. Abajo da la sensación de que hagas mas scroll del necesario para llegar al contenido. No sé…

  • Me uno a los que no les agrada mucho el nuevo diseño (sin ofender), lo siento un poco incomodo. En cuestion de contenidos tu blog es muy muy bueno, sigue asi, pero si puedes hacer algo por el diseño te lo agradeceremos.

  • Muy buenas campeon. Como siempre un gran diseño y bueno… la verdad eso q dicen de incomodo pos a mi no me lo parece…

    La verdad es q no entiendo a que se refieren los demas con eso de incomodo navegar por los articulos porque yo navego felizmente por ellos.

    Salu2 y felicidades por tu web

  • A mi del diseño lo que no me gusta es el logo que sobresale. Y, y… los comentarios, la imagen de fondo ese… el degradado (de abajo a arriba) al principio es como mu lento y luego va mu rapido… y parece que hay ahi un corte en la imagen (o me da a mi esa sensacion). Lo demas simplemente me encanta 😀

    Por cierto, mu curioso ese metodo de «ajax» xDD

  • Si, de verdad… ): pero le metere mas ganas y mas adelante te digo.

    Saludos.

  • Yo voy a hablar hacerca del post… Lo he intregado para un registro de usuarios y devuelve si existe un usuario o no, pero el problema es que se puede ejecutar una vez cada carga de la página (Solo puedes enviar el formulario una vez cada carga). Alguna solución?

    SAludos!

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.