Solicitud de Ajax
A principios y mediados de los años 90, la mayoría de los sitios web se basaban en páginas HTML completas. Cada acción del usuario requería la carga de una nueva página completa desde el servidor. Este proceso era ineficaz, como se reflejaba en la experiencia del usuario: todo el contenido de la página desaparecía, y luego aparecía la nueva página. Cada vez que el navegador recargaba una página por un cambio parcial, había que volver a enviar todo el contenido, aunque sólo hubiera cambiado parte de la información. Esto suponía una carga adicional para el servidor y convertía el ancho de banda en un factor limitante del rendimiento.
En 1996, Internet Explorer introdujo la etiqueta iframe, que, al igual que el elemento object, puede cargar u obtener contenido de forma asíncrona. En 1998, el equipo de Microsoft Outlook Web Access desarrolló el concepto detrás del objeto de scripting XMLHttpRequest[4], que apareció como XMLHTTP en la segunda versión de la biblioteca MSXML,[4][5] que se incluyó en Internet Explorer 5.0 en marzo de 1999[6].
El término Ajax ha llegado a representar un amplio grupo de tecnologías web que pueden utilizarse para implementar una aplicación web que se comunica con un servidor en segundo plano, sin interferir con el estado actual de la página. En el artículo que acuñó el término Ajax,[1][3] Jesse James Garrett explicó que se incorporan las siguientes tecnologías:
Llamada Ajax jquery
Los scripts del lado del cliente se ejecutan en el lado del cliente, dentro del navegador web del usuario. Pueden ser leídos por el usuario, y se encuentran en el código fuente de las páginas web que los utilizan, contenidos entre las etiquetas <script> y </script>. A veces los scripts están contenidos en un archivo externo, al igual que el CSS. En estos casos la etiqueta <script> incluye un atributo src que enlaza con el archivo de script.
A lo largo de este curso, has tenido que volver en varias ocasiones a cada una de las páginas HTML de tu portafolio para añadir nuevo contenido. Empezaste con una plantilla básica para cada página, pero más tarde tuviste que volver para añadir el atributo id y class a algunos de los elementos, luego tuviste que volver de nuevo para añadir un enlace a tu hoja de estilo externa, luego una vez más para añadir un enlace a tu imagen favicon, y de nuevo para añadir tu banner a la parte superior de la página. Si esto te parece frustrante e ineficiente, ¡imagina cómo te sentirías si tuvieras que hacer eso con un sitio web más grande con cientos o miles de páginas web!
Aquí es donde el scripting del lado del servidor puede hacernos la vida mucho más fácil como desarrolladores web. Por ejemplo, si nuestro sitio web se está ejecutando en un servidor web que soporta PHP, podríamos haber utilizado una plantilla HTML básica que se parecía a esto (este es el ejemplo de la página de inicio, index.html):
Puesto Ajax
El Ajax Control Toolkit es un conjunto de controles creados por Microsoft que se integran en Visual Studio y pueden ser arrastrados y soltados en formularios web al igual que los controles html y de servidor. Estos controles están pensados para ser utilizados en las llamadas de retorno de Ajax. Sin embargo, también pueden utilizarse como controles normales de cliente o de servidor. Por ejemplo, Asp.Net no viene con los controles Tabs. Sin embargo, el Ajax Control Toolkit sí. El control Tabs puede hacer un postback al servidor al igual que los controles de servidor.
Ajax debería ser usado en cualquier parte de una aplicación web donde pequeñas cantidades de información puedan ser guardadas o recuperadas del servidor sin devolver las páginas completas. Un buen ejemplo de esto es la validación de datos en acciones de guardado. Otro ejemplo sería cambiar los valores de un cuadro de lista desplegable basado en otras entradas, como los cuadros de lista de estados y universidades. Cuando el usuario selecciona un estado, el cuadro de lista de universidades se repoblará con sólo las universidades de ese estado.
Otro gran ejemplo es cuando el cliente necesita guardar o recuperar los valores de la sesión del servidor, basándose en una preferencia del usuario como la altura, la anchura o la posición de un objeto. Al ajustar la anchura se podría hacer una llamada de retorno al servidor para establecer la variable de sesión para la nueva anchura. De este modo, cada vez que se actualice la página, el servidor podrá ajustar el ancho del objeto basándose en esta variable de sesión. De lo contrario, el objeto volvería a su anchura inicial por defecto.
Ajax jquery
¿Qué debe hacer esta función? Primero, la función necesita comprobar el estado de la petición. Si el estado tiene el valor de XMLHttpRequest.DONE (correspondiente a 4), eso significa que se recibió la respuesta completa del servidor y que está bien que se siga procesando.
A continuación, compruebe los códigos de estado de la respuesta HTTP. Los posibles códigos están listados en el W3C. En el siguiente ejemplo, diferenciamos entre una llamada AJAX exitosa y una no exitosa al comprobar un código de respuesta 200 OK.
Nota: Si no se establece la cabecera Cache-Control: no-cache, el navegador guardará la respuesta en la caché y no volverá a enviar la solicitud, lo que dificulta la depuración. También puede añadir un parámetro GET siempre diferente, como una marca de tiempo o un número aleatorio (ver saltarse la caché)
Nota: Si la variable httpRequest se utiliza globalmente, las funciones que compiten entre sí llamando a makeRequest() pueden sobrescribirse unas a otras, causando una condición de carrera. Declarar la variable httpRequest localmente a un cierre que contenga las funciones AJAX evita esto.