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]
8 comentarios, 1 referencias
+
#