Traducción: Valente
Hora: 2007-06-11
Texto original: http://ajax.asp.net/docs/overview/AJAXClientEvents.aspx
¡Todos pueden hacer comentarios y yo haré modificaciones activamente!
Introducción [Introducción]
Microsoft Ajax propone eventos del ciclo de vida del lado del cliente similares a los eventos del ciclo de vida del lado del servidor de las páginas ASP.NET 2.0. Estos eventos del lado del cliente nos permiten personalizar nuestra interfaz de usuario tanto para las devoluciones de datos tradicionales como para las devoluciones de datos asíncronas (actualizaciones parciales de la página). También pueden ayudarle a administrar y utilizar scripts personalizados durante todo el ciclo de vida de la página.
Estos eventos del lado del cliente se proponen en la clase AJAX Libray de Microsoft (podemos encontrarlos en la clase AJAX Libray). Estas clases se crean instancias automáticamente (¿instanciadas?) al cargar un control de servidor con AJAX. Estas clases proporcionan algunas API para que podamos vincular eventos a controladores de proveedores de eventos. Y la biblioteca AJAX es independiente del navegador, por lo que el código que escriba funcionará en todos los navegadores compatibles.
Los eventos clave son el evento de carga de la instancia de la aplicación que inicia la solicitud y la devolución de datos asincrónica. Cuando el script se ejecuta durante el evento del controlador de carga, todos los scripts y componentes se han cargado y están disponibles. Cuando parte de la página se actualiza mediante el control UpdatePanel, el más crítico de todos los eventos del cliente es la clase PageRequestManager. Estos eventos del lado del cliente le permiten implementar ciertos escenarios. Los ejemplos incluyen: deshacer devoluciones de datos, establecer una prioridad más alta para una devolución de datos y hacer que UpdatePanel interactúe mejor al actualizar.
Estos eventos nos son muy útiles para crear páginas o escribir componentes. Si es desarrollador web, puede utilizar scripts personalizados para cargar y descargar páginas.
Para obtener más información sobre los eventos del ciclo de vida del lado del servidor, puede consultar la descripción general del ciclo de vida de la página ASP.NET
[Clases de cliente]
en la biblioteca de clases AJAX de Microsoft que propone dos clases principales en el ciclo de vida del cliente de las páginas web AJAX: Clase de aplicación y clase PageRequestManager.
Se crea una instancia de la clase Aplicación cuando el navegador solicita una página que contiene un control ScriptManager. La clase Aplicación es similar al control Página del lado del servidor. También hereda de la clase Control, pero tiene algunas funciones adicionales (en comparación con los eventos del lado del servidor). De manera similar, la aplicación hereda la clase Sys.COmponent. Además, también proporciona muchos eventos operables durante el ciclo de vida del cliente.
Si una página contiene un ScriptManager y uno o más controles UpdatePanel, entonces la página puede lograr efectos de actualización parcial. En ese caso, una instancia de la clase PageRequestManager está disponible para el navegador. Los eventos de cliente proporcionados por PageRequestManager tienen que ver con la devolución de datos asincrónica. Para obtener más detalles sobre la generación de páginas parciales, consulte: Descripción general de representación de páginas parciales.
Agregar controladores para eventos de cliente [Agregar controlador para eventos de cliente]
Ahora agregue o elimine eventos utilizando los métodos add_eventname y reomve_eventname en las clases Application y PageRequestManager. El siguiente ejemplo muestra cómo agregar un controlador llamado MyLoad al evento de inicio del objeto Aplicación.
Sys.Application.add_init(MiInit);
función MyInit(remitente) {
}
Sys.Appplication.remove_init(MyInit);
Comentario; este ejemplo solo muestra la sintaxis del uso de los métodos add_eventname y remove_eventname. Se proporcionan más detalles sobre el uso de este evento en un tema posterior.
Manejo de los eventos de carga y descarga de la aplicación [Eventos de carga y descarga de la aplicación de operación]
Para operar los eventos de carga y descarga del objeto Aplicación, no es necesario vincularse explícitamente a un evento de operación. En su lugar, puede crear una función directamente utilizando las palabras clave reservadas pageLoad y pageUnload. El siguiente ejemplo muestra cómo agregar una acción al evento de carga de la aplicación.
función pageLoad(remitente, argumentos) {
}
Eventos para otras clases de clientes [Otras clases de clientes]
Este tema solo describe los eventos proporcionados por las clases Application y PageRequestManager. La biblioteca de clases AJAX de Microsoft también incluye las siguientes clases para agregar, borrar y eliminar eventos de elementos DOM. Estas clases incluyen:
Existe el método Sys.UI.DomEvent.addHandler o abreviatura $addHandler.
Existe el método Sys.UI.DomEvent.clearHandlers o abreviatura $clearHandlers.
Existe el método Sys.UI.DomEvent.removeHandler o abreviatura $. removeHandler.
Los eventos proporcionados por los principios DOM no se tratan en este tema.
Eventos de cliente de las clases Application y PageRequestManager [Eventos de cliente de las clases Application y PageRequestManager]
La siguiente tabla enumera los eventos de cliente de las clases Application y PageRequestManager que puede utilizar en páginas AJAX ASP.NET. La secuencia de eventos se discutirá en un tema posterior.
Evento
(nombre del evento)
Descripción
(describir)
eventoinit
[Evento de inicialización]
Este evento se genera después de que se hayan cargado todos los scripts y antes de que se cree cualquier objeto. Si planea escribir un componente (script), el evento de inicio proporciona un punto en el ciclo de vida para agregar el componente (script) a la página. Este componente puede ser llamado por otros scripts en el ciclo de vida. Si es desarrollador web, en la mayoría de los casos se recomienda utilizar el evento de carga en lugar del evento de inicio.
El evento de inicio solo se crea una vez cuando la página comienza a generarse. Las actualizaciones parciales posteriores de la página no activarán el evento de inicio.
evento de carga
[evento de carga]
Este evento se genera después de que se hayan cargado todos los scripts y después de que se hayan creado todos los objetos del programa inicializados con $create. Este evento será generado por todas las devoluciones de datos al servidor, incluidas las devoluciones de datos asincrónicas.
Si es desarrollador web, puede crear una función llamada pageLoad, que la proporciona el propio evento de carga. La operación pageLoad (controlador) se puede llamar después de cualquier operación que se agregue al evento de carga mediante el método add_load.
El evento de carga requiere un objeto Sys.ApplicationLoadEventArgs como parámetro eventargs. Puede utilizar este parámetro para decidir si la página necesita mostrar una actualización parcial y también puede decidir qué componentes deben crearse después de que se haya activado el último evento de carga.
descargar evento
[Evento de desinstalación]
Generado antes de que se liberen todos los objetos y antes de que ocurra el evento window.unload del navegador.
Puede manejar el evento de descarga a través de una función llamada pageUnload proporcionada por el propio sistema. El evento pageUnload se llama cuando la página se descarga en el navegador. Durante este evento, deberíamos liberar todos los recursos ocupados por el código.
evento propertyChanged
[Evento de cambio de atributo]
Generado cuando las propiedades de un componente cambian. El objeto de la aplicación hereda este evento de la clase Componente. Este evento solo se genera cuando el desarrollador llama al método Sys.Component.raisePropertyChange al establecer un valor de propiedad.
Consulte Definición de propiedades de componentes personalizadas y generación de eventos PropertyChanged para obtener más información.
Los eventos de cambio de propiedad requieren un objeto Sys.applicationLoadEventArgs como parámetro eventargs.
evento de eliminación
[evento de lanzamiento]
Este evento se genera cuando se lanza la instancia de la aplicación. El objeto de la aplicación hereda este evento de la clase Componente.
evento inicializar solicitud
[Evento de solicitud de inicialización]
Este evento ocurre al comienzo de una solicitud asincrónica. Puede utilizar este evento para cancelar una devolución de datos tradicional, por ejemplo, para permitir que una devolución de datos asincrónica tenga prioridad.
El evento de solicitud de inicialización requiere un parámetro eventargs proporcionado por el objeto Sys.WebForms.InitializeRequestEventArgs. Este objeto proporciona elementos útiles de objetos que provocan devoluciones de datos y solicitudes subyacentes. Este evento también expone el atributo de cancelación. Si configura cancelar en verdadero, se cancelará una nueva devolución de datos.
evento comenzar solicitud
[Iniciar evento de solicitud]
Este evento se genera antes de que comience una devolución de datos asincrónica al servidor. Si ya existe un proceso de devolución de datos, se detendrá (mediante el método abortPostBack). Puede utilizar este evento para configurar encabezados de solicitud o mostrar un mensaje interesante (animación) en la página para indicar que la solicitud está en progreso.
Este evento requiere un objeto Sys.WebForms.BeginRequestEventArgs como parámetro eventargs. Este objeto proporciona elementos útiles para provocar devoluciones de datos y objetos de solicitud subyacentes.
Evento de carga de página
[Evento de carga de página]
Se genera antes de que se actualice cualquier contenido de la página cuando el servidor recibe una devolución de datos asincrónica. Puede utilizar este evento para proporcionar un efecto de transición personalizado para el contenido que debe actualizarse.
Este evento requiere un objeto Sys.WebForms.PageLoadingEventArgs como parámetro eventargs. Este objeto proporciona información útil sobre qué paneles se eliminarán y actualizarán como resultado de la devolución de datos asincrónica más reciente.
Evento cargado de página
[Evento de carga de página completa]
Se genera después de que todo el contenido de la página se haya actualizado mediante un resultado de devolución de datos sincrónico o asincrónico. Durante la devolución de datos sincrónica, solo se pueden crear paneles, pero durante la devolución de datos asincrónica, los paneles se pueden crear y actualizar. Puede utilizar este evento para administrar un efecto de cambio personalizado para el contenido que debe actualizarse.
Este evento requiere un objeto Sys.WebForms.PageLoadedEventArgs como parámetro eventargs. Este objeto proporciona información útil sobre qué paneles se actualizaron y crearon durante la devolución de datos más reciente.
evento final de solicitud
[finalizar evento de solicitud]
Se genera después de que se completó una devolución de datos asincrónica en respuesta y se actualizó la página, o después de que ocurrió un error durante la solicitud. Si ocurre un error, la página no se actualizará. Utilice este evento para proporcionar un mensaje de error personalizado a los visitantes o iniciar sesión en el registro de errores.
Este evento requiere un objeto Sys.WebForms.EndRequestEventArgs como parámetro eventargs. Este objeto proporciona información útil sobre el error que se generó y si se manejó el error. También proporciona información disponible sobre el objeto correspondiente.
Ejemplo de orden de eventos [Ejemplo de orden de eventos]
El siguiente ejemplo muestra cómo se generarán eventos del lado del cliente en una página con dos controles UpdatePanel anidados. Tenga en cuenta la diferencia entre hacer clic en el botón del panel principal y en el botón del panel integrado. El botón en el panel principal hará que el panel principal se actualice y el panel incrustado en él se eliminará y se volverá a crear. Los botones con paneles integrados solo generan actualizaciones en el panel integrado.
Código de página:
1<%@ Idioma de página="C#" %>
2
3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//ES"
4 " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
5
6<script runat="servidor">
7
8</script>
9
10<html xmlns=" http://www.w3.org/1999/xhtml " >
11<cabeza runat="servidor">
12 <title>Ejemplo de evento de cliente</title>
13 <tipo de estilo="texto/css">
14 #OuterPanel { ancho: 600 px; alto: 200 px; borde: 2 px azul sólido;
15 #NestedPanel { ancho: 596 px; alto: 60 px; borde: 2 px verde sólido;
16 margen izquierdo: 5 px; margen derecho: 5 px; margen inferior: 5 px;}
17 </estilo>
18</head>
19<cuerpo>
20 <formulario id="form1" runat="servidor">
21 <div>
22 <asp:ScriptManager ID="ScriptManager1" runat="servidor">
23 <Guiones>
24 <asp:ScriptReference Path="ClientEventTest.js" />
25 </guiones>
26 </asp:ScriptManager>
27 <asp:UpdatePanel ID="OuterPanel" UpdateMode="Condicional" runat="servidor">
28 <Plantilla de contenido>
29 Las devoluciones de datos desde el interior del panel exterior y del panel interior son
30 devoluciones de datos asincrónicas PRM = Sys.WebForms.PageRequestManager APP = Sys.Application.
31
32 <br /><br />
33 <asp:Button ID="OPButton1" Text="Botón del panel exterior" runat="servidor" />
34 Última actualización el
35 <%= FechaHora.Ahora.ToString() %>
36 <br /><br />
37
38 <asp:UpdatePanel ID="NestedPanel" UpdateMode="Condicional" runat="servidor">
39 <Plantilla de contenido>
40 <asp:Button ID="NPButton1" Text="Botón del panel anidado 1" runat="servidor" />
41 Última actualización el
42 <%= FechaHora.Ahora.ToString() %>
43 <br />
44 </ContentTemplate>
45 </asp:Panel de Actualización>
46 </ContentTemplate>
47 </asp:Panel de Actualización>
48
49 <tipo de entrada="botón" onclick="Borrar();" valor="Borrar" />
50
51 <asp:Button ID="FullPostBack" runat="servidor" Text="Devolución de datos completa" />
52 <a href=" http://www.microsoft.com">Descarga de ventana de prueba </a>
53 <br />
54 <span id="EventosdeCliente"></span>
55 </div>
56 </formulario>
57</cuerpo>
58</html>
59
código de secuencia de comandos:
1// Conecte los controladores de eventos de la aplicación.
aplicación 2var = Sys.Application;
3app.add_load(AplicaciónCargar);
4app.add_init(AplicaciónInit);
5app.add_disposing(AplicaciónDisposing);
6app.add_unload(Descarga de aplicaciones);
7
8
9//Manejadores de eventos de aplicaciones para desarrolladores de componentes.
10función ApplicationInit (remitente) {
11 var prm = Sys.WebForms.PageRequestManager.getInstance();
12 si (!prm.get_isInAsyncPostBack())
13 {
14 prm.add_initializeRequest(InitializeRequest);
15 prm.add_beginRequest(BeginRequest);
16 prm.add_pageLoading(Carga de página);
17 prm.add_pageLoaded(Página cargada);
18 prm.add_endRequest(EndRequest);
19}
20 $get('ClientEvents').innerHTML += "APP:: Inicio de aplicación. <br/>";
veintiuno}
22función Carga de aplicación (remitente, argumentos) {
23 $get('ClientEvents').innerHTML += "APP:: Carga de la aplicación. ";
24 $get('ClientEvents').innerHTML += "(isPartialLoad = " + args.get_isPartialLoad() + ")<br/>";
25}
26función Descarga de aplicación (remitente) {
27 alert('APP::Descarga de aplicaciones.');
28}
29función ApplicationDisposing(remitente) {
30 $get('ClientEvents').innerHTML += "APP:: Eliminación de aplicaciones. <br/>";
31
32}
33//Manejadores de eventos de aplicaciones para desarrolladores de páginas.
34 función carga de página() {
35 $get('ClientEvents').innerHTML += "PÁGINA:: Cargar.<br/>";
36}
37
38página de funcionesDescargar() {
39 alert('Página:: Descarga de página.');
40}
41
42// Controladores de eventos PageRequestManager.
43función InicializarRequest(remitente, argumentos) {
44 $get('ClientEvents').innerHTML += "<hora/>";
45 $get('ClientEvents').innerHTML += "PRM:: Inicializando solicitud asíncrona.<br/>";
46}
47función BeginRequest(remitente, argumentos) {
48 $get('ClientEvents').innerHTML += "PRM:: Comenzar a procesar la solicitud asíncrona.<br/>";
49}
50función PageLoading(remitente, argumentos) {
51 $get('ClientEvents').innerHTML += "PRM:: Cargando resultados de solicitud asíncrona.<br/>";
52 var UpdatePanels = printArray("PanelsUpdating", args.get_panelsUpdating());
53 var paneles eliminados = printArray("PanelesDeleting", args.get_panelsDeleting());
54
55 var mensaje = "-->" + Panelesactualizados + "<br/>-->" + Paneles eliminados + "<br/>";
56
57 document.getElementById("ClientEvents").innerHTML += mensaje;
58}
59función PageLoaded(remitente, argumentos) {
60 $get('ClientEvents').innerHTML += "PRM:: Finalizado la carga de resultados de la solicitud asíncrona.<br/>";
61 var PanelesActualizados = printArray("PanelesActualizados", args.get_panelsUpdated());
62 var createPanels = printArray("PaneslCreated", args.get_panelsCreated());
63
64 var mensaje = "-->" + Panelesactualizados + "<br/>-->" + Panelescreados + "<br/>";
65
66 document.getElementById("ClientEvents").innerHTML += mensaje;
67}
68función EndRequest(remitente, argumentos) {
69 $get('ClientEvents').innerHTML += "PRM:: Fin de solicitud asíncrona.<br/>";
70}
71
72// Funciones auxiliares.
73funciónBorrar()
74{
75 $get('ClientEvents').innerHTML = "";
76}
77función printArray(nombre,arr)
78{
79 paneles var = nombre + '=' + longitud de arreglo;
80 si (longitud del arreglo > 0)
81 {
82 paneles += "(";
83 para(var i = 0; i < longitud.arr; i++)
84 {
85 paneles += arr[i].id + ',';
86}
87 paneles = paneles.subcadena (0, paneles.longitud - 1);
88 paneles += ")";
89 }
90 paneles de retorno;
91}
92
Efecto de ejecución Ver código
Orden de eventos para escenarios comunes [Orden general de eventos]
El orden de activación de eventos aún depende de qué controles se utilizan en la página y qué tipo de solicitud ocurre (solicitud de inicialización, devolución de datos tradicional o devolución de datos asincrónica). Esta sección describe la secuencia de solicitud de eventos para varios escenarios comunes.
Solicitud inicial [Solicitud de inicialización]
Durante una solicitud de inicialización de página, se activa una pequeña cantidad de eventos de cliente. Supongamos que el siguiente es el escenario de la solicitud de inicialización.
· La página incluye un control ScriptManager y las propiedades SupportsPartialRendering y EnablePartialRendering del control son verdaderas.
· La solicitud es de tipo GET;
· El servidor puede responder normalmente.
Aquí está la secuencia en la que ocurren los eventos en el lado del cliente:
1. Se produce una solicitud de inicialización al servidor.
2. El cliente recibe la respuesta.
3. La instancia de la Aplicación desencadena el evento de inicio.
4. La instancia de la Aplicación desencadena el evento de carga.
El evento de inicialización ocurre solo una vez durante todo el ciclo de vida de la página cuando se crea una instancia de la aplicación. No se generará en devoluciones de datos asincrónicas posteriores. Durante la solicitud inicial (tenga en cuenta la solicitud), no se genera ningún evento de PageRequestManager.
Devolución de datos asincrónica [Devolución de datos asincrónica]
Una devolución de datos asincrónica envía algunos datos de la página al servidor, recibe una respuesta del lado del servidor y luego actualiza parte de la página. Supongamos el siguiente escenario de devolución asincrónica:
· La página incluye un control ScriptManager y las propiedades SupportsPartialRendering y EnablePartialRendering del control son verdaderas.
· Hay un control UpdatePanel en la página y el valor de la propiedad ChildrenAsTriggers del control se cambia a verdadero.
· Hay un botón dentro del UpdatePanel para activar una devolución de datos asincrónica.
· Obtener respuesta exitosamente del lado del servidor.
Aquí está la secuencia en la que ocurren los eventos en el lado del cliente:
1. Al hacer clic en el botón en el control UpdatePanel, se genera una devolución de datos asincrónica.
2. La instancia de PageRequestManager activó el evento inicializeRequest.
3. La instancia de PageRequestManager activó el evento BeginRequest.
4. La solicitud se envía al servidor.
5. El cliente recibe la respuesta.
6. La instancia de PageRequestManager activó el evento pageLoading.
7. La instancia de PageRequestManager activó el evento pageLoaded.
8. La instancia de la Aplicación desencadenó el evento de carga.
9. La instancia de PageRequestManager activó el evento endRequest.
Tenga en cuenta que el evento de carga de la aplicación es posterior al evento pageLoaded de PageRequestManager y antes del evento endRequest.
Múltiples devoluciones de datos asincrónicas [Múltiples devoluciones de datos asincrónicas]
Cuando se ejecuta una solicitud anterior en el servidor o navegador y el usuario envía una nueva solicitud, se producen múltiples devoluciones de datos asincrónicas. Supongamos que el siguiente escenario describe el caso de múltiples devoluciones de datos asincrónicas.
· La página incluye un control ScriptManager y las propiedades SupportsPartialRendering y EnablePartialRendering del control son verdaderas.
· La página contiene un control UpdatePanel.
· En UpdatePanel, se hace clic dos veces en un control de botón que provoca una devolución de datos asincrónica. El segundo clic ocurre mientras el servidor procesa la solicitud iniciada por el primer clic.
· Obtuve la respuesta a la primera solicitud devuelta del servidor.
Aquí está la secuencia en la que ocurren los eventos en el lado del cliente:
1. Al hacer clic en el botón en UpdatePanel se activa una devolución de datos asincrónica.
2. La instancia de PageRequestManager activó el evento inicializeRequest.
3. La instancia de PageRequestManager activó el evento BeginRequest.
4. La solicitud se envía al servidor.
5. El cliente recibe la respuesta.
6. Se vuelve a hacer clic en el botón, lo que activa una segunda devolución de datos asincrónica.
7. La instancia de PageRequestManager activa el evento inicializeRequest para el segundo clic.
8. La instancia de PageRequestManager activa el evento beginRequest para el segundo clic.
9. La solicitud del segundo clic de Northern Expedition escaneó el servidor.
10. El cliente recibe la respuesta del segundo clic.
11. La instancia de PageRequestManager desencadenó el evento pageLoading.
12. La instancia de PageRequestManager desencadenó el evento pageLoaded.
13. La instancia de la Aplicación desencadenó el evento de carga.
14. La instancia de PageRequestManager activó el evento endRequest.
El comportamiento predeterminado de devolución de datos asincrónica es que la devolución de datos asincrónica más reciente tiene prioridad. Si se producen dos devoluciones de datos asincrónicas en secuencia y el navegador todavía está procesando la primera devolución de datos asincrónica, la primera devolución de datos asincrónica se cancela. Si la primera devolución de datos se envió al servidor, el servidor no devolverá la primera solicitud hasta que llegue la segunda. Para obtener más detalles sobre cómo establecer la prioridad para la devolución de datos asincrónica, consulte Dar prioridad a una devolución de datos asincrónica específica.
Navegación fuera de una página [Navegación por otras páginas]
Cuando el usuario accede a otras páginas desde una página, se mostrará la página actual. Descarga del navegador, para que puedas operar el evento de descarga para liberar recursos. Supongamos que este escenario se simula a continuación.
· La página incluye un control ScriptManager y las propiedades SupportsPartialRendering y EnablePartialRendering del control son verdaderas.
· La página de destino existe.
Aquí está la secuencia en la que ocurren los eventos en el lado del cliente:
1. Inicie una solicitud de una nueva página.
2. El navegador recibe una respuesta solicitando una nueva página.
3. La instancia de la Aplicación desencadena el evento de descarga.
4. Se muestra una nueva página.
Si se produce un error al solicitar una nueva página, el evento de descarga aún se generará, pero la nueva página no se mostrará.
【encima】