Obtener datos del servidor sin PostBack

Antes que nada un saludo a todos.

En este articulo trate de ser lo mas explicito para explicar una solución a el problema que todos hemos tenido algún día ¡PostBack!, cuantas veces hemos querido recuperar datos del servidor sin hacer un postback como por ejemplo llenar una lista o validar algún dato.

Imaginen si tienen una página que pesa 65k y en alguna validación nenecita ir al servidor por un solo dato de no más de 15 caracteres woow esto es un trabajo difícil no creen y si requiere ir 5 veces estaríamos hablando de algo así como 325k cuando solo ocuparon la cantidad de 75 caracteres como 0.1k, sin contar lo molesto que es para el usuario estar viendo como se recarga la pagina cada vez que se requiere una validación.

Buscando en Internet me he topado con muchas soluciones para esto pero creo que una de las más elegantes y poderosas ya que puedo ir al servidor si hacer un refresh de la página y sin perder la sesión. Este articulo se basa en JavaScript pero mostrare ejemplos en VB.Net y C# de cómo es posible utilizarlo.


El script es simple:

<SCRIPT LANGUAGE="JavaScript">
var _xmlhttp;
/*@cc_on @*//*@if (@_jscript_version >= 5)
var idAX = ["Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i=0; !_xmlhttp && i<idAX.length; i++)
{try{ _xmlhttp = new ActiveXObject(idAX[i]);}
catch(ex) { _xmlhttp = false; }
}@end @*/
if (!_xmlhttp && typeof XMLHttpRequest!='undefined') {
	_xmlhttp = new XMLHttpRequest();
}
function xmlRead(url)
{
				if(_xmlhttp)
	{
				/**
	onreadystatechange:
	evento que se disparara cuando el estado cambia le asignamos un delegado
	*/
	_xmlhttp.onreadystatechange = processReqChange;
				/**
	open:
	primer parametro: Se puede especificar distintos comandos como GET, HEAD, etc.
	segundo parametro: Direccion relativa de nuestro sitio.
	tercer parametro: sincrono - asincrono
	*/
	_xmlhttp.open("GET", url, true);
				/**
	send:
	envia la peticion
	*/
	_xmlhttp.send();
	}
}
function processReqChange()
{
				/**
	readyState:
	0 = sin inicializar
	1 = cargando
	2 = cargado
	3 = interactivo
	4 = completo
	*/
				if (_xmlhttp.readyState == 4) {
				/**
	status:
	Nuemero de respuesta del servidor ejemplo
	200 = OK
	404 = Not Found 
	*/
								if (_xmlhttp.status == 200) {
		alert(_xmlhttp.responseText);
		} else {
		alert('Se genero un error:\n' +
		_xmlhttp.statusText);
		}
	}
}
</SCRIPT>

Entender el script es simple esta dividido en 3 zonas principales:
La primera es únicamente para IE los demás exploradores no tomaran en cuenta esta parte.

/*@cc_on @*//*@if (@_jscript_version >= 5)
var idAX = ["Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i=0; !_xmlhttp && i<idAX.length; i++)
{try{ _xmlhttp = new ActiveXObject(idAX[i]);}
catch(ex) { _xmlhttp = false; }
}@end @*/

Este código trata de hacer una instancia del objeto XMLHTTP pero según versiones ha tenido diferentes nombres y tratamos de localizar cual es y crear la instancia. (Solo aplica para IE) .
La siguiente parte es usada por otros navegadores como Mozilla.

	if (!_xmlhttp && typeof XMLHttpRequest!='undefined') {
	_xmlhttp = new XMLHttpRequest();
	}

Primero valida si el objeto ha sido instanciado y si no trata de crearlo.
Y en la última sección se especifica la función que recibirá la URL relativa de donde obtendremos la información. El objeto _xmlhttp ya esta inicializado y únicamente le asignamos un delegado que se encargara de utilizar la información que recibimos del servidor

function xmlRead(url)
{
				if(_xmlhttp)
	{
				/**
	onreadystatechange:
	evento que se disparara cuando el estado cambia le asignamos un delegado
	*/
	_xmlhttp.onreadystatechange = processReqChange;
				/**
	open:
	primer parametro: Se puede especificar distintos comandos como GET, HEAD, etc.
	segundo parametro: Direccion relativa de nuestro sitio.
	tercer parametro: sincrono - asincrono
	*/
	_xmlhttp.open("GET", url, true);
				/**
	send:
	envia la peticion
	*/
	_xmlhttp.send();
	}
}
function processReqChange()
{
				/**
	readyState:
	0 = sin inicializar
	1 = cargando
	2 = cargado
	3 = interactivo
	4 = completo
	*/
				if (_xmlhttp.readyState == 4) {
				/**
	status:
	Nuemero de respuesta del servidor ejemplo
	200 = OK
	404 = Not Found 
	*/
								if (_xmlhttp.status == 200) {
		alert(_xmlhttp.responseText);
		} else {
		alert('Se genero un error:\n' +
		_xmlhttp.statusText);
		}
	}
}

