Autor Tema: Tutorial AJAX (Usando responseText)  (Leído 34790 veces)

Desconectado G2K

  • Moderador de Programación General
  • PHPero Master
  • ****
  • Mensajes: 2.245
  • Karma: 76
  • Sexo: Masculino
  • Dame un punto de apoyo y moveré la Tierra
    • Ver Perfil
    • Cristian Torrijos
Tutorial AJAX (Usando responseText)
« en: 12 de Diciembre de 2007, 11:10:04 am »
Vamos a ver como cargar las secciones de nuestra pagina dentro del index sin usar esos frames que han pasado de moda

index.html

<html>
<
head>
          <
script>
           
// Creamos la funció que nos va a crear la comunicación con el servidor via XMLHTTPRequest segun el navegador que use el usuario

function getXMLHTTPRequest() {
try {
req = new XMLHttpRequest(); //si usa Firefox u otro
} catch(err1) {
  try {
  
req = new ActiveXObject("Msxml2.XMLHTTP"); //Si usa alguna v de IE
  
} catch (err2) {
    try {
    
req = new ActiveXObject("Microsoft.XMLHTTP"); //Si usa otra v de IE
    
} catch (err3) {
      
req false;
    }
  }
}
return 
req;
}

//Creamos una variable que contenga el valor de dicha función

var http getXMLHTTPRequest();

function 
ver_pagina(pagina) { //creamos la función que va a hacer esa petición de cargar la pagina
  
http.open("GET"paginatrue); //Le decimos que usaremos GET, cargamos la variable pagina y decimos con true que va a ser una petición asincronica
  
http.onreadystatechange devolver_pagina// le decimos que en cuanto cambien el estado ejecute la función devolver la pagina
  
http.send(null); //Aquí le decimos que “Null” para que no envie nada por POST ya que en este caso usaremos GET
}

//Generamos la función que sera llamada por la anterior en cuanto cambie de estado
function devolver_pagina () {
   if (
http.readyState == 4) { //Cuando la petición en el servidor alla sido completada
    
if(http.status == 200) { //Si el proceso se a realizado correctamente
       
var mostrar http.responseText//Generamos una variable que cargara la respuesta del servidor en Texto es decir, lo que nos mostraria a nosotros por pantalla si abrireramos la pagina
       
document.getElementById('ver_contenido').innerHTML mostrar//le decimos que queremos cargarlo en el elemento de nuestra pagina que tiene id ver_contenido
    
}
  } else {
  
document.getElementById('ver_contenido').innerHTML 'Cargando…'//mientras no devuelva nada avisamos de que se esta cargando... tambien se pueden utilizar etiquetas html, mostrar imágenes etc
  
}
}

          
</script>
</head>
<body>
<div id="ver_contenido"></div> <!-- Aquí es donde mostraremos nuestro code devuelto por AJAX -->

<a href="#" onclick="ver_pagina("principal.php")">Ver pagina principal</a>
</body>
</html>


Pues nada... si queda alguna duda comentarla, espero que os guste y las apliqueis a vuestras Webs ya que da un toque muy bueno el AJAX

PD: En este caso no hemos usado el XML porque queriamos que nos devolviera la pagina entera, pero en próximos tutoriales enseñare como generar archivos XML con PHP y cargar el contenido de esas etiquetas XML en nuestro navegador.

Un saludo ;)

EDITO: No la e provado porque lo e hecho en clase en cuanto e acabado las Actividades... si hay algun error que nos os funciona avisar :P
« Última modificación: 12 de Diciembre de 2007, 23:26:15 pm por G2K »
Campeón del CatSkills de Webs (Enero 2011)
Campeón del SpainSkills de Webs (Abril 2011)
http://www.youtube.com/watch?v=1fBMG8F_hpM
Mejor representante catalan en SpainSkills 2011


Comunidad PHPeros

Tutorial AJAX (Usando responseText)
« en: 12 de Diciembre de 2007, 11:10:04 am »

Desconectado naveda

  • Administrador General
  • PHPero Master
  • *****
  • Mensajes: 2.282
  • Karma: 166
  • Sexo: Masculino
    • Ver Perfil
    • naveda.me
Re: Tutorial AJAX (Usando responseText)
« Respuesta #1 en: 12 de Diciembre de 2007, 12:44:41 pm »
G2K muy bueno :P
Karma +
Por favor, leete las Normas


Desconectado G2K

  • Moderador de Programación General
  • PHPero Master
  • ****
  • Mensajes: 2.245
  • Karma: 76
  • Sexo: Masculino
  • Dame un punto de apoyo y moveré la Tierra
    • Ver Perfil
    • Cristian Torrijos
