AJAX no es un nuevo lenguaje de programación, sino un nuevo enfoque que utiliza los estándares existentes. AJAX puede intercambiar datos con el servidor sin recargar la página completa. Este método de interacción asincrónica permite a los usuarios obtener nuevos datos sin tener que actualizar la página después de hacer clic.
Objeto xmlhttprequest
El núcleo de AJAX es el objeto xmlhttprequest (xhr). XHR proporciona una interfaz para enviar solicitudes al servidor y resolver las respuestas del servidor. Capacidad para obtener nuevos datos del servidor de manera asincrónica.
Crear objetos en el navegador (solo admite IE7 y superior):
var xhr = new xmlhttprequest ();
Cómo usar XHR
Lo primero que debe introducir es el método Open (). Recibe 3 parámetros:
• El tipo de solicitud que se enviará (publicar, obtener, etc.)
• URL solicitada
• Valor de Bolean que indica si la solicitud se envía de forma asincrónica
Llamar al ejemplo de Open ():
xhr.open ("get", "index.jsp", falso);
Obtenga solicitud de index.jsp. La URL es relativa a la página actual donde se ejecuta el código; Llamar al método Open () en realidad no envía la solicitud, solo inicia una solicitud de envío.
Llamar enviar () para enviar la solicitud:
XHR.SEND (NULL);
enviar () recibe un parámetro, es decir, los datos que se enviarán como el cuerpo solicitante. Si no se requiere que los datos se envíen a través del cuerpo de solicitud, NULL debe aprobarse.
Los datos correspondientes se llenarán con las propiedades relevantes del objeto XHR:
• ResponseText: el texto devuelto como el cuerpo de respuesta
• Respuestaxml: el tipo de contenido como respuesta es "Texto/XML" o "Aplicación/XML"
• Estado: el estado HTTP de la respuesta
• Estatustext: descripción del estado HTTP
Después de recibir la respuesta, primero verifique el atributo de estado y confirme que la respuesta ha regresado, generalmente 200 se usan como un signo de éxito. El código de estado 304 indica que el recurso no se ha modificado y la versión en caché en el navegador se puede usar directamente.
Para recibir una respuesta adecuada, se deben detectar dos códigos de estado de la siguiente manera:
xhr.open ("get", "index.jsp", false); xhr.send (null); if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {alerta (xhr.Responsetext);} else {"(" alerta no fue desagradable: " + XHR.Al detectar la propiedad ReadyState, se puede determinar la fase activa actual del proceso de solicitud/respuesta.
• 0: no inicializado. El método Open () no se llamó
• 1: comenzar. Se ha llamado al método Open (), y no se ha llamado al método Send ().
• 2: enviar. Se ha llamado al método send (), no se recibió ninguna respuesta
• 3: recibir. Se han recibido algunos datos
• 4: completado. Todos los datos han sido recibidos y pueden usarse en el lado del cliente
Cuando cambia el valor de la propiedad ReadyState, se activará un evento ReadyStateChange. Para garantizar la compatibilidad del navegador, especifique el controlador de eventos OnreadyStateChange antes de llamar a Open ().
var xhr = new xmlhttprequest (); xhr.onreadyStateChange = function () {if (xhr.readyState == 4) {if ((xhr.Status> = 200 && xhr.Status <300) || Xhr.status == 304) {(xhr.responstetext);} ("(" Solicitando ("(" Solicitando exitosos ("alerta);" xhr.status);}}}; xhr.open ("get", "index.jsp", true); xhr.send (null);La solicitud asíncrona se puede cancelar antes de recibir la respuesta:
xhr.abort ();
Información del encabezado HTTP
Los objetos XHR proporcionan métodos para manipular los encabezados de solicitud y responder a la información del encabezado.
De forma predeterminada, al enviar una solicitud XHR, también se enviará la siguiente información del encabezado.
• Aceptar: el tipo de contenido que el navegador puede manejar
• Aceptar-Charset: el conjunto de caracteres que puede mostrar el navegador
• Aceptar en codificación: codificación comprimida que el navegador puede manejar
• Aceptar el idioma: el idioma actualmente establecido por el navegador
• Conexión: el tipo de conexión entre el navegador y el servidor
• Cookie: cualquier cookies establecida en la página actual
• Host: el dominio donde se encuentra la página donde se emitió la solicitud
• Referente: URL de la página que emitió la solicitud
• User-Aent: la cadena del agente de usuario del navegador
Use SetRequestHeader () para establecer la información de encabezado de solicitud personalizada. Debe llamar al método Open () después de llamarlo y antes de llamar a Send ()
setRequestHeader ()::
xhr.open ("get", "index.jsp", true); xhr.setRequestHeader ("myheader", "myValue"); xhr.send (null);Llame a getResponseHeader () y pase en el nombre del campo para obtener la información del encabezado de respuesta correspondiente. getAllResponseHeader () obtiene una cadena larga que contiene toda la información del encabezado.
var myheader = xhr.getResponseHeader ("myheader"); var the thousheaders = xhr.getallResponseHeader ();Obtener solicitud
Get se utiliza para consultar el servidor para cierta información. Puede agregar los parámetros de cadena de consulta al final de la URL. El nombre y el valor de cada parámetro en la cadena de consulta deben estar codificados utilizando codeuricomponent ()::
xhr.open ("get", "login.jsp? name1 = value1 & name2 = value2", falso); AddUrlParam () recibe tres parámetros: la URL del parámetro a agregar, el nombre del parámetro y el valor del parámetro. var url = "Login.jsp"; // Agregar parámetro url = addUrlParam (url, "nombre de usuario", "xxyh"); url = addUrlParam (url, "contraseña", "xxyh123"); // inicializar la solicitud xhr.open ("get", url, falso);Solicitud postal
La solicitud de publicación se utiliza para enviar datos al servidor que deben guardarse. El cuerpo de una solicitud de publicación puede contener muchos datos, y el formato es ilimitado.
Solicitud de inicialización:
xhr.open ("post", "login.jsp", true); Primero establezca la información del encabezado de tipo de contenido en Application/X-WWW-Form-URLEncoded, y luego cree un formato de cadena. Si necesita serializar los datos del formulario en la página y luego enviarlos al servidor a través de XHR, puede usar la función Serialize () para crear esta cadena: xhr.open ("get", "login.jsp", false); xhr.setRequestHeader ("Content-type", "Aplicación/X-WWW-Form-Urlencoded"); document.getElementById ("User-Info"); xhr.send (serialize (form));Lo anterior es la comprensión profunda de Ajax en JavaScript presentada por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!