Con este script dentro del head de nuestra pagina de donde nesecitamos ir al servidor por datos ya estaria casi lista para poder hacer esto. Ahora lo siguiente es crear la página de prueba. Agregamos un botón de html (no agreguen un botón de .net ya que los botones de .Net realizan un postback.) y en el evento onclick mandamos llamar la función xmlRead('Nombre de la pagina? lista de parámetros') un ejemplo:

<INPUT id="PostBack" type="button" value="Button" onclick="xmlRead('Controladora.aspx?ID=21');">

Aquí observamos una pagina que se llama Controladora.aspx y un parámetro ID con valor de 21. Es ese ejemplo le estoy pasando un dato fijo pero se podría tomar de alguna caja de texto por ejemplo:

<asp:TextBox id="txtTemp" runat="server" width="350px"></asp:TextBox>
<INPUT id="PostBack" type="button" value="Button" onclick="xmlRead('Controladora.aspx?ID=' + document.all['txtTemp'].value);">

Con la caja de texto y un botón apuntando a la función xmlRead lo que sigue es crear la pagina controladora que será la encargada de evaluar y responder la solicitud enviada. Creamos una nueva pantalla Web con el nombre de Controladora.aspx estas pantalla será la encargada de evaluar y responder las peticiones que nesecitemos del servidor. Para ello es necesario ir a la vista html de la pantalla y borrar todas las líneas excepto la primera para que nos quede alo así:

Para C#:
	<@= Page language="c#" Codebehind="Controladora.aspx.cs" AutoEventWireup="false" Inherits="Prueba.Controladora" >

Para VB.Net:
	<@= Page language="vb.net" Codebehind="Controladora.aspx.vb" AutoEventWireup="false" Inherits="Prueba.Controladora" >
  

Ahora nos vamos a su código y en el evento load del formulario de la pantalla Controladora hacemos una función para que obtenga el valor del ID y nos regrese un resultado.

Para C#

private void Page_Load(object sender, System.EventArgs e)
{
				string id = Request.QueryString["ID"];
				int reg = 0;
				try
	{
		reg = Int32.Parse(id); //Lo convertimos en numero
	}
				catch (Exception ex)
	{
		Response.Write("Respuesta sin PostBack: no es un numero");
								return; //Salimos de la funcion
	}
				switch (reg)
	{
								case 1:
			Response.Write("Respuesta sin PostBack: Numero Uno");
												break;
								case 2:
			Response.Write("Respuesta sin PostBack: Numero Dos");
												break;
								case 3:
			Response.Write("Respuesta sin PostBack: Numero Tres");
												break;
								case 4:
			Response.Write("Respuesta sin PostBack: Numero Cuatro");
												break;
								default:
			Response.Write("Respuesta sin PostBack: Otro Numero");
								break;
	}
}


Para VB.Net

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Dim id As String = Request.QueryString.Item("ID").ToString()
        Dim reg As Integer = 0

        Try
            reg = Integer.Parse(id)
        Catch ex As Exception
            Response.Write("Respuesta sin PostBack: no es un numero")
            Exit Sub 'Salimos de la funcion
        End Try

        Select Case reg
            Case 1
                Response.Write("Respuesta sin PostBack: Numero Uno")
            Case 2
                Response.Write("Respuesta sin PostBack: Numero Dos")
            Case 3
                Response.Write("Respuesta sin PostBack: Numero Tres")
            Case 4
                Response.Write("Respuesta sin PostBack: Numero Cuatro")
            Case Else
                Response.Write("Respuesta sin PostBack: Otro Numero")
        End Select
End Sub

Con este codigo en la pantalla controladora, el script en la pantalla de prueba lo único que falta es probarlo :). Recuerden que la sesión no se pierde siempre y cuando hagan referencia a la pagina controladora de forma relativa esto quiere decir no pongan la ruta completa sino como cuando insertan una imagen algo así como /Pantallas/Controladora.aspx o ../Controlador/BD.aspx algo así mucha suerte cualquier duda envíenme un mail.

Espero que este articulo les sirva como a mi me sirvió Gracias.