principio de solicitud ajax
Espero adoptarlo
1. ¿Cuál es el principio de Ajax?
El nombre completo de AJAX (Async Javascript y XML), es decir, JavaScript asíncrono. y XML
Es una tecnología de desarrollo web que crea aplicaciones web interactivas que pueden intercambiar datos con el servidor y actualizar parte de la página web sin recargar toda la página web
El principio de Ajax es simplemente a través del objeto XmlHttpRequest Para enviar una solicitud asincrónica al servidor, obtener datos del servidor y luego usar JavaScript para operar el DOM y actualizar la página
El diagrama de flujo es el siguiente:
El director quiere reportarse al director, entonces le encarga a la secretaria que lo haga. Pídale al maestro de la clase que siga haciendo otras cosas hasta que la secretaria le diga que el maestro de la clase ha llegado. Finalmente, el maestro de la clase se reporta. el líder
El proceso de solicitud de datos Ajax es similar a "El director quiere informar al maestro de la clase". La secretaria mencionada anteriormente es bastante Para el objeto XMLHttpRequest, el director es equivalente al navegador, y los datos de respuesta son equivalentes a los del profesor de la clase
El navegador puede enviar la solicitud HTTP, luego hacer otras cosas y esperar a que se procesen los datos devueltos por XHR
2. proceso
Realizar la interacción asincrónica de Ajax requiere la cooperación de la lógica del servidor y se deben completar los siguientes pasos:
Construir el objeto central de Ajax, el objeto XMLHttpRequest
Establezca una conexión con el servidor a través del método open() del objeto XMLHttpRequest
Construya el contenido de datos requerido para la solicitud y envíelo al servidor a través del método send() del objeto XMLHttpRequest
Objeto XMLHttpRequest El evento onreadystatechange proporcionado monitorea su estado de comunicación en el lado del servidor
Acepta y procesa los resultados de datos de la respuesta del servidor al cliente y actualiza los resultados del procesamiento en la página HTML
2.1 Crear un objeto XMLHttpRequest
El constructor XMLHttpRequest() se utiliza para inicializar un objeto de instancia XMLHttpRequest
const xhr = new XMLHttpRequest();
1
2.2 Establecer una conexión con el servidor
Establecer una conexión con el servidor a través del método open() del objeto XMLHttpRequest
xhr. open(método, url, [async][, usuario][, contraseña])
1
Descripción del parámetro:
método: indica el método de solicitud actual , los más comunes son GET y POST
url: dirección del servidor
async: valor booleano, que indica si se realiza la operación de forma asincrónica, el valor predeterminado es verdadero
usuario : Nombre de usuario opcional para fines de autenticación; el valor predeterminado es nulo
contraseña: contraseña opcional para fines de autenticación, el valor predeterminado es nulo
2.3 Enviar datos al servidor
Transferir los datos de la página del cliente a través del método send() del objeto XMLHttpRequest Enviar al servidor
xhr.send([body])
1
body: el cuerpo de datos que se enviará en la solicitud XHR, si no se pasan datos es nulo. Si utiliza una solicitud GET para enviar datos, debe prestar atención a lo siguiente:
Agregar. los datos de la solicitud a la dirección URL en el método open()
Enviar el envío en la configuración del parámetro de datos de la solicitud () en el método
Vincular el evento onreadystatechange a nulo
2.4
El evento onreadystatechange se utiliza para monitorear el estado de comunicación del servidor. El principal atributo monitoreado es XMLHttpRequest.readyState,
Siempre que cambie el valor del atributo readyState, se activará un evento readystatechange.
El El atributo XMLHttpRequest.responseText se utiliza para recibir el resultado de la respuesta del lado del servidor.
Por ejemplo:
const request = new XMLHttpRequest()
request.onreadystatechange = function (e){
if(request .readyState === 4){ // Se completa todo el proceso de solicitud
if(request.status gt; = 200 amp; amp; request.status lt; = 300){
console.log(request.responseText) //Resultado devuelto por el servidor
}else if(request.status gt;=400) {
console.log("Mensaje de error: " request.status)
}
}
}
request.open('POST','
request.send()
3. Encapsulación
A través de la comprensión anterior del objeto XMLHttpRequest, encapsular una solicitud ajax simple
// Encapsular una solicitud ajax
función ajax(opciones) {
//Crear un objeto XMLHttpRequest
const xhr = new XMLHttpRequest()
//Contenido de los parámetros de inicialización
opciones = opciones || || 'GET').toUpperCase()
opciones.dataType = opciones.dataType || 'json'
const params = opciones.data
/ /Enviar solicitud
if (options.type === 'GET') {
xhr.open('GET', options.url '?' params, true)
xhr.send(null)
} else if (options.type === 'POST') {
xhr.open('POST', opciones. URL, verdadera)
x
hr.send(params)
//Recibir solicitud
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
let status = xhr.status
if (status gt; = 200 amp; status lt; 300) {
options.success amp; .success(xhr.responseText, xhr.responseXML)
} else {
opciones.fail & opciones.fail(status)
}
}
}
}
Se utiliza de la siguiente manera:
ajax({
tipo : 'publicación',
tipo de datos: 'json',
datos: {},
url: '
éxito: función (texto, xml){//Función de devolución de llamada después de una solicitud exitosa
console.log(texto)
},
falla: función (estado){Devolución de llamada función después del error de solicitud
console.log(status)
}
})