Este artículo comparte tres métodos de carga asincrónicos de Java para su referencia. El contenido específico es el siguiente
El primer método para cargar usando un complemento de navegador requiere una cierta habilidad de codificación subyacente. No hablaré de eso aquí, para no engañar a los hijos de las personas. Si tiene esto en consideración, puede Baidu por su cuenta.
El segundo tipo usa un iframe oculto para simular cargas asincrónicas . ¿Por qué estamos hablando de simulación aquí? Debido a que en realidad pusimos el resultado de retorno en un iframe oculto, por lo que no hicimos el salto de la página actual, que se sintió como una operación asíncrona.
<! DocType html> <html> <head> <meta charset = "utf-8"> <title> hidden iframe de carga de carga </title> <script type = "text/javascript" src = "jQuery ruta ..."> </script> </head> <body> <iframe name = "frm" style = "visual enctype = "multipart/form-data" método = "post" target = "frm" onsubMit = "carging (true);"> <p id = "upfile"> adjunto: <input type = "file" name = "myfile" style = "visual type = "Subt" value = "Asynchronous upload"> <span id = "uptxt" style = "display: none"> cargando ... </span> </p> </orm> <div id = "flist" style = "border: 1px Dotted Darkgray;"> </divs> <script> // Función de llamada de llamada (FileName) {addToFlist ((FileToflist (); "> </script> <script> // Función de llamada de llamada (FileName) {addToFlist ((FileToFlist ();"> </script> <Script> // Carga (falso); } function addToFList (fname) {var temp = ["<p id = '" + fname + "'>", fname, "<button onClick = 'delfile (/" " + fname +"/");'> Eliminar </botón>", "</p>"]; $ ("#flist"). append (temp.Join (""));} Función Loading (showloading) {if (showloading) {$ ("#uptxt"). show (); } else {$ ("#uptxt"). Ocultar; }} </script> </body> </html> Hay dos puntos clave en esta tecnología:
1.Form especificará el objetivo, y el resultado enviado se devolverá al iframe oculto. (es decir, el objetivo del formulario es consistente con el atributo de nombre del iframe).
2. Después de completar la presentación, la página en el iframe se comunica con la página principal. ¿Cómo notificar el resultado de carga y la información del archivo del servidor se comunican con la página principal?
Después de recibir el archivo, usamos NodeJS para devolver un método definido por Window.Parent. Página principal. Después de ejecutar, podemos saber que la carga de archivo se completa. El código es muy simple:
router.post ('/upload2', multipartmiddleware, function (req, res) {var fpath = req.files.myfile.path; var fname = fpath.substr (fpath.lastIndexof ('//') + 1); setTimeout (function {var retire + "');", "</script>"]; Después de la ejecución, puede abrir la opción del desarrollador y encontrará que se devuelven algunos datos devueltos del iframe oculto.
El tercer tipo usa xmlhttprequest2 para cargas asincrónicas reales .
O publique el código primero:
Después de la ejecución, puede abrir la opción del desarrollador y encontrará que se devuelven algunos datos devueltos del iframe oculto. El tercer tipo usa xmlhttprequest2 para cargas asincrónicas reales. Publicemos el código primero:
<! DocType html> <html> <fead> <meta charset = "utf-8"> <title> xhr nivel2 carga asíncrona </title> <script type = "text/javascript" src = "jQuery ruta ..."> </script> </head> <body> <div> <p id = "upfile"> section: <inying type = "Id =" Id = "myfile" style = "Display: Inline"> </p> <p id = "upbtn"> <input style = "relleno-izquierda: 50px; padding-right: 50px;" type = "Button" Value = "Asynchronous upload" onClick = "upload;"> <span id = "uptxt" style = "display: none"> cargando ... </span> <span id = "upprog"> </span> <button id = "stopbtn" style = "visual Darkgray; "> </div> <script> Function {// 1. Prepare FormData var fd = new FormData; fd.append ("myfile", $ ("#myfile") [0] .files [0]); // Crear objeto xhr var xhr = new xmlhttprequest; // Escuche el estado y responda en tiempo real // xhr y xhr.upload tiene eventos de progreso, xhr.progress es el progreso de descarga, xhr.upload.progress es el progreso de carga xhr.upload.onprogress = function (event) {if (lengthcomputable) {var porcent = math.round (event.loaded * 100 / event.total); console.log ('%d%', porcentaje); $ ("#upprog"). texto (porcentaje); }}; // Evento de inicio de transmisión xhr.onloadStart = function (event) {console.log ('Load start'); $ ("#upprog"). Text ('iniciar cargada'); $ ("#stopBtn"). One ('Click', function {xhr.abort; $ (this) .Hide ();}); Cargando (verdadero); }; // El proceso AJAX completó con éxito el evento xhr.onload = function (event) {console.log ('load success'); $ ("#upprog"). Text ('Subir éxito'); console.log (xhr.esponsetext); var Ret = json.parse (xhr.esponsetext); addToFList (ret.fname); }; // Se produjo un evento de error en el proceso AJAX xhr.onerror = function (event) {console.log ('error'); $ ("#upprog"). Text ('Error ocurrió'); }; // Ajax se cancela xhr.onabort = function (event) {console.log ('abort'); $ ("#upprog"). Text ('la operación fue cancelada'); }; // La transmisión Loadend termina, y se activará independientemente del éxito o el fracaso xhr.onloadend = function (event) {console.log ('load end'); Carga (falso); }; // Iniciar una solicitud AJAX para transmitir datos xhr.open ('post', '/upload3', true); XHR.SEND (FD); } function addToFList (fname) {var temp = ["<p id = '" + fname + "'>", fname, "<button onClick = 'delfile (/" " + fname +"/");'> Eliminar </botón>", "</p>"]; $ ("#flist"). append (temp.Join ("")); } function delfile (fname) {console.log ('para eliminar el archivo:' + fname); // TODO: por favor implementa} función de carga (showloading) {if (showloading) {$ ("#uptxt"). Show (); $ ("#stopbtn"). show (); } else {$ ("#uptxt"). hide (); $ ("#stopBtn"). Hide (); }} </script> </body> </html> Hay mucho código, pero es fácil de entender. Cualquiera que haya usado AJAX sabe que los objetos XHR proporcionan un método de devolución de llamada OnreadyStateChange para escuchar todo el proceso de solicitud/respuesta. Hay varios eventos de progreso más en la especificación XMLHTTPRequest Nivel 2. Hay 6 eventos a continuación:
1.LoadStart: activado cuando se recibe el primer byte de los datos de respuesta.
2. Progress: se activa continuamente durante la recepción de la respuesta.
3.Error: activado cuando ocurre un error en la solicitud.
4.Abort: activado cuando la conexión se termina debido a que llama al método de abort.
5. Carga: activado cuando se reciben datos de respuesta completa.
6.Loadend: activado después de que se complete la comunicación o se activan el error, abortar, los eventos de carga.
Esta vez podemos interpretar el código: cuando se inicia el evento de transmisión, agregamos un evento de clic en el botón Stop Transmission, y el método de abortes incorporado puede detener la transmisión. Si no hace clic, se cargará normalmente hasta que se complete la transmisión. Su código de fondo es similar al segundo método.
Los tres métodos tienen sus propias ventajas y desventajas, hagamos un resumen simple.
Los controles de terceros tienen una buena interactividad y capacidad de control, porque están cerca de la capa inferior y su rendimiento también es excelente. Sin embargo, debido a que es difícil de escribir, generalmente necesita instalar complementos usted mismo, y a veces es posible que deba escribirlos usted mismo.
Personalmente, creo que el método de iframe oculto es un método muy reflexivo. Iframe puede ayudarnos a hacer muchas cosas. Este enfoque tiene una amplia compatibilidad del navegador y no requiere que se instalen complementos. Sin embargo, tiene una interactividad deficiente, un proceso de carga incontrolable, y su rendimiento también es muy promedio.
Para la carga de Ajax puro de nivel XHR2, debe tener un navegador con una versión más alta (IE9+). Pero tiene muy buena interactividad, puede ver el progreso de la carga y es controlable.
El desarrollo se puede hacer de manera diferente según los requisitos. Personalmente, creo que cargar estos archivos, especialmente el segundo, proporciona un tipo de idea, que utiliza completamente las características de ciertas etiquetas HTML, puede ser algo que nuestros desarrolladores necesitan pensar más.
Lo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.