Desventajas de la verificación de forma síncrona
Al responder al mensaje de error, toda la página debe ser recargada (aunque hay un caché, el cliente aún debe comparar si cada archivo tiene actualizaciones a través del protocolo HTTP para mantener el archivo actualizado)
Después de que el servidor responde incorrectamente, se perdió toda la información ingresada por el usuario y el usuario debe completarla desde cero (algunos navegadores nos han ayudado a almacenar en caché de estos datos)
La intención original de la forma de verificación asincrónica
Mejorar la experiencia del usuario
Maximizar y reducir las solicitudes de red y reducir la presión del servidor
Echemos un vistazo a una verificación de forma asíncrona común (verifique si el número de trabajo existe en el fondo y existe como un número de trabajo válido)
Verificar el número de trabajo
La copia del código es la siguiente:
var base_path = '$ {rc.contextPath}';
var $ WorkersIdinput = $ ('#WorkerIdInput');
var $ WorkersiderRor = $ ('#WorkersiderRor');
// identificar si el número de trabajo ingresado por el usuario es correcto
var isworkerIdCorrect = false;
VAR ERROR_WORKER_ID_IS_NULL = "El número de trabajo del empleado no puede estar vacío";
var error_worker_id_is_not_correct = "Ingrese un número de empleado válido";
// Mostrar mensaje de error
función showWorkerEnRerRor (errorMessage) {
$ WorkeriderRor.html (errorMessage);
$ WorkeriderRor.show ();
}
// Ocultar mensaje de error
$ WorkerIdinput.on ('Keydown', function () {
$ WorkeriderRor.hide ();
});
// Guardar el número de trabajo que ingresó la última vez
$ WorkerIdinput.on ('Focus', function () {
var trabajadorD = $ .trim ($ (this) .val ());
$ (this) .data ('antes', WorkerId);
});
// calculando cuando se borra
$ WorkerIdinput.on ('Blur', function () {
var trabajadorD = $ .trim ($ (this) .val ());
// Cuando la longitud es 0, se muestra el mensaje de error con el número de trabajo vacío
if (! WorkerId.length) {
showWorkerReadror (ERROR_WORKER_ID_IS_NULL);
devolver falso;
}
// Si los datos actualmente ingresados por el usuario son los mismos que los datos ingresados la última vez, no se llamará a la interfaz de fondo, no se llamará
// Suponga que el usuario ingresa 123456 y llama a la interfaz de fondo, y el resultado de retorno es que el número de trabajo incorrecto
// Después de que el usuario cambie el contenido de entrada, todavía es 123456, el programa de verificación no accederá a la red y mostrará directamente el mensaje de error
if (trabajadorD == $ (this) .data ('antes')) {
if (! isworkeridcorrect) {
showWorkerReadror (ERROR_WORKER_ID_IS_NOT_CORRECT);
}
devolver falso;
}
// llamando a la interfaz de fondo para verificar si esta ID de empleado es correcta
check Workeridexists (WorkersID, function (Data) {
isworkerIdCorrect = data.ISWorkeridExists;
if (! isworkeridcorrect) {
showWorkerReadror (ERROR_WORKER_ID_IS_NOT_CORRECT);
}
});
});
function checkWorkeridexists (WorkersID, Callback) {
$ .AJAX ({
url: base_path + '/forgotpwd/checkworkeridexists.htm',
datos: {
WorkerId: WorkerId
},
éxito: devolución de llamada
});
}
$ WorkerIdForm.on ('enviar', function () {
// Nuestro formulario solo se puede enviar cuando el servidor devuelve verdadero
if (! isworkeridcorrect) {
$ WorkerIdinput.focus ();
devolver falso;
}
});
Después de escribir el código anterior, la verificación de un cuadro de entrada se realiza básicamente.
Creo que hay algunas cosas que afectan la experiencia del usuario.
La operación de retorno del carro aún no es compatible. Dios mío, debes poder enviar un formulario si entras.
Si la velocidad de Internet del usuario es lenta, haga clic en el botón Enviar, no habrá respuesta, porque ISWorkerIdCorrect es falso y será cierto solo si la verificación del servidor es exitosa.
Aquí está el código modificado:
La copia del código es la siguiente:
var base_path = '$ {rc.contextPath}';
var $ WorkersIdinput = $ ('#WorkerIdInput');
var $ WorkersiderRor = $ ('#WorkersiderRor');
// identificar si el número de trabajo ingresado por el usuario es correcto
var isworkerIdCorrect = false;
// Identificar el número de trabajo de verificación de antecedentes se ha completado (verdadero: es verificación, falso: la verificación no ha comenzado o terminado)
var is workeridloading = false;
// identificar si el usuario ha enviado el formulario
var issubmit = false;
VAR ERROR_WORKER_ID_IS_NULL = "El número de trabajo del empleado no puede estar vacío";
var error_worker_id_is_not_correct = "Ingrese un número de empleado válido";
// Mostrar mensaje de error
función showWorkerEnRerRor (errorMessage) {
$ WorkeriderRor.html (errorMessage);
$ WorkeriderRor.show ();
}
// Ocultar mensaje de error
$ WorkerIdinput.on ('Keydown', function () {
$ WorkeriderRor.hide ();
});
// Guardar el número de trabajo que ingresó la última vez
$ WorkerIdinput.on ('Focus', function () {
var trabajadorD = $ .trim ($ (this) .val ());
$ (this) .data ('antes', WorkerId);
});
// calculando cuando se borra
$ WorkerIdinput.on ('Blur', function () {
var trabajadorD = $ .trim ($ (this) .val ());
// Cuando la longitud es 0, se muestra el mensaje de error con el número de trabajo vacío
if (! WorkerId.length) {
showWorkerReadror (ERROR_WORKER_ID_IS_NULL);
devolver falso;
}
// Si los datos actualmente ingresados por el usuario son los mismos que los datos ingresados la última vez, no se llamará a la interfaz de fondo, no se llamará
// Suponga que el usuario ingresa 123456 y llama a la interfaz de fondo, y el resultado de retorno es que el número de trabajo incorrecto
// Después de que el usuario cambie el contenido de entrada, todavía es 123456, el programa de verificación no accederá a la red y mostrará directamente el mensaje de error
if (trabajadorD == $ (this) .data ('antes')) {
if (! isworkeridcorrect) {
showWorkerReadror (ERROR_WORKER_ID_IS_NOT_CORRECT);
}
devolver falso;
}
// llamando a la interfaz de fondo para verificar si existe esta identificación de empleado
check Workeridexists (WorkersID, function (Data) {
isworkerIdCorrect = data.ISWorkeridExists;
if (! isworkeridcorrect) {
showWorkerReadror (ERROR_WORKER_ID_IS_NOT_CORRECT);
}
});
});
function checkWorkeridexists (WorkersID, Callback) {
$ .AJAX ({
url: base_path + '/forgotpwd/checkworkeridexists.htm',
datos: {
WorkerId: WorkerId
},
befeforesend: function () {
// Antes de enviar la solicitud, se está marcando el número de trabajo.
isworkerIdLoading = true;
},
éxito: devolución de llamada,
Complete: function () {
// Después del final, cierre el logotipo
isworkerIdLoading = false;
// En el proceso de verificación de fondo, si el usuario envía un formulario, lo enviará automáticamente aquí.
if (issubmit) {
$ WorkerIDForm.subMit ();
}
}
});
}
// Ingrese Enviar el formulario
$ Workersidinput.on ('KeyPress', function (E) {
if (E. which === 13) {
$ (this) .blur ();
$ WorkerIDForm.subMit ();
}
});
$ WorkerIdForm.on ('enviar', function () {
// Si el número de trabajo se verifica en segundo plano, se identificará que el usuario ha enviado el formulario
if (isWorkerIdLoading) {
issubmit = true;
devolver falso;
}
if (! isworkeridcorrect) {
$ WorkerIdinput.focus ();
devolver falso;
}
});
En el efecto final, los dos cuadros de entrada en la figura son la verificación asincrónica, pero el efecto se ve igual que sincrónico.
La red GPRRS se usa en la figura para simular una velocidad de red lenta
Diagrama de reproducción