Desarrollar fácilmente en cliente/servidor

AJAX

1. Petición simple

AJAX (Asynchronous JavaScript and XML) se utiliza para realizar una solicitud a un servidor, sin tener que volver a cargar la página HTML actual. Junto con la posibilidad de modificar dinámicamente una página HTML, esto convierte una página HTML en una aplicación real.

La petición puede ser sincrónica (o bloqueante) o asíncrona (la forma más común).

Para realizar una solicitud AJAX, necesita un objeto de clase XMLHttpRequest. En Internet Explorer antes de la versión 8, se tenía que usar un ActiveX (la primera forma de AJAX en realidad).

Por razones de seguridad, la primera versión de XMLHttpRequest solo permite el acceso al servidor original de la página. Esto a veces es poco práctico (obligación de realizar enrutamiento a otros servidores), por lo que una segunda versión permite el uso de diferentes dominios, pero requiere permisos (CORS para Cross Origin http RequeSt).

Para poder interceptar la respuesta, tiene disponible la propiedad onreadystatechange. El propósito de esta propiedad es invocar la función de usuario proporcionada, cuando se devuelve parte o la totalidad de la respuesta del servidor. Se utiliza una propiedad readyState adicional para conocer el progreso de la recepción de la respuesta. Una propiedad status se utiliza para averiguar el código de respuesta del servidor HTTP, útil en caso de error (5XX, por ejemplo, para un error interno).

Cuando el objeto de solicitud está listo, solo falta ejecutar la solicitud por medio del método open, usando como argumentos el tipo de solicitud (GET o POST), la URL y un booleano para saber si su solicitud es bloqueante (sincrónica) o no (generalmente no lo será). Por último, para el envío final, usará el método send con los posibles parámetro como argumentos. Dado que se trata de una solicitud HTTP, la codificación de los parámetros es la misma que la que se pone en una URL, es decir, como clave=valor separada por &. Si sus valores pueden contener caracteres reservados como &, entonces tiene que hacer una codificación con la función encodeURIComponent.

Para este primer ejemplo, creamos un archivo ajax.dat que contiene un texto: "Mis datos Ajax"; la codificación...

Carga dinámica de script

1. Primera implementación

Como hemos visto hasta ahora, la etiqueta script se usa para cargar un script JavaScript externo. Esta opción puede ser utilizada para emular una petición a un servidor, sin estar limitada por el tipo de acceso, al contrario que AJAX, que por defecto se limita a un dominio. Por lo tanto, el servidor no generará un formato JSON como respuesta en este caso, sino un formato JavaScript.

Para que la solicitud funcione, debe crear dinámicamente la petición de carga. Para hacer esto, buscamos la etiqueta head en la página, luego creamos una nueva etiqueta script antes de agregarla a la etiqueta de encabezado. Gracias al atributo onload, se nos notificará cuando se haya realizado la carga del script (y por tanto la respuesta del servidor). Este tipo de operación es la que está presente con la carga de módulos AMD. Tenga en cuenta que nada prohíbe también insertar la etiqueta script en el cuerpo de la etiqueta body.

Como solicitamos un script mediante una URL, estamos limitados a solicitudes de tipo GET.

Para la prueba, diseñamos un archivo que emula la respuesta del servidor script1.js.

var autor = { 
    nombre : "alexandre", 
    apellido : "brillant" 
}; 
 
autor.libros = [ 
    { 
        titulo : "Ruby", 
        subTitulo : "Los fundamentos" 
    } 
];

Para que la distinción con el formato JSON sea claramente visible, hemos dividido la construcción del objeto autor en dos pasos.

Este es el código de la carga dinámica del script:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Carga dinámica de script</title> 
</head> 
 
<script type="text/javascript"> 
    function mostrar( autor ) { 
        var e = document.getElementById( "autor" ); 
        e.innerHTML += "Autor: " + autor.nombre  + " " +  
autor.apellido; 
        e.innerHTML...