Cómo llamar clases en .CS en AJAX
Este es un artículo muy detallado sobre AJAX, que presenta la interacción entre páginas AJAX y ASPX con gran detalle:
Crearemos un campo de ENTRADA que contiene tres campos de ENTRADA (Código Postal, Ciudad y Estado ) página HTML. Nos aseguraremos de que tan pronto como el usuario ingrese los primeros tres dígitos del código postal, los campos de esta página se completarán con el primer valor de estado coincidente. Una vez que el usuario ingresa los cinco números de código postal, inmediatamente determinaremos y poblaremos la ciudad correspondiente. Si el código postal no es válido (no se encuentra en la base de datos del servidor), estableceremos los límites del código postal en rojo. Estas pistas visuales son útiles para los usuarios y se han convertido en estándar en los navegadores modernos (por ejemplo, cuando Firefox encuentra una palabra clave coincidente en una página HTML, resaltará las partes con contenido consistente).
Primero creemos un HTML simple que contenga tres campos de ENTRADA: zip, ciudad y estado. Tenga en cuenta que el método zipChanged() se llama tan pronto como se ingresa un carácter en el campo del código postal. La función JavaScript zipChanged() (ver más abajo) llama a la función updateState() cuando la longitud del zip es 3, y a la función up-dateCity() cuando la longitud del zip es 5. Y updateCity() y updateState() delegan la mayor parte del trabajo a otra función preguntar().
Código postal:<input id="zipcode" type="text" maxlength="5" onKeyUp="zipChanged()"
style="width:60"/>
Ciudad: <input id="ciudad" deshabilitado maxlength="32" style="width:160"/>
Estado: <input id="estado" deshabilitado maxlength=" 2" estilo="ancho:30"/>
var zipField = null;
función zipChanged(){
zipField = document.getElementById("zipcode")
var zip = zipField.value;
zip.length == 3?updateState(zip):zip.length == 5?updateCity(zip):"";
}
función updateState(zip ) {
var stateField = document.getElementById("state");
ask("resolveZip.jsp?lookupType=state&zip="+zip, stateField, zipField); p> p>
}
función updateCity(zip) {
var cityField = document.getElementById("ciudad");
preguntar(" resolveZip.jsp? lookupType=city&zip="+zip, cityField, zipField);
}
</script>
La función preguntar() se comunica con el servidor y asigne una función de devolución de llamada para manejar la respuesta del servidor (consulte el código a continuación). Más adelante, analizaremos el contenido de resolveZip.jsp, que tiene dos características: busca información de ciudad o estado según la cantidad de caracteres en el campo zip. Es importante destacar que Ask() utiliza la naturaleza asincrónica de XmlHttpRequest para que se puedan completar los campos de estado y ciudad o colorear los límites de los campos zip sin ralentizar la entrada de datos. Primero, llamamos request.open(): abre el canal de socket con el servidor, tomando un verbo HTTP (GET o POST) como primer parámetro y la URL del proveedor de datos como segundo parámetro. El último parámetro de request.open() está establecido en verdadero: indica la naturaleza asincrónica de la solicitud. Tenga en cuenta que la solicitud aún no se ha enviado. Con la llamada a request.send(), comienza el envío; esto proporciona cualquier carga útil necesaria para la POST. Cuando usamos solicitudes asincrónicas, debemos usar la propiedad request.onreadystatechanged para asignar la función de devolución de llamada de la solicitud. (Si la solicitud es sincrónica, deberíamos poder procesar el resultado inmediatamente después de llamar a request.send, pero también podemos bloquear al usuario hasta que se complete la solicitud.
)
HTTPRequest = función () {
var xmlhttp=null;
prueba {
xmlhttp = new ActiveXObject("Msxml2. XMLHTTP");
} catch (_e) {
prueba {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (_E) { }
}
if (!xmlhttp && typeof XMLHttpRequest != 'undefinido') {
prueba {
xmlhttp = new XMLHttpRequest();
} captura (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
función preguntar(url, campoToFill, lookupField) {
var http = nueva HTTPRequest() ;
http.open("GET", url, true);
http.onreadystatechange = function (){ handleHttpResponse(http, fieldToFill, lookupField)};
http.send(null);
}
función handleHttpResponse(http, fieldToFill, lookupField) {
if (http.readyState == 4 ) {
resultado = http.responseText;
if ( -1 != result.search("null") ) {
lookupField.style.borderColor = "rojo";
fieldToFill.value = "";
} else {
lookupField.style.borderColor = "";
fieldToFill.value = result;
}
}
}
es la función HttpRequest() utilizada por Ask() (ver arriba) es el constructor de una instancia de XMLHTTPRequest entre navegadores, lo analizaremos más adelante; Hasta ahora, observe cómo la llamada a handleResponse() está envuelta en una función anónima: esta función es function(){handleHttpResponse(http, fieldToFill, lookupField)}.
El código de esta función se crea y compila dinámicamente cada vez que asignamos un valor a la propiedad http.onreadstatechange. Como resultado, JavaScript crea un puntero al contexto (todas las variables accesibles al método final - preguntar()). De esta manera, se garantiza que la función anónima y handleResponse() tendrán acceso completo a todas las variables del host de contexto hasta que el recolector de basura recopile la referencia de la función anónima.
En otras palabras, cada vez que se llama a nuestra función anónima, puede hacer referencia sin problemas a las variables request, fieldToFill y lookupField como si fueran globales. Además, cada llamada a Ask() creará una copia independiente del entorno, y estas variables contendrán los valores en los que finalizará la función.
Ahora analicemos la función handleResponse(). Dado que se puede activar en diferentes estados del procesamiento de la solicitud, esta función ignorará todos los casos, excepto cuando se complete el procesamiento de la solicitud, lo que corresponde al atributo request.readyState igual a 4 ("Completado"). En este punto, la función lee el texto de respuesta del servidor. Al contrario de lo que sugiere su nombre, ni la entrada ni la salida de XmlHttpRequest están necesariamente limitadas al formato XML. En particular, nuestro resolveZip.jsp (consulte el Listado 1 en el código fuente) devuelve texto sin formato. Si el valor devuelto es "desconocido", entonces la función asume que el código postal no es válido y establece el color del borde del campo de búsqueda (zip) en rojo. De lo contrario, el valor de retorno se utiliza para completar los campos de estado o ciudad y los límites postales reciben un color predeterminado.
Objeto XMLHttpRequest-Transport
Volvamos a nuestra implementación en varios navegadores de XMLHTTPRequest. La última lista contiene una función HttpRequest() - es compatible con IE5.0 y Mozilla 1.8/FireFox. Para simplificar, solo creamos un objeto Microsoft XMLHTTPRequest y, si la creación falla, asumimos que es Firefox/Mozilla.
En el corazón de esta función se encuentra XMLHTTPRequest, un objeto de navegador nativo que facilita la comunicación entre cualquier cosa, incluido el protocolo HTTP, y el servidor. Permite especificar cualquier verbo, encabezado y carga útil HTTP, y puede funcionar de forma asincrónica o sincrónica. No es necesario descargar ni instalar ningún complemento, aunque en el caso de IE, XMLHTTPRequest es un ActiveX integrado en el navegador. Por lo tanto, los permisos predeterminados de IE para "Ejecutar controles y complementos ActiveX" deberían ser los adecuados para usarlo.
Lo más importante es que XMLHTTPRequest permite una consulta programática estilo RPC al servidor sin necesidad de actualizar la página. Lo hace de una manera predecible y controlable, proporcionando acceso completo a todos los detalles del protocolo HTTP, incluidos los encabezados y cualquier formato personalizado de los datos. En artículos futuros, le mostraremos algunos de los otros protocolos industriales que puede ejecutar sobre estos protocolos de transporte (como servicios web y XML-RPC) que simplifican enormemente el desarrollo y mantenimiento de aplicaciones a gran escala.
5. Lógica del lado del servidor
Finalmente, el resolveZip.jsp del lado del servidor se llama desde la función Ask() (consulte el Listado 1 en el código fuente adjunto). Se llama a resolveZip.jsp en dos ocasiones distintas, que se distinguen por la longitud del código postal actual (consulte la función zipChanged()). El valor del parámetro de solicitud lookupType es estado o ciudad. Para simplificar, asumiremos que los dos archivos state.properties y city.properties están ubicados en el directorio raíz de la unidad C del servidor. La lógica resolveZip.jsp es responsable de devolver el valor de búsqueda con el archivo precargado apropiado.
Nuestra página habilitada para AJAX ya está lista.
6. Tecnología de secuencias de comandos remotas: un método opcional
Algunas implementaciones AJAX más antiguas se basan en la llamada tecnología de secuencias de comandos remotas. La idea es que la acción de un usuario provoque una consulta al servidor a través de un IFRAME, y el servidor responda con JavaScript, que se ejecuta tan pronto como llega al cliente.
Esta es una gran diferencia en comparación con el método XMLHttpRequest, donde el servidor responde con datos y el cliente los interpreta. La ventaja es que esta solución es compatible con navegadores más antiguos.
La parte HTML del ejemplo basado en IFRAME (consulte el Listado 2 en el código fuente adjunto) es muy similar a la que usamos en el caso de XMLHTTPRequest, pero esta vez introduciremos otro elemento IFRAME: el controlador. :
Código postal:<input id="código postal" tipo="text" maxlength="5" onKeyUp="zipChanged()"
estilo="ancho:60" tamaño= "20"/ >
Ciudad: <input id="ciudad" deshabilitado maxlength="32" style="width:160" size="20"/>
Estado: <input id= "estado" deshabilitado maxlength="2" estilo="ancho:30" tamaño="20"/>
Seguimos llamando a zipChanged() una vez por cada pulsación de tecla, pero esta vez, la función preguntar() se llama desde zipChanged() (consulte el código fuente adjunto El Listado 3) es responsable de configurar el atributo src del IFRAME en lugar de llamar a una XMLHTTPRequest:
función preguntar(url, fieldToFill, lookupField){
var controlador = document.getElementById( "controlador" );
controlador.src= url+"&field="+fieldToFill.id+"&zip="+lookupField.id;
}
Servidor La lógica del lado consiste en una descripción aproximada de resolveZip.jsp (consulte el Listado 4 en el código fuente adjunto). Se distingue de su contraparte XMLHTTPRequest: devuelve declaraciones de JavaScript que establecen los valores globales de los campos variables de búsqueda y ciudad, y llama a la función respuesta() desde el contexto de ejecución de la ventana global una vez que llega al navegador.
La función respuesta() es una versión modificada de handleResponse(); esta función puede evitar el procesamiento de solicitudes pendientes (consulte el Listado 2 en el código fuente adjunto a este artículo para obtener más detalles).
7. Problemas
En aras de la simplicidad, "observemos" algunas cuestiones importantes en nuestro código de muestra:
1. Hechos -XMLHTTPRequest Las instancias de objetos y las llamadas a funciones de devolución de llamada no se destruyen después de su uso; esto puede provocar pérdidas de memoria después de cada llamada. El código escrito correctamente debería destruir o reutilizar estas instancias en el grupo de objetos. Además, el cliente debe utilizar la misma tecnología de gestión de objetos que el software del servidor.
2. En la mayoría de los casos, los errores no se suelen gestionar de forma eficaz. Por ejemplo, la llamada a request.open() en el método Ask() puede generar una excepción, que debe detectarse y manejarse, incluso si la función de captura automática de excepciones de JavaScript no está configurada en el navegador. La función handleResponse() es otro ejemplo. Debe verificar los encabezados y los valores de texto de respuesta para detectar posibles errores de comunicación y del lado del servidor. En caso de error, deberá intentar recuperar y/o reportar el error.
Las aplicaciones AJAX correctamente desarrolladas deben evitar "enviar" datos sueltos tanto como sea posible, ya que a menudo hay roturas de cables y otros problemas de comunicación de bajo nivel, por lo que estas aplicaciones deben construir un marco robusto y autorreparable para brindar soporte para esto.
3. Los frameworks actuales del lado del servidor ofrecen bastantes características: pueden vivir en armonía con un enfoque de actualización gratuita. Por ejemplo, consideremos el problema de la autenticación personalizada del lado del servidor dentro de un período de tiempo específico. En este caso, debemos interceptar la respuesta del sistema de seguridad a la llamada XMLHTTPRequest, mostrar la pantalla de inicio de sesión y luego volver a emitir la solicitud después de que el usuario haya sido autenticado.
Todos estos problemas son típicos de cualquier código de aplicación que trabaje con API de bajo nivel, y todos estos problemas pueden resolverse. La buena noticia es que las tecnologías necesarias para resolver estos problemas son muy similares a la mayoría de las tecnologías de desarrollo Java, como servicios web, etiquetas personalizadas y XML/XSLT. La única diferencia es que estas tecnologías ahora se utilizan en el lado del cliente en las siguientes formas:
· Servicios web: utilizando estándares de comunicación simples como SOAP/REST/RPC
· Cliente Etiquetas personalizadas del lado: empaqueta controles ricos del lado del cliente e integra funciones AJAX
·Manipulación de datos basada en tecnología XML y XSLT
8. Resumen
El método AJAX puede proporcionar a las personas una rica experiencia de Internet similar a la de la aplicación de escritorio. Sin embargo, debemos utilizar la tecnología AJAX de forma selectiva. Por ejemplo, cuando todavía está comprando en línea, definitivamente no desea dejar que su tarjeta de crédito pase por un procesamiento en segundo plano y comience a pagar silenciosamente. ¿AJAX se convertirá en una fuerza continua? Ciertamente lo esperamos. Hemos estado trabajando duro en el desarrollo de aplicaciones AJAX durante los últimos cinco años y hemos demostrado que son sólidas y efectivas. Sin embargo, requiere que el desarrollador domine una serie de tecnologías distintas a las utilizadas en las aplicaciones web tradicionales de "actualización mediante clic".