Efecto Ajax con Javascript puro

[jorgelpadronb]

Saludos amigos. Recien acabo de obtener ejemplos de como funciona Ajax. realmente me ha saltado la curiosidad, pues según tengo entendido Ajax es un framework basado en Javascript (corríjanme sin estoy errado). Si es así, tiene que ser posible lograr con Javascript puro lo mismo que hace Ajax. O sea llamar a una aplicación PHP y volcar el resultado HTML de la misma sobre cualquier contenedor de mi página HTML, sin que mi página tenga PHP en si. Y supongo que esto funciona también si la aplicación php está en una localización remota. Esta tecnología me permite hacer consultas a una BD, a través de una aplicación php remota e incluir los resultados en sitio web estático? Quisiera saber como se puede hacer eso con Javascript puro (sin frameworks). Ustedes dirán: y por qué no lo haces con Ajax? Eso es razonable, pero la curiosidad me lleva a querer saber como funciona desde lo más básico. Saludos.

[zerokilled]

buenas,
ajax no es un framework de javascript. de hecho, no tiene ninguna relación con los frameworks. ajax no es nada más que una tecnología adicional en el desarrollo web del lado cliente. en concreto, mediante el objeto XMLHttpRequest (XHR). me gusta pensar que el nombre ajax es el nombre comercial que se le dio a la combinación de javascript + http, asi como dhtml es el nombre comercial de la combinación entre html + css + javascript.

por otro lado, debido a que XHR es una extensión (módulo) de javascript eso significa que esta regído por las restrincciones de javascript. es decir, no es posible realizar peticiones a dominios externos. adicionalmente, XHR solo trabaja con el protocolo http. o sea, no es posible conectar ajax con una base de datos. piensalo de esta manera, XHR es un puente que enlaza cliente/servidor mediante comunicación http pero en el trasfondo. el hecho de que se puede traer contenido dinámico es gracia al lenguaje de servidor quien se encarga de generar el contenido. si quieres hacerlo con javascript puro, entonces debes investigar acerca del objeto XMLHttpRequest.

[jorgelpadronb]

Saludos amigo, gracias por tu respuesta. A ver, sgún me dices ajax no es un framework, pero sí está basado en javascript y funcional del lado del cliente, cierto?. Entonces, debe poderse ver el código fuente para saber como funciona. Como puedo verlo?

Por otra parte, es razonable que ajax no pueda conectar con BD, pero sí puede utilizar un "intermediario" programado en PHP, consultándolo por HTTP.

Lo que me desiluciona un poco es lo que me dices de que no puede hacer llamadas remotas a dicho código código PHP. Eso quiere decir que mi PHP para acceder a la BD tiene que estar dentro del mismo sitio desde el cual hago la llamada http con ajax?

Saludos.

[zerokilled]

en circunstancias normales, en XHR no es posible enviar peticiones fuera del mismo dominio. hay una forma pero no estoy orientado en todos factores que ello implica. es posible si el sitio externo envia el header http access-control-allow-origin. en dicho header se especifican las URLs que tienen permiso. de modo que si no tienes control del dominio externo, dudosamente podrás hacer una petición XHR externa. ha no ser que el dominio externo este abierto al público. por otro lado, supongo que debes agregar el factor de si el navegador tiene soporte para esa característica. https://developer.mozilla.org/En/HTT...l-Allow-Origin

Entonces, debe poderse ver el código fuente para saber como funciona. Como puedo verlo?

no entiendo a que te refieres con eso. XMLHttpRequest es un objeto nativo. para ver el código fuente de un objeto/función/método nativo, tendrías que ver el código fuente original del motor de javascript. no todos los navegadores utilizan el mismo, javascript engine.

[jorgelpadronb]

Iniciado por zerokilled

no entiendo a que te refieres con eso. XMLHttpRequest es un objeto nativo. para ver el código fuente de un objeto/función/método nativo, tendrías que ver el código fuente original del motor de javascript. no todos los navegadores utilizan el mismo, javascript engine.

No te preocupes, en realidad yo por desconocimiento no supe formular bien la pregunta. Estuve investigando un poco sobre el tema. Mi pregunta debió haber sido: como puedo ver el código fuente que usa jquery para trabajar con ajax.

De todas formas no importa, pues ya encontré una solución fenomenal. Estuve googleando y encontré esta joyita, que después de algunas adaptaciones me vino como anillo al dedo.

Este es el Index.htm en el sitio estático.

Código HTML:

<html>
  <head>
    <title>Titulo</title>
    <script type="text/javascript">
        var BaseURL = '';
        var Oid = '';
        function Sp(URL){
          BaseURL = URL;
        }
        function Rp(HTMLResponse){
          var Obj = document.getElementById(Oid);
          Obj.innerHTML = HTMLResponse;
        }
        function Rq(Cid,File,Prm) {
          Oid = Cid
          var script = document.createElement("script");
          src =  '' + BaseURL + File;
          if(Prm!='')src = src + '?' + Prm;
          script.src = src;
          script.type = "text/javascript";
          document.getElementsByTagName("body")[0].appendChild(script);
        }
    </script>
  </head>
  <body onload="Sp('Http://urldelsitio/')">
  <input type="button" value="Mostrar" onclick="Rq('div1','batch.php','texto=TEXTOPRUEBA')">
  <div id="div1"></div>
  </body>
</html>
 

Y esta es la aplicación batch.php que se va a llamar desde el HTML con javascript.

Código PHP:

<?PHP
$HTML = '';
for($i=0;$i<=10;$i++){
  $HTML .= '<h1>'.$_GET['texto'].'-'.$i.'</h1>';
}
echo "Rp('".$HTML."');";
?>
 

Lo que hace esto es simular el funcionamiento de ajax. Llama a la aplicación batch.php y pone el resultado HTML de la misma dentro de un DIV o cualquier otro elemento de mi página HTML estática. Lo que me falta probar es si funciona estando el batch.php en un servidor remoto. Una desventaja que tiene es que solo trabaja por GET y no por POST, pero para lo que yo quiero hacer eso no afecta mucho. Saludos.

[leandro_brunner]

proba utilizando un pequeño framework que estaba empezando a hacer... pero esta muy abandonado jaja... funciona cargando javascript de forma asincrona, y utiliza php para que funciones como ajax... tambien es posible utilizar cargas externas...

http://leandrobrunner.org/LBscript

Saludos... espero que te ayude...

[dnis007]

Hola podrian ayudarme, quisiera realizar el mismo proceso de crear un sitio web html estatico donde puediera simular el funcionamiento de ajax en un servidor remoto. intente verificar el link http://leandrobrunner.org/LBscript pero me marca suspendido. Espero que puedan ayudarme. y de antemano muchas gracias!!!