1. Las principales razones para usar Ajax
1. Lograr una mejor experiencia de usuario a través de aplicaciones Ajax apropiadas
2. Transferir parte del trabajo anterior cargado por el servidor al cliente, lo que beneficia la potencia de procesamiento inactivo del cliente y reduce el servidor; y la carga de ancho de banda, logrando así el propósito de ahorrar el espacio del ISP y los costos de alquiler de ancho de banda.
2. Cita
Jesse James Garrett, el primero en proponer el concepto de Ajax, cree que Ajax es la abreviatura de JavaScript asincrónico y XML. Ajax no es un nuevo lenguaje o tecnología. En realidad, son varias tecnologías combinadas de cierta manera para desempeñar sus respectivos roles en una colaboración común. Incluye:
· Uso de XHTML y CSS para estandarizar la presentación;
· Utilizar DOM para realizar visualización e interacción dinámicas;
·Utilice XML y XSLT para el intercambio y procesamiento de datos;
·Utilice XMLHttpRequest para la lectura de datos asincrónica;
·Finalmente use JavaScript para vincular y procesar todos los datos.
El principio de funcionamiento de Ajax es equivalente a agregar una capa intermedia para realizar operaciones de usuario de forma asincrónica; y respuestas del servidor asincrónicas. No todas las solicitudes de los usuarios se envían al servidor. Parte de la verificación y el procesamiento de datos se dejan en manos del propio motor Ajax. Solo cuando se determina que es necesario leer nuevos datos del servidor, el motor Ajax enviará la solicitud al servidor. en su nombre.
3. Descripción general
Aunque Garrent enumeró 7 tecnologías constituyentes de Ajax, personalmente creo que el núcleo del llamado Ajax es solo JavaScript, XMLHTTPRequest y DOM. Si el formato de datos utilizado es XML, también se puede agregar XML (Ajax comienza desde el lado del servidor). los datos pueden estar en formato XML u otros formatos como texto).
En el método de interacción anterior, el usuario activa una solicitud HTTP al servidor, y el servidor la procesa y luego devuelve una nueva página HTHL al cliente. Siempre que el servidor procesa una solicitud enviada por el cliente, el cliente solo puede esperar inactivo. , e incluso si es solo una pequeña interacción y solo necesita obtener un simple dato del servidor, se debe devolver una página HTML completa y el usuario tiene que perder tiempo y ancho de banda para volver a leer la página completa cada vez. .
Después de usar Ajax, los usuarios sienten que casi todas las operaciones responderán rápidamente sin esperar a que se recargue la página (pantalla blanca).
1. XMLHTTPRequest
Una de las características más importantes de Ajax es que puede transmitir o leer y escribir datos en el servidor sin actualizar la página (también conocido como actualizar la página sin actualizar). Esta característica se beneficia principalmente del objeto XMLHTTPRequest. De esta manera, la aplicación de escritorio solo puede intercambiar datos con el servidor sin tener que actualizar la interfaz cada vez o enviar el trabajo de procesamiento de datos al servidor cada vez. Esto no solo reduce la carga en el servidor sino que también acelera el tiempo de procesamiento. Velocidad de respuesta y reducción del tiempo de espera del usuario.
Microsoft fue el primero en aplicar XMLHTTP. IE (IE5 y superior) amplía sus funciones al permitir a los desarrolladores utilizar componentes XMLHTTP ActiveX dentro de las páginas web. Los desarrolladores pueden transferir o recuperar datos directamente del servidor sin tener que navegar desde la página web actual. . Esta característica es importante porque ayuda a reducir las molestias de las conexiones sin estado y también puede aumentar la velocidad del proceso al eliminar la necesidad de descargar HTML redundante. Mozilla (Mozilla 1.0 y superiores y NetScape 7 y superiores) respondió creando su propia clase de proxy XML heredada: la clase XMLHttpRequest. Konqueror (y Safari v1.2, también un navegador basado en KHTML) también soporta el objeto XMLHttpRequest, y Opera también soportará el objeto XMLHttpRequest en su versión v7.6x+ y posteriores. En su mayor parte, el objeto XMLHttpRequest es muy similar al componente XMLHTTP y los métodos y propiedades son similares, excepto que una pequeña cantidad de propiedades no son compatibles.
Aplicación de XMLHttpRequest:
·Aplicación del objeto XMLHttpRequest en JS
var xmlhttp = nuevo XMLHttpRequest();
·Aplicación del componente XMLHTTP de Microsoft en JS
var xmlhttp = nuevo ActiveXObject(Microsoft.XMLHTTP
var xmlhttp = nuevo ActiveXObject(Msxml2.XMLHTTP));
Método de objeto XMLHttpRequest
/**
* Creación de instancias de XMLHttpRequest entre navegadores
*/
if (typeof XMLHttpRequest == 'indefinido') {
XMLHttpRequest = function () {
var msxmls = ['MSXML3', 'MSXML2', 'Microsoft']
para ( var i=0; i < msxmls.length; i++) {
intentar {
return new ActiveXObject(msxmls[i]+'.XMLHTTP')
} catch (e) { }
}
throw new Error("¡No hay ningún componente XML instalado! ")
}
}
function createXMLHttpRequest() {
try {
// Intenta crearlo "al estilo Mozilla"
if (window.XMLHttpRequest) {
return new XMLHttpRequest()
}
// Supongo que no, ahora al estilo IE
if (window.ActiveXObject) {
devolvernuevo
ActiveXObject(getXMLPrefix() + "
.XmlHttp
"
)
;
Método de objeto XMLHttpRequest
| descripción | del | método
| abort() | aborta la solicitud actual |
| getAllResponseHeaders() | devuelve los encabezados completos como una cadena |
| getResponseHeader("headerLabel") | devuelve una única etiqueta de encabezado como una cadena |
| open("method","URL"[,asyncFlag[ , "userName"[, "contraseña"]]]) | Establezca la URL de destino, el método y otros parámetros de la solicitud pendiente |
| enviar(contenido) | envíe la solicitud |
| setRequestHeader("label", "value") | establezca el encabezado y envíelo juntos con la solicitud |
XMLHttpRequest objeto atributo
| descripción | del atributo |
| readyState | |
| para | el cambio de estado |
| Estado del objeto (entero): 0 = no inicializado 1 = Lectura 2 = Leer 3 = Interactuando 4 = Complete | |
| la versión de texto de los datos devueltos por el proceso del servidor ResponseText | . |
| El objeto de documento XML compatible con DOM devuelto por el | proceso del servidorResponseXML |
| , | como por ejemplo: 404 = "Archivo no encontrado", 200 =. |
| "éxito" | |
| devuelto por el servidor | statusText | . Información de texto
2. JavaScript
JavaScript es un lenguaje de programación ampliamente utilizado en los navegadores. En el pasado ha sido menospreciado como un mal lenguaje (de hecho, es aburrido de usar) y se usa a menudo para algunos. con fines llamativos y bromas o validación de formularios tediosos. Pero el hecho es que es un lenguaje de programación real, tiene sus propios estándares y es ampliamente compatible con varios navegadores.
3.
Modelo de objetos de documento DOM.
DOM es un conjunto de API para archivos HTML y XML. Proporciona una representación estructural del archivo, lo que le permite cambiar su contenido y visibilidad. Su esencia es establecer un puente de comunicación entre las páginas web y los Script o lenguajes de programación.
Todas las propiedades, métodos y eventos que los desarrolladores WEB pueden operar y crear archivos están representados por objetos (por ejemplo, el documento representa el objeto "archivo en sí", el objeto de tabla representa el objeto de tabla HTML, etc.). La mayoría de los navegadores actuales pueden acceder a estos objetos desde Script.
Una página web creada con HTML o XHTML también puede considerarse como un conjunto de datos estructurados. Estos datos están encerrados en DOM (Document Object Model) proporciona soporte para leer y escribir varios objetos en la página web.
4. El lenguaje de marcado extensible XML
El motor Ajax mencionado por Jesse James Garrett es en realidad una aplicación JavaScript relativamente compleja que se utiliza para procesar solicitudes de usuarios, leer y escribir servidores y cambiar el contenido DOM.
El motor Ajax de JavaScript lee la información y reescribe el DOM de forma interactiva. Esto permite que las páginas web se reconstruyan sin problemas, es decir, cambiar el contenido de la página después de que se haya descargado. Esto es lo que hemos estado usando ampliamente con JavaScript y el método DOM. pero para hacer que una página web sea verdaderamente dinámica, no solo se requiere interacción interna, sino también adquisición de datos desde el exterior. En el pasado, permitíamos a los usuarios ingresar datos y cambiar el contenido de la página web a través del DOM, pero ahora, XMLHTTPRequest lo permite. Nos permite leer y escribir datos en el servidor sin recargar la página, minimizando la entrada del usuario.
La comunicación de red basada en XML no es nueva. De hecho, tanto FLASH como JAVA Applet han funcionado bien. Ahora este tipo de interacción enriquecida también está disponible en páginas web. Se basa en tecnologías estandarizadas y ampliamente compatibles y no requiere complementos. o complementos. Descargue el subprograma.
Ajax es una transformación de las aplicaciones WEB tradicionales. En el pasado, el servidor generaba una página HTML cada vez y la devolvía al cliente (navegador). En la mayoría de los sitios web, al menos el 90% de muchas páginas son iguales, como: estructura, formato, encabezado, pie de página, anuncios, etc. La única diferencia es una pequeña parte del contenido, pero cada vez el servidor generará todo. la página para el cliente es un desperdicio invisible, ya sea el tiempo del usuario, el ancho de banda, el consumo de CPU o el ancho de banda y el espacio alquilados por el ISP a un precio elevado. Si se calcula por páginas, solo unos pocos K o docenas de K pueden no ser impresionantes, pero para un ISP grande como SINA que genera millones de páginas todos los días, se puede decir que es una pérdida enorme. AJAX puede servir como capa intermedia entre el cliente y el servidor para manejar la solicitud del cliente y enviar la solicitud al servidor según sea necesario. Puede obtener lo que usa y cuánto usa, por lo que no habrá redundancia ni desperdicio de datos. , lo que reduce la cantidad total de datos descargados y no es necesario recargar todo el contenido al actualizar la página. En comparación con el método de recarga y procesamiento en segundo plano, el usuario solo puede actualizar. Se acorta el tiempo y se minimiza el desperdicio de recursos. Ajax, basado en tecnologías estandarizadas y ampliamente admitidas, no requiere complementos ni descargas, es beneficioso tanto para los usuarios como para los ISP.
Ajax separa la interfaz y la aplicación en la WEB (también se puede decir que separa los datos y la presentación). En el pasado, no había un límite claro entre los dos. La separación de datos y la presentación conduce a la división del trabajo y la cooperación. reduce la necesidad de que personal no técnico interactúe con la página. La modificación provoca errores en la aplicación WEB, mejora la eficiencia y es más adecuada para el sistema de publicación actual. También puede transferir parte del trabajo anterior cargado por el servidor al cliente, lo que beneficia la potencia de procesamiento inactivo del cliente.
4.
El surgimiento de la aplicación del concepto Ajax ha abierto el preludio de la era de la actualización de páginas sin actualización y tiene una tendencia a reemplazar el uso del envío de formularios en el desarrollo web tradicional para actualizar páginas web, lo que puede considerarse como un hito. Pero Ajax no es aplicable en todas partes y su ámbito de aplicación está determinado por sus características.
Un ejemplo de aplicación es una aplicación Ajax para menús en cascada.
Nuestro procesamiento anterior de menús en cascada fue el siguiente:
para evitar la recarga de la página causada por cada operación en el menú, no utilizamos el método de llamar al fondo cada vez, sino que leemos todos los datos del menú en cascada a la vez. Se saca y se escribe en la matriz, y luego se usa JavaScript para controlar la presentación de su subconjunto de elementos en función de las operaciones del usuario. Esto resuelve el problema de la velocidad de respuesta de la operación, no recarga la página y evita solicitudes frecuentes al servidor, pero si. el usuario no responde al menú Si opera o solo opera en parte del menú, parte de los datos leídos se convertirán en datos redundantes y desperdiciarán los recursos del usuario, especialmente cuando la estructura del menú es compleja y la cantidad de datos es grande ( por ejemplo, el menú tiene muchos niveles y cada nivel tiene cientos de elementos), esta desventaja es aún más prominente.
Si se aplica Ajax en este caso, el resultado mejorará:
al inicializar la página, solo leemos todos los datos del primer nivel y los mostramos. Cuando el usuario opera uno de los elementos del menú del primer nivel, el resultado será. se enviará al usuario a través de Ajax. El fondo solicita todos los datos del submenú de segundo nivel al que pertenece el elemento actual de primer nivel. Si continúa solicitando un elemento en el menú de segundo nivel ya presentado, solicita todos. los datos de todos los menús de tercer nivel correspondientes al elemento del menú de segundo nivel operado, etc. De esta manera, puede obtener todo lo que use y tanto como necesite. No habrá redundancia ni desperdicio. de datos, lo que reduce la cantidad total de descargas de datos y no es necesario recargar todo el contenido al actualizar la página, simplemente actualice la parte que necesita actualizarse. En comparación con el procesamiento y la recarga en segundo plano, acorta el tiempo de espera del usuario. y minimiza el desperdicio de recursos.
Además, debido a que Ajax puede llamar a datos externos, también puede realizar la función de agregación de datos (con la autorización correspondiente, por supuesto), como la versión BETA del lector RSS en línea que Microsoft acaba de lanzar el 15 de marzo. el desarrollo de algunas aplicaciones de datos abiertos, como algunas aplicaciones de búsqueda de libros novedosos que utilizan los datos de Amazon.
En resumen, Ajax es adecuado para aplicaciones WEB con muchas interacciones, lectura frecuente de datos y buena clasificación de datos.
1. Reducir la carga del servidor. Debido a que el concepto fundamental de Ajax es "obtener datos a pedido", puede reducir al máximo la carga causada por solicitudes redundantes y el impacto en el servidor.
2. Actualizar la página sin actualizar, reduciendo el tiempo de espera real y psicológico del usuario;
primero, "presione El modo "datos requeridos" reduce la cantidad real de datos leídos. Para dar una analogía muy vívida, si el método de sobrecarga es regresar al origen desde un punto final y luego a otro punto final, entonces Ajax se basa en un punto final llegar a otro punto final;
en segundo lugar, incluso si desea leer datos relativamente grandes, no es necesario tener una pantalla blanca como RELOAD, porque Ajax usa XMLHTTP para enviar solicitudes para obtener datos de respuesta del servidor, sin recargar el Utilice Javascript para operar el DOM y finalmente actualice la página, de modo que durante el proceso de lectura de datos, el usuario no se enfrente a una pantalla en blanco, sino al estado de la página original (o puede agregar un cuadro de mensaje CARGANDO para permitir que usuario entiende el estado del proceso de lectura de datos), sólo cuando se reciben todos los datos, se actualiza la parte correspondiente del contenido, y esta actualización también es instantánea y casi imperceptible para el usuario. En resumen, los usuarios son muy sensibles y pueden sentir su consideración por ellos. Aunque es poco probable que obtenga resultados inmediatos, poco a poco acumulará su dependencia del sitio web en el corazón de los usuarios.
3. Mejor experiencia de usuario;
4. También puede transferir parte del trabajo anterior cargado por el servidor al cliente, que puede ser utilizado por la potencia de procesamiento inactiva del cliente, reduciendo la carga sobre el servidor y el ancho de banda, y ahorrando espacio y ancho de banda; costos de alquiler;
5, Ajax puede llamar a datos externos;
6. Se basa en tecnología estandarizada y ampliamente compatible, y no requiere complementos ni subprogramas descargados
7. Ajax separa la interfaz y la aplicación en la WEB (también puede ser); (se dice separar datos y presentación);
8. Es una situación beneficiosa para los usuarios y los ISP.
6. Problemas con Ajax
1. Algunos dispositivos portátiles (como teléfonos móviles, PDA, etc.) aún no son compatibles con Ajax
2. Los motores Ajax creados con JavaScript, la compatibilidad con JavaScript y los DeBugs son dolores de cabeza
3. Ajax no se actualiza; recargar, debido a que los cambios de la página no son tan obvios como la recarga de actualización, es fácil causar problemas a los usuarios: los usuarios no están seguros de si los datos actuales son nuevos o se han actualizado. Las soluciones incluyen: Avisos de ubicación relevantes y actualización de datos; las áreas están diseñadas para ser más obvias y se solicita a los usuarios después de las actualizaciones de datos, etc.
4. El soporte para transmisión de medios no es tan bueno como FLASH y Java Applet;