JavaScript con Ajax

1 - Articulo
2 - Ejemplo
3 - Resumen


ARTICULO

En este artículo veremos como se puede trabajar con Ajax y JavaScript, pero antes de continuar quisiera recalcar que es muy importante que los programadores Web, no dejen de lado el aprendizaje de JavaScript, ya que esta forma de desarrollar es la clave del éxito de Ajax, AjaxPro, HttpRequest, XSLT o cualquier tipo de transmisión de datos entre cliente y servidor. Se torna muy importante que los programadores manejen muy bien la creación de objetos y estilos con JavaScript, ya que es primordial, como ejemplo, poder saber, que en vez de hacer pantallas emergentes, puedes escribir capas sobre las páginas desplegadas que bloqueen lo que queda atrás, hasta que el usuario realice la acción deseada. Esto lo podremos ver más adelante, pero debo detallar que en reiteradas ocasiones me ha tocado ver a programadores que no se manejan muy bien en JavaScript y permítanme decirles que esto es clave para el éxito de una buena programación Web (Esto me lo dijeron a mí un día y ahora se los comparto a ustedes).

Ahora sin más, ya que todo esta dicho, vamos al ejemplo y repetiremos algunos pasos del de introducción a ajax para que quede claro como configurar la dll

volver

EJEMPLO

En el siguiente ejemplo, veremos como desplegar un combo box utilizando javascript en la carga de la página. A medida que avanza el ejemplo, veremos como ir mejorando el ejercicio para ver un despliegue de datos de usuario, según su apellido seleccionado y compararemos cuanto código en JAVASCRIPT se va al cliente.

Como ya sabemos, debemos crea una solución y a esta asociar una referencia a la librería de AJAX que utilizaremos, en este caso Ajax.dll (Recomiendo crear el directorio bin en el proyecto y copiar la dll en este).

Como siguiente paso, agregaremos en el WEB.CONFIG, dentro del nodo system.web, las siguientes líneas, las cuales nos permitirán realizar la referencia a la dll de AJAX que hemos referenciado.

<httpHandlers>

<add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax"/>
</httpHandlers>

Ahora, lo primero que haremos será definir un archivo .aspx que llamaremos inicio.aspx y realizaremos la definición del tipo que será utilizado por ajax en el método que atiende el evento load de la página, antes de esto renombraremos el espacio de nombre de la clase de _Default a Inicio. Esto nos permitirá trabajar con el mismo nombre en el caso de que renombren la página Default.aspx que se crea por defecto.

Como el artículo anterior lo escribimos en Visual Basic, el actual lo escribiremos en C#. La clase y el método quedan de la siguiente forma:

public partial class Inicio : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e) {
Ajax.Utility.RegisterTypeForAjax(typeof(Inicio));
}
}

Como mencionamos anteriormente, veremos como deberíamos cargar la información si es que utilizamos javascript. Para ello crearemos un método en el servidor que retornará los registros a javascript y este se encargará de desplegarlos en el html. Como base de datos, utilizaremos la bien ponderada y conocida por todos, Northwind.

NOTA: No haremos el ejercicio a tres capas ya que nos quitaría mucho tiempo, por lo cual utilizaremos los controles de Bases de Datos SqlConnection, SqlDataAdapter y un DataSet. Con esta intensión, es que, tendremos que importar los espacios de nombre:

using System.Data;
using System.Data.SqlClient;

El siguiente paso será crear el método que nos retornará la información de los empleados desde la tabla Employes, de la siguiente forma:

[Ajax.AjaxMethod()]
public DataSet getEmpleado() {
DataSet ds;
try{

String strCnx = "Data Source=(local);" +
"Initial Catalog=Northwind;" +
"Integrated Security=True";

String strSql = "select EmployeeID, LastName " +
"from Employees";

SqlConnection cnx = new SqlConnection(strCnx);
SqlDataAdapter da = new SqlDataAdapter(strSql, cnx);
ds = new DataSet();

da.Fill(ds);
}
catch (System.Exception ex){
throw ex;
}
return ds;
}

Como se puede observar , estamos devolviendo un objeto, que en ocaciones, si este objeto contiene mucha información, el tiempo de respuesta de entrega y de tratado de esta en el cliente puede ser muy largo, por lo cual yo recomiendo cargar la información en el servidor y entregar, en vez de un objeto un string con el html listo.

Antes de ver como trabajar con xslt tendremos que ver como podemos desplegar desde javascript la información, para ello, en el código HTML realizaremos las siguientes acciones:

Dentro del Div que se ha creado en el código HTML agregaremos las siguientes líneas de código, quedando todo el body del html de la siguiente forma:

<form id="frm" runat="server">
<div>

<select id="sltEmpleado" >
</select>
</div>
</form>

El siguiente paso será crear en el espacio de nombre del nodo de script del código HTML la función que realizará la llamada al método que nos retornará la información, para ello realizaremos las siguientes acciones:

<script language="javascript">
function getEmpleado(){
Inicio.getEmpleado(getEmpleado_callback);
}

function getEmpleado_callback(res) {
if (res.error!=null){
alert(res.error);
}else{
for( i=0; i<res.value.Tables[0].Rows.length; i++) {
var opcion = document.createElement("OPTION");
document.frm.sltEmpleado.options.add(opcion);

opcion.id = res.value.Tables[0].Rows[i].EmployeeID;
opcion.innerText = res.value.Tables[0].Rows[i].LastName;
}
}
}
</script>

Analisemos un poco el código creado.

En la función getEmpleado, realizamos una llamada al método del servidor este responde y, el resultado se despliega en la función getEmpleado_callback, en la cual se toma el objeto retornado y actualiza la información. Si bien es una buena forma de desplegar la información, que pasaría si en el objeto viniera más de una tabla o más de 10 registros, el despliegue sería tan eficiente. Esta técnica solo la recomiento para pequeños volumenes de información.

Como segunda observación, podemos concluír que si no somos cuidadosos en crear sinónimos en las consultas a la base de datos, el cliente podrá saber cuales son los campos de datos con los cuales estoy trabajando y esto en vez de ocultar la información al usuario final, esta permitiendo que el usuario conozca los campos con los cuales trabajo. Algunos dirá, puedo ponerlos en un archivo .js, pero que pasa si el que está revisando es avispado y descarga los links que definimos para llamar a nuestros archivos. Esta solución debe ser estudiada con mucho detalle antes de ser utilizada.

Bueno, solo nos queda realizar la llamada, para ello en el nodo body agregaremos una llamada a la función getEmpleado, utilizando la instrucción onload, quedando todo el HTML de la siguiente forma:

<body onload="javascript:getEmpleado();">
<form id="frm" runat="server">
<div>
<select id="sltEmpleado" >
</select>
</div>
</form>
</body>

volver

RESUMEN

Una de las desventajas de la respuesta de Ajax en JavaScript, es el tratamiento de los errores, ya que para desplegar estos tenemos que utilizar la sentencia res.error, que despliega el tipo de error con el mensaje. En cambio AJAXPRO permite desplegar el problema en cuestión, es decir, utilizamos la sentencia res.error.Message, que rescata el error en cuestión para ser desplegado, permitiendonos definir nuestros propios mensajes de errores.

volver