Comunidad PHPeros
Lenguajes => JavaScript => AJAX => Mensaje iniciado por: G2K 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", pagina, true); //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
-
G2K muy bueno :P
Karma +
-
Gracias naveda ;)
-
muy bueno men, aunque si ya no entiendo PHP, pues AJAX me costara un poquito xD
Saludos
-
jejeje es cuestión de practica :P
-
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.
-
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
-
Que pasa no os interesa el tutorial o es que no entendeis claramente de que trata o algo?
-
no entiendo mucho de ajax :) :) apenas estoy aprendiendo javascript ;D
-
Yo no entinedo mucho, pero se ve que es un beun tuto xD +karma
-
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.
-
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
-
Gracias crack ;)
Como ya dije tendre que hacer alguno explicandolo mejor...
-
a mi tampoco me funciona
-
Pues a mi me tira XD
-
Prueben a cambiar
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;
}
Por esta otra funcion:
function getXMLHTTPRequest() {
var re = false;
try {
re = new ActiveXObject('Msxml2.XMLHTTP');
} catch(e1) {
try {
re = new ActiveXObject('Microsoft.XMLHTTP');
} catch(e2) {
re = false;
}
}
if(!re && (typeof XMLHttpRequest != 'undefined' || window.XMLHttpRequest)) {
re = new XMLHttpRequest();
}
return re;
}
Saludos!
-
viene a ser lo mismo :P
-
el problema es que no funciona ??? ??? lo he probado y le doy a "ver pagina principal" y no pasa nada >:( >:(
saludos! xD
-
Yo pegaria el code de FS, que de todas formas cualquiera podria copiar y pegar pero esta adabtado para FS, si quereis lo posteo.
-
amm, ajax no funcciona solo con el explorador?? Yo lo guardaba en el escritorio y luego lo abria con firefox, y quiza por eso no me funcciona xD
-
Ajax contacta con el servidor Web para obtener los datos, y los muestra en el navegador. Si no hay servidor, no hay AJAX.
Saludos!
-
sigue sin funccionar ??? ???
-
AJAX es una capa imaginaria entre el navegador y el servidor
-
y porque no me furula ???
-
a mi tampoco me funciona y lo necesito urgente :S
-
Habes probado a poner la etiqueta script de este modo?
<script type="text/javascript">
AQUI EL JS
</script>
El type tiene mucho que ver en los distintos navegadores, y este es el que yo uso y me funciona de maravilla.
Saludos
-
sige sin funcionar
-
Muestra el codigo que estas usando ;)
-
ese mismo, el que puso G2K ::) ::)
-
Claro...
-
Entonces debería funcionar... lo que yo quiero ver es como lo estas aplicando tu... tu caso concreto ;)
-
ya encontre el error xD xD
1er Error:
En lugar de
<a href="#" onclick="ver_pagina("principal.php")">Ver pagina principal</a>he puesto
<a href="#" onclick="ver_pagina('principal.php')">Ver pagina principal</a>2º Error:
La divina ley de Murphy:
Cuando quieres demostrar a alguien que algo no funciona, funcionará
Es la máxima del ridículo: si existe la posibilidad de que quedes en evidencia, como un torpe, quedarás como un torpe. Ya puedes pasarte horas investigando por qué demonios la impresora no funciona o por qué no tienes conexión a internet en el puesto de trabajo, cuando finalmente te decidas a llamar al departamento de soporte para que te solucione el problema, todo volverá a funcionar normalmente como por arte de magia.
-
esa (Censurado x mi)?? xD probaré
EDITO: Ahora si me va xD, no lo subi cn los cambios...
Las paginas k se cargan... como ago para k se ajsten a la seccion de la principal a la k se ajustan? creo una tabla?
-
supongo que si :D
-
ahora tengo la siguiente duda, como puedo hacer esto? No me sale :-\
ver_pagina('scripts/checkuser.php?id=username.value') :'(
Saludos! 8)
-
alomejor no va con la modulacion
-
:) nadie save como se podria hacer? :P
-
ahora tengo la siguiente duda, como puedo hacer esto? No me sale :-\
ver_pagina('scripts/checkuser.php?id=username.value') :'(
Saludos! 8)
No vale con poner username.value
Sino que se hace así: document.NOMBRE DEL FORM.NOMBRE DEL SITIO DEL CAMPO DE TEXTO.value;
-
no furula :'(
usuario (document.username.value) libre para registrarcodigo php:
<?
include ("../mysql.conect.php");
$sql = mysql_query("SELECT * FROM `users` WHERE name='$_GET[id]'");
if (mysql_fetch_array($sql)) {
echo "usuario ya existe";
} else {
echo "usuario ($_GET[id]) libre para registrar";
}
?>
-
Le falta el nombre del form tambien... no basta con solo el nombre del campo ;)
-
no furula, me dice lo mismo xD
Code:
<form name='reg' method='POST' action='index.php?act=signup&1'>
<div id='ftext'>Nombre de usuario</div>
<div id='ffiel'><input type='text' name='username' value='$_POST[username]' size='20'><div id='ver_contenido'></div>
<div id='nautor'><a href='#' onclick=\"ver_pagina('scripts/checkuser.php?id=document.reg.username.value;');\">Nombre de usuario</a></div>
<div id='ver_contenido'></div>y me dice:
usuario (document.reg.username.value;) libre para registrar
-
var usuario = document.reg.username.value;
-
Por cierto a quien no le funcione puede mirar la consola de errores de firefox o ie para ver los errores que les muestra y escribirlos aqui, por si se puede solucionar.
Saludos
-
TLX, he mirado y no hay ningun error ::)
G2K, lo puse en la funccion ver_pagina, y luego, que hago?
-
tienes que abrir la ventana con ajax para introducir el dato del campo usando GET o POST.
Perdonar que el code no este muy bien, es que lo hice en clase improvisando sobre la marcha sin apuntes ni nada, bueno ya colge los videotutoriales de AJAX por si alguien queria aprender.
-
tienes que abrir la ventana con ajax para introducir el dato del campo usando GET o POST.
como? que tengo que hacer?
-
Lo tienes en el post...
http.open("GET", pagina, true); //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
-
ahhhhh, tengo que añadir esto:
var usuario = document.reg.username.value;
http.open("GET", pagina?id=usuario, true);
es asi, no? ???
-
Prueva así ;)
var usuario = document.reg.username.value;
var pagina= "pagina.php?id="+usuario;
http.open("GET", pagina, true);
-
Hace algún tiempo que vengo usuado AJAX, sobre todo para las consultas a bases de datos y para el listado de ficheros de un determinado directorio, pero no consigo solucionar el tema de UTF-8, y es como ver las letras acentuadas y la ñ.
Gracias por el tutorial, me parece extraordinario, nada como un ejemplo para entender las cosas.
-
Si los accentos y las ñ las devuelve mal con AJAX y se a de usar la funcion utf8_encode()
-
Tengo un problema. En la página principal se ven las noticias, y cuando abro algo nuevo, se desplazan acia abajo... como ago k desaparezcan? lo meto dentro del div?
-
Si pasas la url para verlo personalmente te podria hechar un cable.
-
Esta es la web (http://habbox.estoyenred.es/nuevaweb/index.html)
...
-
Vale vale ya se que le pasa :P
Envez de poner eso de las noticas en la pagina principal (nada más entrar en el centro) pones un <div id="mostrar_ajax"></div> (por ejemplo, y luego pones en el body <body onload="funcion_de_cargar_la_pagina('pagina')"> (la función sera tal y como tu la nombres, entonces nada más cargar la pagina cargara la pagina central y cuando cliques sobre home se te borrara esa pagina que tenias y aparacera la de la home ;)
-
jeje, algo asi pense pero muy raro... gracias
karma+
-
No hay de que ;)
Gracias por el karma :P
-
Perdonad k reviva este tema, pero tengo un problemilla... kiero ejecutar esto pro en un formulario, se puede acer?
-
Utiliza el evento javascript "onSubmit" del formulario.
Ejemplo:
<form name="mi_formulario" method="post" action="#" onSubmit="MiFuncionAjax()">
Saludos
-
no funciono :S, probare de nuevo a ver si tenia algo mal... y eso enviaria los POST no?
-
No, claro que no.
Eso simplemente haría que cuando pulses un botón del tipo Submit, se ejecute esa función.
Lo demás lo tienes que hacer tu por cosecha propia, cojiendo cada value de los inputbox, y luego pasandolo por $_GET a la hora de llamar al fichero por Ajax.
Ejemplo:
var inputuno = document.getElementById('inputuno').value;
http.open("GET", pagina+"?uno="+inputuno, true);
Saludos
-
No, claro que no.
Eso simplemente haría que cuando pulses un botón del tipo Submit, se ejecute esa función.
Lo demás lo tienes que hacer tu por cosecha propia, cojiendo cada value de los inputbox, y luego pasandolo por $_GET a la hora de llamar al fichero por Ajax.
Ejemplo:
var inputuno = document.getElementById('inputuno').value;
http.open("GET", pagina+"?uno="+inputuno, true);
Saludos
No me funciona el ajax :s ya demas, lo de para formualrios no se como ahcerlo.