Dando por hecho las lecturas de que es Ajax y lo que implica esta nueva forma de emplear la comunicación de Cliente – Servidor, se planteará en este articulo solo la implementación que se puede llevar a cabo para quienes programen en Punto Net con Páginas Aspx en C# .
Solo explicaré los puntos principales que debes tomar en cuenta, necesitarás crear un website en visual studio y agregar los ejemplos que descargarás después, toma en cuenta las rutas de folders para que ambientes correctamente, asumo que esta parte ya la sabes, al menos hoy no explicaré esa parte.
Especificaremos los prerrequisitos :
Trabajar con el IIS version 5 o posterior.
Internet explorer 6.0 o posterior
Los ejercicios estan creados en Visual Studio 2005.
CREANDO TODO A MANO
Primero.
El primer ejercicio corresponderá a la creación de un objeto XMLHttpRequest del tipo javascript responsexml con el cual trabajaremos todo el tiempo, este objeto lo creamos en el cliente.
Segundo.
En la parte del servidor tenemos una página de consultas en asp net c# que regresará la información en un string segun sea el caso de la consulta .
La página puede aceptar parametros tradicionales por la URL consultas.aspx?variable1=valor1&variable2=valor2
Si ya lo notaron tendremos 2 páginas una con la información original y con segmentos que solo se recargaran mediante ayax con algun evento en el cliente, la otra página que puede ser un iframe no visible que nos arroja resultados de consulta según los parametros enviados.
Tercero.
En la parte del cliente haciendo uso del objeto creado en el paso 1 generaremos una función para trabajar con los resultados de la consulta hecha al server haciendo uso de una propiedad responseText del objeto. Se aclara que el resultado es un string, si fuera necesario darle formato de lado del server o bien recibirlo en el cliente y darle formato de presentacion aquí.
Primer Ejercicio
Primero: en el cliente puede ser una página InicioAjax.aspx o Com_Ajax.htm.
Creamos el objeto ajax (Xmlhttp)
function createXMLHTTP()
{
var arrSignatures = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for (var i=0; i <>
{
try
{
var oRequest = new ActiveXObject(arrSignatures[i]);return oRequest;
} catch (oError) { }
}
throw new Error("MSXML No esta instalado en su sistema");
}
Segundo: En el el server en una pagina db.apsx en el cs.En el page load validar los parametros de entrada y asignar el metodo correspondiente, es decir el trabajo que se hara en el server side
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["Variable2"] != null && Request.QueryString["Variable2"] != null &&
Request.QueryString["Variable3"] != null && Request.QueryString["Variable4"] != null)
parametros();
else if (Request.QueryString["Variable1"] != null)
Response.Write(Tabla_1());
}
Tercero: Crear los métodos a emplear para regresar el resultado de la consulta.Creamos el formato de ser necesario.
Cuarto: En el cliente crear el método que hará uso de los resultados del server y adjuntar el método a algun evento del cliente.
Cuarto: En el cliente crear el método que hará uso de los resultados del server y adjuntar el método a algun evento del cliente.
He aquí un ejemplo, dado que puede enviar parámetros asignando la página que reciba la consulta
function FillParameters()
{
//Esta funcion solo regresa los valores de ciertas variables procesadas en el server
var X=null;
var Variable1="Esta es la variable1";
var Variable2="Esta es la variable2";
var Variable3="Esta es la variable3";
var Variable4="Esta es la variable4";
if(X && X.readyState!=0) { X.abort(); }//Aborta el objeto si es que ya esta inicializado
X=createXMLHTTP();
d = document.getElementById("disp");
eval(d).innerText = "Cargando datos....";
if(X!=null)
{
X.open("GET","db.aspx?Variable1="+Variable1+"&Variable2="+Variable2+"&Variable3="
+Variable3+"&Variable4="+Variable4,false);
X.onreadystatechange=function()
{ if(X.readyState==4&&X.responseText)
{ eval(d).innerHTML = X.responseText;}};
}
X.send(null);
}
En este metodo cargan variables y las envia como parámetros, es importante validar los estados de conexión del objeto para saber si la respuesta esta lista con el valor en 4 para ReadyState, por otra lado el metodo Get como primer parametro al abrir la conexión al server, el segundo parametro es la fuente de datos esta puede ser la consulta a un store o directamente un txt o xml publicado en el sitio o bien una página en el server, lo mismo aplica para los jps de java y los php. Y el último parámetro es la sincronización, asincrona= false.
Quinto: Donde emplearemos estas funciones del cliente.
Creamos los botones y asp net controls (grid view, etc..) que se emplearán en el ejercicio.
Creamos los botones y asp net controls (grid view, etc..) que se emplearán en el ejercicio.
Sexto: Probar las diferentes formas de traer datos del servidor solo recargando la parte que nos interesa.
Ejemplo con un Framework en ajax . Proxima entrada....
