Ajax y cómo funciona
AJAX es una tecnología que intercambia datos con servidores sin actualizar páginas web. Fue utilizado por primera vez por Google en Google Maps y fue rápidamente popular.
Ajax no puede ser intermedio. Si necesita intermedio cruzado, puede usar document.domain = 'A.com'; o use un proxy de servidor a proxy xmlhttprequest archivo.
AJAX se basa en los estándares de Internet existentes y los utiliza en combinación:
Objeto xmlhttprequest (intercambia datos asíncronos con el servidor)
JavaScript/DOM (pantalla de información/interacción)
CSS (Defina estilos de datos)
XML (como formato para convertir datos)
Crear objeto xmlhttprequest
Todos los navegadores modernos (IE7+, Firefox, Chrome, Safari y Opera) tienen objetos XMLHTTPRequest incorporados.
Crea un objeto AJAX:
// ie6 o superior
var oAJax = new XMLHTTPREQUEST ();
// ie6
var oajax = new ActiveXObject ("Microsoft.xmlhttp")
Conectarse al servidor
oajax.open (método, url, es asíncrono)
Todos sabemos que Ajax, a saber, "JavaScript y XML asíncrono" (JavaScript y XML asíncrono), se refiere a una tecnología de desarrollo web que crea aplicaciones web interactivas. Por lo tanto, Ajax nace para que funcione en modo asíncrono (asíncrono es verdadero, falso sincrónico)
Sincrónico y asincrónico
La sincronización se refiere al método de comunicación en el que el remitente envía datos y espera a que el receptor envíe una respuesta antes de enviar el siguiente paquete de datos.
Asynchronous se refiere al método de comunicación en el que el remitente envía datos sin esperar a que el receptor envíe una respuesta y luego envía el siguiente paquete de datos.
(Para decirlo en pocas palabras: la sincronización solo se puede hacer una cosa una por una, mientras que asíncrono se puede hacer varias cosas al mismo tiempo)
Enviar solicitud Enviar ()
La copia del código es la siguiente:
<script type = "text/javaScript">
función getDoc () {
var xmlhttp;
if (window.xmlhttprequest) {
xmlhttp = new xmlhttprequest ();
}
demás{
xmlhttp = new ActiveXObject ("Microsoft.xmlhttp"); // para IE6
}
xmlhttp.onreadyStateChange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById ("myid"). innerhtml = xmlhttp.ResponSetext;
}
}
xmlhttp.open ("get", index.php, true);
xmlhttp.send ();
}
</script>
</ablo>
<Body>
<botón tipo = "botón" onClick = "getDoc ()"> Solicitar datos </botón>
</body>
Obtener o publicar?
En comparación con POST, GET es más simple y más rápido y está disponible en la mayoría de los casos.
Sin embargo, use la solicitud de publicación en los siguientes casos:
No se puede usar archivos en caché (actualizar archivos o bases de datos en el servidor)
Enviar grandes cantidades de datos al servidor (la publicación no tiene límite de datos)
La publicación es más estable y confiable que obtener al enviar la entrada del usuario que contiene caracteres desconocidos
Recibir información de devolución
oajax.onreadyStateChange = function () {// controlador de eventos que se llamará cuando cambia el estado de la solicitud cambia
alerta (oajax.readyState);
}
Siempre que cambie el valor de la propiedad ReadyState, se activará un evento ReadyStateChange. Este evento se puede utilizar para detectar el valor de ReadyState después de cada cambio de estado. Por lo general, solo estamos interesados en la etapa en la que el valor de ReadyState es 4, porque todos los datos están listos en este momento, sin embargo, el controlador de eventos OnreadyStateChange debe especificarse antes de llamar a Open () para garantizar la compatibilidad del navegador cruzado. Echemos un vistazo a un ejemplo:
La copia del código es la siguiente:
var xhr = createExhr ();
xhr.OnreadyStateChange = function () {
if (xhr.readyState == 4) {
if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {
alerta (xhr.statusText);
} demás {
alerta ("La solicitud no tuvo éxito:" + xhr.status);
}
}
};
xhr.open ("Get", "Ejemplo.txt", true);
XHR.SEND (NULL);
Objetos XHR
Cuando un objeto XHR envía una solicitud HTTP al servidor, pasa por varios estados hasta que se procesa la solicitud y luego recibe una respuesta. ReadyState es la propiedad estatal de la solicitud XHR, que tiene 5 valores de propiedad:
0 (no inicializado) El método Open () aún no se ha llamado
1 (cargar) se ha llamado al método send () y la solicitud se está enviando
2 (la carga se completa) El método send () se ha completado y todo el contenido de respuesta se ha recibido
3 (análisis) El contenido de respuesta se está analizando
4 (Completo) El análisis de contenido de respuesta se completa y puede ser utilizado por el cliente.
estado
El atributo de estado representa el código de estado de respuesta devuelto desde el servidor. Por ejemplo: 200 significa éxito, 404 significa no encontrado.
Encabezado de 1 palabra: mensaje. Este tipo de código de estado significa que la solicitud ha sido aceptada y debe procesarse.
Cabeza de 2 palabras: éxito. Este tipo de código de estado significa que la solicitud ha sido recibida, entendida y aceptada por el servidor.
Encabezado de 3 palabras: redirección. Este tipo de código de estado significa que el cliente exige que el cliente complete la solicitud.
Encabezado de 4 caracteres: error del cliente. Este tipo de código de estado significa que el cliente puede parecer un error, lo que dificulta el procesamiento del servidor.
Encabezado de 5 palabras: error del servidor. Este tipo de código de estado representa un error o un estado anormal ocurrido durante el proceso de procesamiento de solicitudes del servidor
También adjunto: explicación detallada del código de estado HTTP
estatuste
StatusText es la información de texto devuelta en la respuesta y solo se puede usar si el valor ReadyState es 3 o 4. Cuando ReadyState es otro valor, la vista accede a la propiedad StatusText lanzará una excepción.
Método XHR
| método | describir |
|---|---|
| abortar() | Hace que la solicitud de ejecución actualmente se cancele |
| getAllResponseHeaders () | Devuelve un solo carácter | cadena que contiene los nombres y valores de todos los encabezados de respuesta |
| GetResponseHeader (nombre) | Devuelve el nombre y el valor especificado en el encabezado de respuesta |
| Abrir (método, url, async, nombre de usuario, pwd) | Establecer métodos HTTP (obtener o publicar), etc. |
| Enviar (contenido) | Emitir una solicitud con el contenido de sujeto especificado |
| setRequestheader (nombre, valor) | Establecer encabezado de solicitud con nombre y valor especificados |
La copia del código es la siguiente:
<script type = "text/javaScript">
var oAJax = oAJAX ();
alerta (oajax.readyState); // "0" aparece "
oajax.open ("get", "index.html", true);
ALERT (Oajax.readyState); // "1" aparece
oajax.send (nulo);
alerta (oajax.readyState); // 4 aparece en IE, mientras que Firefox es 2
// Puede escuchar a través del evento ReadyStateChange
Oajax = xhr ();
oajax.onreadyStateChange = function () {
alerta (Oajax.readyState); // El orden bajo Firefox es 1, 2, 3, 4, pero al final, habrá otro 1
// bajo IE es 1, 1, 3, 4
};
oajax.open ("get", "index.txt", true);
oajax.send (nulo);
</script>