Ejemplo de AJAX usando JQUERY

Hola a todos. como dice el titulo hoy hablare sobre como puedes hacer peticiones AJAX con la famosa librería de JQUERY. si no sabes que es AJAX dejame explicarte. AJAX es una manera de comunicación con el servidor que permite no recargar el documento para que esta interacción se complete (la definición correcta no es esa, esto tan solo es una definición hecha por mi de manera simple) .

lo primero que necesitamos es:

  1. un servidor instalado en nuestra máquina o acceso a un servidor a Internet.
  2. PHP instalado(en este caso lo haremos con PHP).
  3. librería de JQUERY.

con eso tendremos. bien empecemos.

lo primero que hare sera crear un archivo dentro de nuestro servidor que llamare prueba-ajax.php en el voy a escribir el documento que se encargara de hacer la petición AJAX al servidor.  yo ademas agregue unas lineas de estilos.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Prueba Ajax</title>
	<style>
		@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
		*{
			margin: 0 auto;
			font-family: 'Open Sans Condensed', sans-serif;
		}
		body{
			background: #6B0000;
			color: white;
		}

		.contenedor{
			margin: 0 auto;
			width: 800px;
		}

		#forma{
			width: 80%;
			text-align: center;
			margin: 5px;
		}
		.info{
			border: solid;
			border-radius: 5px;
			font-size: 25px;
			padding: 5px;
			margin: 5px;
		}
		.info2{
			border: solid;
			padding: 5px;
			margin: 5px;
			border-radius: 5px;
		}
		.inputs{
			padding: 10px;
			font-size: 18px;
		}
		#botonsillo{
			padding: 10px;
			font-size: 18px;
		}
		.imagen{
			border-radius: 10px;
			width: 200px;
		}
	</style>
</head>
<body>
	<div class="contenedor">
		<div id="forma"> <!-- un pequeño formulario -->
			<fieldset>
			<legend><h3>Ingresa dos numeros y da clic en enviar</h3></legend>
				<input type="text" id="numero1" class="inputs">
				<input type="text" id="numero2" class="inputs">
				<input type="button" value="enviar" id="botonsillo">
			</fieldset>
		</div>

		<div class="info"> <!-- aqui cargaremos la informacion que venga de regreso del servidor -->

		</div>
		<div class="info2"> <!-- este div lo usaremos para comprobar que el documento no se esta recargando-->
			<p>
				este parrafo no tiene por que cambiar porque
				estamos haciendo uso de jquery y sus llamadas de AJAX
			</p>
			<br>
			<img src="http://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png" alt="" class="imagen">
		</div>
	</div>
	<!--  aqui importamos jquery desde la API de librerias de google -->
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<!-- aqui haremos un pequeño script para ver el funcionamiento de AJAX -->
	<script>
		jQuery(document).ready(function($) {
			/*
			el codigo es muy sencillo. lo primero que decimos es:

				1.- si el elemento con el ID 'botonsillo' recibe un clic activara
				la siguiente funcion que esta entre llaves.

				2.- creamos dos variables en las cuales guardaremos los valores
				de los input con los ID 'numero1' y 'numero2'

				3.-una vez guardado los valores en las variables diremos que en el
				elemento con la clase 'info' cargaremos el contenido del archivo
				'datos.php' al cual le estaremos pasando dos valores. uno se llamara
				'numero1' y el siguiente 'numero2'.

			*/
			$('#botonsillo').click(function(event) {
				var numero1 = $('#numero1').val();
				var numero2 = $('#numero2').val();
				$('.info').load('datos.php?numero1='+numero1+'&numero2='+numero2);
			});
		});
	</script>
</body>
</html>

hecho esto tenemos que crear el archivo que hara el procedimiento de la suma que se llama ‘datos.php’. esto es lo que contendra:

<?php
	if(isset($_GET['numero1'])){
		if(isset($_GET['numero2'])){
			echo "Resultado de: ".$_GET['numero1']." + ".$_GET['numero2']." = ".($_GET['numero1']+$_GET['numero2']);
		}
	}
 ?>

y con esto podemos realizar la peticion AJAX y cargar contenido de manera dinamica en ciertos elementos y no tener que cargar todo el documento. bien te dejo el link para que lo cheques. no olvides dejar un comentario si te gusto esto. igual si tienes dudas puedes preguntarme. saludos ñ_ñ

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s