Re: Tutorial AJAX (Usando responseText)
« Respuesta #2 en: 12 de Diciembre de 2007, 14:22:32 pm »
Gracias naveda ;)
Campeón del CatSkills de Webs (Enero 2011)
Campeón del SpainSkills de Webs (Abril 2011)
http://www.youtube.com/watch?v=1fBMG8F_hpM
Mejor representante catalan en SpainSkills 2011


Desconectado -RiPeRcOp-

  • PHPer@ Fijo
  • ***
  • Mensajes: 206
  • Karma: 7
  • Sexo: Masculino
  • RiPeR, The House`s assistant
    • Ver Perfil
    • RevolutionW
Re: Tutorial AJAX (Usando responseText)
« Respuesta #3 en: 12 de Diciembre de 2007, 17:56:52 pm »
muy bueno men, aunque si ya no entiendo PHP, pues AJAX me costara un poquito xD
 Saludos

Desconectado G2K

  • Moderador de Programación General
  • PHPero Master
  • ****
  • Mensajes: 2.245
  • Karma: 76
  • Sexo: Masculino
  • Dame un punto de apoyo y moveré la Tierra
    • Ver Perfil
    • Cristian Torrijos
Re: Tutorial AJAX (Usando responseText)
« Respuesta #4 en: 12 de Diciembre de 2007, 18:01:46 pm »
jejeje es cuestión de practica :P
Campeón del CatSkills de Webs (Enero 2011)
Campeón del SpainSkills de Webs (Abril 2011)
http://www.youtube.com/watch?v=1fBMG8F_hpM
Mejor representante catalan en SpainSkills 2011


Desconectado Martin10

  • PHPer@ Fijo
  • ***
  • Mensajes: 160
  • Karma: 11
  • Sexo: Masculino
    • Ver Perfil
Re: Tutorial AJAX (Usando responseText)
« Respuesta #5 en: 12 de Diciembre de 2007, 23:18:14 pm »
G2K, lo estoy probando el script y no me funciona. Estoy con IE7, lo copie en el archivo index.html , cree la pagina principal.php con otro contenido. Y nada se queda en esa pagina.
Lamentablemente no te puedo ayudar porque recien estoy empesando con ajax.
8)

Desconectado G2K

  • Moderador de Programación General
  • PHPero Master
  • ****
  • Mensajes: 2.245
  • Karma: 76
  • Sexo: Masculino
  • Dame un punto de apoyo y moveré la Tierra
    • Ver Perfil
    • Cristian Torrijos
Re: Tutorial AJAX (Usando responseText)
« Respuesta #6 en: 12 de Diciembre de 2007, 23:25:42 pm »
No pido ayuda... es solamente un tutorial a mi me funciona... xD

EDITO: Me equivoque el postear...

puse:   http.onreadystatechange = devolverpagina; en vez de   http.onreadystatechange = devolver_pagina;

Ahora deberia funcionar ;)


PD: Lo e corregido en el post inicial
« Última modificación: 12 de Diciembre de 2007, 23:27:55 pm por G2K »
Campeón del CatSkills de Webs (Enero 2011)
Campeón del SpainSkills de Webs (Abril 2011)
http://www.youtube.com/watch?v=1fBMG8F_hpM
Mejor representante catalan en SpainSkills 2011


Desconectado G2K

  • Moderador de Programación General
  • PHPero Master
  • ****
  • Mensajes: 2.245
  • Karma: 76
  • Sexo: Masculino
  • Dame un punto de apoyo y moveré la Tierra
    • Ver Perfil
    • Cristian Torrijos
Re: Tutorial AJAX (Usando responseText)
« Respuesta #7 en: 20 de Diciembre de 2007, 07:53:14 am »
Que pasa no os interesa el tutorial o es que no entendeis claramente de que trata o algo?
Campeón del CatSkills de Webs (Enero 2011)
Campeón del SpainSkills de Webs (Abril 2011)
http://www.youtube.com/watch?v=1fBMG8F_hpM
Mejor representante catalan en SpainSkills 2011


Desconectado kekoman

  • PHPero Master
  • ******
  • Mensajes: 1.180
  • Karma: 45
  • Sexo: Masculino
  • Mi nuevo usuario es marco811
    • Ver Perfil
Re: Tutorial AJAX (Usando responseText)
« Respuesta #8 en: 20 de Diciembre de 2007, 11:30:12 am »
no entiendo mucho de ajax  :) :) apenas estoy aprendiendo javascript  ;D


Este usuario ya no lo uso, mi nuevo usuario es marco811

Desconectado x.mara.x

  • PHPero Master
  • ******
  • Mensajes: 1.364
  • Karma: 57
  • Sexo: Femenino
    • Ver Perfil
Re: Tutorial AJAX (Usando responseText)
« Respuesta #9 en: 20 de Diciembre de 2007, 18:31:18 pm »
Yo no entinedo mucho, pero se ve que es un beun tuto xD +karma

Desconectado G2K

  • Moderador de Programación General
  • PHPero Master
  • ****
  • Mensajes: 2.245
  • Karma: 76
  • Sexo: Masculino
  • Dame un punto de apoyo y moveré la Tierra
    • Ver Perfil
    • Cristian Torrijos
Re: Tutorial AJAX (Usando responseText)
« Respuesta #10 en: 21 de Diciembre de 2007, 00:14:27 am »
Gracias pero lo que realmente me interesa es que entendais el funcionamiento... en otro momento explicare al máximo... bueno voy a explicar en que consiste así un poco por encima:

Lo que estamos haciendo es que queremos cargar paginas dentro de una pagina que tengamos y no queramos tener que cargarla una y otra vez ya que relentizaria la navegación del usuario, y con AJAX tenemos esa solución.

Tenemos abierta una conversación con el servidor gracias a la función que creamos en JS getXMLHTTPRequest, despues al pulsar el enlace lo que haremos sera llamar a una función que hemos creado para llamar una pagina y cuando ya la tenga porque se la a mandado el server pues se la mostramos por pantalla.

Pero como ya os he dicho un día de estos intentare analizarlo de una forma mucho más profunda ya que la utilidad que se le puede dar a AJAX es increible.
Campeón del CatSkills de Webs (Enero 2011)
Campeón del SpainSkills de Webs (Abril 2011)
http://www.youtube.com/watch?v=1fBMG8F_hpM
Mejor representante catalan en SpainSkills 2011


Desconectado CarlosRdrz

  • Moderador Global
  • PHPero Master
  • *****
  • Mensajes: 2.505
  • Karma: 131
  • Sexo: Masculino
  • A.k.a. TLX
    • Ver Perfil
Re: Tutorial AJAX (Usando responseText)
« Respuesta #11 en: 21 de Diciembre de 2007, 09:43:29 am »
El tutorial como tal esta bien, el problema es que yo no lo llamaria Tutorial, porque en realidad solamente es un codigo, y no explicas una a uno cada una de sus propiedades y sus posibles estados, sus argumentos, etc.
Aun asi esta muy bien el codigo y esta explicado, por eso te doy un Karma+

Saludos
La dedicación de mi respuesta sera directamente proporcional a la dedicación de tu pregunta.
Hacer códigos que entiendan las máquinas es fácil, lo difícil y realmente útil es hacer códigos que entiendan las personas.
http://twitter.com/CarlosRdrz
http://www.carlosrdrz.es

Desconectado G2K

  • Moderador de Programación General
  • PHPero Master
  • ****
  • Mensajes: 2.245
  • Karma: 76
  • Sexo: Masculino
  • Dame un punto de apoyo y moveré la Tierra
    • Ver Perfil
    • Cristian Torrijos
Re: Tutorial AJAX (Usando responseText)
« Respuesta #12 en: 22 de Diciembre de 2007, 00:52:38 am »
Gracias crack ;)

Como ya dije tendre que hacer alguno explicandolo mejor...
Campeón del CatSkills de Webs (Enero 2011)
Campeón del SpainSkills de Webs (Abril 2011)
http://www.youtube.com/watch?v=1fBMG8F_hpM
Mejor representante catalan en SpainSkills 2011


Desconectado alienmaster

  • PHPer@ Fijo
  • ***
  • Mensajes: 102
  • Karma: 12
  • Sexo: Masculino
  • No dependo de nadie!!
    • Ver Perfil
    • 4cosaS
Re: Tutorial AJAX (Usando responseText)
« Respuesta #13 en: 30 de Diciembre de 2007, 02:02:15 am »
a mi tampoco me funciona

Desconectado G2K

  • Moderador de Programación General
  • PHPero Master
  • ****
  • Mensajes: 2.245
  • Karma: 76
  • Sexo: Masculino
  • Dame un punto de apoyo y moveré la Tierra
    • Ver Perfil
    • Cristian Torrijos
Re: Tutorial AJAX (Usando responseText)
« Respuesta #14 en: 30 de Diciembre de 2007, 11:18:02 am »
Pues a mi me tira XD
Campeón del CatSkills de Webs (Enero 2011)
Campeón del SpainSkills de Webs (Abril 2011)
http://www.youtube.com/watch?v=1fBMG8F_hpM
Mejor representante catalan en SpainSkills 2011