¿Qué es AJAX? ¿Cómo usarlo en JavaScript?
Por lo general, cuando JavaScript envía una solicitud al servidor para obtener datos, el servidor devolverá los datos. En las páginas web tradicionales que no utilizan AJAX, es necesario actualizar la página para volver a cargarla. AJAX, por otro lado, permite que una página web actualice parte de su contenido sin necesidad de recargarla. (Por ejemplo, si desea ampliar el mapa, constantemente le pedirá al servidor información detallada sobre la ubicación actual del mapa y el servidor le devolverá los datos. No necesitamos recargar toda la página aquí, de lo contrario la experiencia del usuario será demasiado pobre. En su lugar, actualice la página localmente)
Como no puedo escribir un ejemplo complejo como un mapa aquí, para demostrar el uso de AJAX. un ejemplo simple de Secondología:
//Ejemplo simple de AJAX.
///1: Crear variable de solicitud
var myRequest
//Verificación de la función del navegador.
If (window.XMLHttpRequest) {//Si es compatible, es Firefox, Google y otros navegadores.
mi solicitud = new XMLHttpRequest();
} else if (ventana. objeto ActiveX) {//Si no es compatible, es el navegador IE.
mi solicitud = nuevo objeto ActiveX("Microsoft.XMLHTTP");
}
// 2: agregue código de manejo de eventos a la solicitud.
mi solicitud . onreadystatechange = function(){
Console.log("¡Función anónima llamada!");
console log(mi solicitud . lista estado);
if (myRequest.readyState === 4) {
var p = document . createelement(" p ");
var t =. documento . crear nodo de texto (mi solicitud . texto de respuesta);
Apéndice
documento . appendChild(p);
}
};
////3: Configurar el envío de solicitud
myRequest.open(' GET ' , ' simple.txt ', true);
myRequest.send(empty);
// ....
Hay tres principales formas de utilizar secciones AJAX, como se muestra en el ejemplo.
1. Cree la variable solicitada.
En el archivo de script, primero declare el objeto XMLHttpRequest, que también es el núcleo de Ajax mencionado en el título. Las páginas del navegador pueden comunicarse con el servidor a través del objeto XMLHttpRequest. Porque la creación de este objeto varía de un navegador a otro. Entonces necesitamos usar una declaración if para determinar si XMLHttpRequest existe.
2. Agregue el código de manejo de eventos a la solicitud.
Después de crear el objeto XMLHttpRequest, puedes enviar la solicitud al servidor, pero primero manejaremos los eventos a los que responde el servidor. Cuando el servidor responda, se activará el evento onreadystatechange del objeto myRequest.
En el evento onreadyStatechange, vemos que myRequest llama al atributo readyState. readystate tiene cuatro valores que representan la etapa de respuesta actual. Cada valor es el siguiente:
L 1. : La solicitud se ha establecido, pero no se ha enviado (no se llamó a send()).
La solicitud ha sido enviada y se está procesando (normalmente ahora puedes obtener los encabezados de contenido de la respuesta).
L 3: La solicitud está siendo procesada; generalmente hay algunos datos en la respuesta, pero el servidor no ha terminado de generar la respuesta.
L 4: Respuesta completada; puede obtener y utilizar la respuesta del servidor.
Generalmente, solo nos importa la situación cuando el valor de readyState es 4, lo que indica que la respuesta se ha completado.
3. Configurar el envío de la solicitud
Utilice el método abierto para configurar la solicitud. Tiene tres parámetros:
1. El primer parámetro significa usar GET para obtener datos del servidor.
2. El segundo parámetro es la dirección del servidor. Aquí utilizamos el archivo simple.txt local para ahorrarnos la molestia de crear un servidor.
3. El tercer parámetro verdadero indica que la solicitud es asincrónica, es decir, cuando se envía la solicitud, JavaScript no se bloqueará esperando la respuesta del servidor y continuará ejecutando el código posterior.
Después de configurar la solicitud, utilice el método de envío para enviar la solicitud. Los parámetros pasados para enviar aquí están vacíos. Si hay otros parámetros para enviar, también se pueden pasar al método de envío.