AJAX

Introducción a AJAX

Transcript

1. AJAX
2. Significa Javascript y XML Asíncrono y proporciona ejecución de código del lado del cliente mientras se mantiene comunicación asíncrona con el servidor
3. ¿Para qué nos sirve? Nos permite intercambio de datos con el servidor sin que la actividad de la página se detenga o se deba de recargar toda la página
4. A pesar de haber sido concebido para trabajar con datos en formato XML la popularidad de JSON hizo que AJAX también nos permitiera trabajar con este formato
5. Entendiendo AJAX: XMLHttpRequest XMLHttpRequest Es el objeto que permite la comunicación asíncrona entre el cliente y el servidor
6. Entendiendo AJAX: XMLHttpRequest Dependiendo del navegador, es la forma en que obtenemos la instancia: httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); httpRequest = new XMLHttpRequest(); Navegadores que permiten crear objetos ActiveX Navegadores que implementan la interfaz de manera nativa
7. Propiedades Independientemente de la forma usada para instanciar el objeto, este tiene las mismas propiedades
8. onreadystatechange Ejecuta la función asignada cada vez que el estado readyState del objeto ha cambiado peticion.onreadystatechange = muestraContenido; function muestraContenido(){ ... }
9. readystate Representa el estado actual del objeto 0 = uninitialize: open() no ha sido llamado 1 = loading: send() no ha sido llamado 2 = loaded: send() ha sido Llamado y el encabezado e Información de estatus ya está disponible 4 = complete: la comunicación ha terminado 3 = interactive: send() ha sido Llamado y el encabezado e Información de estatus ya está disponible
10. responseText Una versión en texto plano de los datos regresados por el servidor
11. responseXML Una versión ya instanciada en DOM de los datos enviados por el servidor
12. status y statusText El código de status que regresó el servidor: status como entero y statusText como cadena 200 = “OK” 404 = “NOT FOUND”
13. Métodos Los métodos del objeto XMLHttpRequest son los que nos permiten determinar el comportamiento según lo devuelto por el servidor
14. abort() Cancela la petición actual
15. getAllResponseHeaders() Devuelve las cabeceras HTTP como una cadena
16. getResponseHeader(hName) Devuelve el valor del header HTTP Especificado por hName
17. open() method,URL[,asynchronous flag[,username[,password]]] Prepara la petición asignando: method El método que usará la petición ya sea GET o POST URL El destinatario de la petición asynchronous flag Bandera opcional que determina si la petición se enviará asíncrona o síncronamente username Nombre de usuario opcional para pasarlo a la URL password Constraseña opcional para pasarlo a la URL
18. send([contents]) Envía la petición con [contents] (datos) opcionales
19. setRequestHeader(header, value) Añade un par ordenado header – value a la cabecera a enviar
20. ¿Dudas, preguntas o comentarios?
21. ¡Gracias!