Twitter Flickr Pinterest LinkedIn YouTube Google Maps E-mail RSS
formats

Ejemplos de AJAX sencillos. Recordando conceptos.

En esta entrada dejo unos ejemplos sencillos de uso de las tecnologías AJAX para recordar su uso.

El primero muestra aspectos básicos, el segundo rescata de una base de datos sqlite información mediante llamadas  GET AJAX.

Es necesario refrescar que AJAX, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications).

Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, mejorando la interactividad, velocidad y usabilidad en las aplicaciones.

<!-- Ejemplo AJAX asincrono que carga un fichero en un div !-->
<html>
	<head>
		<script type="text/javascript">
		function Ejecutarajax(){
			var conexion;
			if (window.XMLHttpRequest)			  {
			  conexion=new XMLHttpRequest();
			}else
			  {
			   //Para navegadores antiguos.
			   conexion=new ActiveXObject("Microsoft.XMLHTTP");
			}
			conexion.onreadystatechange=function(){
				//* Codigos de readyState				
				// 0: La petición no se ha iniciado.
				// 1: Conexión con el servidor establecida
				// 2: Petición recibida
				// 3: Procesando petición
				// 4: Petición finalizada y respuesta
				//* Códigos de Status
				// 200. Todo ha funcionado
				// 404. Página no encontrada.
				if(conexion.readyState==4 && conexion.status==200){
					document.getElementById("micapa").innerHTML=conexion.responseText;
				}
			}
			conexion.open("GET","Mifichero.txt",true);
			// Otro ejemplo llamando a un php con parametro
			// xmlhttp.open("GET","mipagina.php?c="+mivariable,true);
				
			conexion.send();
		}
		</script>
	</head>
	<body>
		<div id="micapa"></div>
		<button type="button" onclick="Ejecutarajax()">Ejecutar</button>
	</body>
</html>

Este otro ejemplo rescata datos de la base mediante AJAX y SQlite, existe una pagina PHP asociada.

<html>
	<head>
		<script type="text/javascript">
			function muestraciudad(str){

				var xmlhttp; 
				if (str=="")
				  {
				  document.getElementById("txtHint").innerHTML="";
				  return;
				  }
			  if (window.XMLHttpRequest)
				  {// codigo para IE7+, Firefox, Chrome, Opera, Safari
				  xmlhttp=new XMLHttpRequest();
				  }
				else
				  {// code for IE6, IE5
				  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
				  }
				xmlhttp.onreadystatechange=function()
				  {
				  if (xmlhttp.readyState==4 && xmlhttp.status==200)
					 {
					 document.getElementById("ciudad").innerHTML=xmlhttp.responseText;
					 }
				  }
			  xmlhttp.open("GET","db.php?c="+str,true);
				xmlhttp.send();
			}
			
		</script>
	</head>
	<body>
		<form action="">
			<select name="ciudades" onchange="muestraciudad(this.value)">
				<option value="">Selecciona una ciudad</option>
				<option value="Palencia">Palencia</option>
				<option value="Valladolid">Valladolid</option>
				<option value="Segovia">Segovia</option>
				<option value="Soria">Soria</option>
			</select>
		</form>
		<div id="ciudad">La informacion de la ciudad aparecera aqui</div>
	</body>
</html>

Y para la página de la base de datos db.php

<?php
// Conexion contra la base de datos
//echo $_GET['c'];
$conexion = sqlite_open('ciudades.db');
			$consulta = "SELECT * FROM ciudades;";
			$resultado = sqlite_query($conexion,$consulta);

			while($fila = sqlite_fetch_array($resultado)){
							if($fila['nombre'] == $_GET['c']){
								echo $fila['nombre'];
								echo ' - ';
								echo $fila['lugarinteres'];
								echo ' - ';
								
								echo $fila['prefijo'];
								echo ' - ';
								echo $fila['habitantes'];
								echo ' - ';
								echo $fila['poblacion'];
								echo ' - ';	
								echo $fila['pais'];
								echo ' - ';
							}
						}

sqlite_close($conexion);
?>

 

Etiquetas:,

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Home html Ejemplos de AJAX sencillos. Recordando conceptos.
© www.palentino.es, desde el 2012 - Un Blog para compartir conocimientos ...

Uso de cookies en mi sitio palentino.es

Este sitio web utiliza cookies para que tengamos la mejor experiencia de usuario. Si continúas navegando estás dando tu consentimiento para la aceptación de las mencionadas cookies y la aceptación de la política de cookies

ACEPTAR
Aviso de cookies