Buenas tardes.
A continuación expongo una posible solución de los ejercicios de la entrega CU01209F del curso Ajax desde cero.
EJERCICIO Nº1
Crea un archivo denominado respuesta.php que contenga el código necesario para devolver lo siguiente:
a) Si se recibe el parámetro nombre con valor alberto, la frase “Alberto está realizando un curso de programación”.
b) Si se recibe el parámetro nombre con valor juan, la frase “Juan está realizando prácticas de ingeniería de sistemas”
c) Si el parámetro viene vacío o no existe, la frase “No hay información. Revise la petición”.
En un archivo denominado peticion.html crea una casilla de texto que pida un nombre y un botón chequear, de modo que al pulsarse el botón chequear se produzca una petición vía Ajax para obtener los resultados contenidos en el archivo respuesta.php. Dichos resultados deberán mostrarse en una ventana de alerta JavaScript cada vez que se pulse el botón chequear.
Código HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo Ajax</title>
<script type="text/javascript">
var xmlhttp = new XMLHttpRequest();
function mostrarMensaje(){
var nombre = document.getElementById('nombre').value;
xmlhttp.open("GET", "CU01209F(01).php?nombre="+nombre);
xmlhttp.send();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
alert(xmlhttp.responseText);
}
}
}
</script>
</head>
<body>
<form action="">
Nombre: <input type="text" name="nombre" id="nombre"><br>
<input type="button" value="chequear" onclick="mostrarMensaje();">
</form>
</body>
</html>Código PHP:
<?php
$alberto = "Alberto está realizando un curso de programación";
$juan = "Juan está realizando prácticas de ingeniería de sistemas";
$porDefinicion = "No hay información. Revise la petición";
$nombre = $_REQUEST['nombre'];
if($nombre=="alberto"){
echo $alberto;
}else if($nombre=="juan"){
echo $juan;
}else{
echo $porDefinicion;
}
?>Me surge una duda: ¿Por qué así funciona?:
<script type="text/javascript">
var xmlhttp = new XMLHttpRequest();
function mostrarMensaje(){
var nombre = document.getElementById('nombre').value;
xmlhttp.open("GET", "CU01209F(01).php?nombre="+nombre);
xmlhttp.send();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
alert(xmlhttp.responseText);
}
}
}
</script>y así no:
<script type="text/javascript">
var xmlhttp = new XMLHttpRequest();
function mostrarMensaje(){
var nombre = document.getElementById('nombre').value;
xmlhttp.open("GET", "CU01209F(01).php?nombre="+nombre);
xmlhttp.send();
if(xmlhttp.readyState==4 && xmlhttp.status==200){
alert(xmlhttp.responseText);
}
}
</script>¿Por qué es obligatoria utilizar la propiedad "onreadystatechange" del objeto "XMLHttpRequest"? ¿No basta sólo con tal de utilizar una de las propiedades: "readyState" o "status"?
Y otra cuestión: ¿cómo van ordenadas las sentencias en el uso del objeto "XMLHttpRequest"? Yo creo que primero se tiene que abrir con: "XMLHttpRequest.open()", luego enviarlo con: "XMLHttpRequest.send()" y luego ya invocar las demás propiedades, como por ejemplo, "XMLHttpRequest.responseText()". Pero en los ejemplos del curso, por lo menos hasta la entrega CU01209F, los métodos "open()" y "send()" aparacen al final del script.
EJERCICIO Nº2
Crea un archivo denominado respuesta1.txt que contenga varias líneas de texto y súbelo al servidor. Haz lo mismo para los archivos respuesta2.txt y respuesta3.txt. A continuación crea un archivo html donde usando Ajax y tres botones denominados “Ver archivo 1”, “Ver archivo 2” y “Ver archivo 3” puedas visualizar el contenido de cada archivo en un div preparado para ello encima del cual aparecerá “Contenido del archivo solicitado es:”.
Código HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo Ajax</title>
<script type="text/javascript">
var xmlhttp = new XMLHttpRequest();
function mostrarTexto(texto){
xmlhttp.open("GET", texto);
xmlhttp.send();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
var nodo = document.getElementById('contenedor');
nodo.innerHTML = xmlhttp.responseText;
}
}
}
</script>
</head>
<body style="text-align: center;">
<button onclick="mostrarTexto('respuesta1.txt');">Ver archivo 1</button>
<button onclick="mostrarTexto('respuesta2.txt');">Ver archivo 2</button>
<button onclick="mostrarTexto('respuesta3.txt');">Ver archivo 3</button>
<h1>El contendio del archivo solicitado es:</h1>
<div id="contenedor"></div>
</body>
</html>Los archivos "respuesta1.txt, respuesta2.txt y respuesta3.txt" tienen los siguientes contenidos:
respuesta1.txt
Hola
Esto es el contendio del
primer texto
respuesta2.txt
Hola
Esto es el contendio del
segundo texto
respuesta3.txt
Hola
Esto es el contendio del
tercer texto
Gracias.
Tema: Métodos open, send XMLHttpRequest Ajax propiedad onreadystatechange CU01209F (Leído 2635 veces)
RSS -
WAP2