jQuery AJAX, Ejemplo
Nuestro ejemplo será muy simple, crearemos una página que contendrá 2 cajas de texto, donde introduciremos nuestro nombre y apellidos; y al pulsar el botón, se enviaran ambas cadenas al servidor vía AJAX, donde procesaremos ambas cadenas y devolveremos otra. En realidad es un ejemplo poco útil pero nos servirá para dar la idea sobre el uso de jQuery AJAX y donde usaremos JSON para el intercambio de datos.
Si deseas ver otro ejemplo un poco más practico visita el enlace jQuery AJAX a un método que devuelve una colección de objetos (Array JSON).
Pero veamos el código de ejemplo asociado:
jQuery AJAX Ejemplo, Código ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQAjax.aspx.cs" Inherits="jQuery_Ajax_jQAjax" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>JQuery AJAX Ejemplo Básico</title>
<script type="text/javascript" src="../Scripts/jquery-1.3.2.min.js" ></script>
<script type = "text/javascript">
jQuery(document).ready(function() {
$('#btnPrueba').click(function() {
var nombre = $('#txtNombre').val();
var apellido = $('#txtApellido').val();
if (nombre && (nombre != ''))
sendDataAjax(nombre, apellido);
});
});
function sendDataAjax(nombre, apellido) {
var actionData = "{'nombre': '" + nombre + "',
'apellido': '" + apellido + "'}";
$.ajax(
{
url: "jqAjax.aspx/GetDataAjax",
data: actionData,
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function(msg) { alert(msg.d); },
error: function(result) {
alert("ERROR " + result.status + ' ' + result.statusText);
}
});
};
</script>
</head>
<body>
Nombre: <input type="text" id="txtNombre" /> <br />
Apellido: <input type="text" id="txtApellido" /> <br />
<input type="button" id="btnPrueba" value="Probando AJAX" />
</body>
</html>
jQuery AJAX Ejemplo, Código C#
using System;
using System.Web.UI;
using System.Web.Services;
public partial class jQuery_Ajax_jQAjax : Page
{
protected void Page_Load(object sender, EventArgs e) {}
[WebMethod]
public static string GetDataAjax(string nombre, string apellido)
{
return string.Format("Bienvenido al mundo AJAX {0} {1}", nombre, apellido);
}
}
Lo interesante de este ejemplo es que no se hace postback de la página, o sea, no se recarga nuevamente la página al hacer click en el botón “Probando AJAX”. Otro elemento a destacar es la sencillez de uso de este biblioteca (jQuery AJAX).
Pero comentemos un poco el ejemplo que hemos expuesto. Lo primero que hicimos fue asociar al evento click del botón btnPrueba, una función que lee el nombre y apellido y llama a la función sendDataAjax(nombre, apellido).
Esta función es la que hace la llamada AJAX, donde especificamos la URL, que corresponde a la dirección web o al nombre del archivo (jqAjax.aspx) y después el webmethod que invocamos (GetDataAjax), en data van los parámetros de entrada que se espera el webmethod con notación JSON; definimos además el tipo de envío (Post), y por ultimo seteamos success y error, asociándole las funciones que deben ejecutarse al terminarse de procesar la petición, si todo fue bien se ejecutara la función success, de lo contrario ejecutará la asociada a error.
Luego de esto solo queda comentar el código C#, pero creo que se explica por si solo, y además no es el objetivo principal de este post. Solo comentarles que en este ejemplo empleamos el uso de webmethod para hacer la llamada AJAX, pero también podría ser un Web Services, WCF, o una simple página.
Nota: Este mismo ejemplo podríamos haberlo resuelto usando Microsoft Ajax Library, pero el objetivo de este artículo es que veamos la potencialidad de JQuery AJAX.
Fuente: http://www.esasp.net/2009/11/ajax-jquery-en-aspnet.html
No hay comentarios:
Publicar un comentario