En este mini-tutorial se explica toda la infraestructura que hace falta  para que desde un fichero html puedas ver el resultado en un navegador web.

Una web está formada por texto, imágenes, información almacenada en bases de datos, etc.

Un programador genera ficheros desde herramientas de programación. En este turorial se responde a cómo y con qué infraestructura se necesita para su visualización.

Introducción a la arquitectura web

Para que el usuario quiera ver una página web debe hacer uso de un  navegador. Este navegador lanza peticiones HTTP  que por debajo tiene TCP y de la misma forma accederá al servidor.

Arquitectura web

¿Cómo funcionan las peticiones HTTP?

¿Qué es HTTP 1.0?

Cuando lanzas una petición por HTTP mandamos un paquete de información y nos devuelve otro paquete de información.

Los métodos de petición más extendidos son GET y POST.

La petición GET es a través de URL mientras que la petición POST es encapsulada por HTTP.

¿Qué es el protocolo HTTP 1.1? ¿En qué se diferencia con HTTP 1.0?

La gran diferencia de HTTP 1.0 y HTTP 1.1 es que con esta última versión se puede hacer peticiones a otros servidores que escapen a nuestra configuración de Apache. Por ejemplo si en nuestra página web tenemos una foto sacada de otra página web, la petición GET sabe a qué servidor hacer la petición y redirigirla.

El paquete HTTP nos puede devolver un error. Los más comunes que veremos son 404 (Page not fount) y 301. El sitio ha sido redireccionado.

En el mismo enlace de la wikipedia aparece el listado completo de códigos que nos puede devolver HTTP.

¿Qué es un servidor web?

¡Ojo! Servidor web no es lo mismo que servicio web. (web service). Veamos las diferencias.

Un Servicio web o web service es una tecnología que utiliza un conjunto de protocolos y estándares que sirven para intercambiar información entre aplicaciones. Un ejemplo: si yo quiero saber el tiempo que hace en Zaragoza, me puedo valer de un Web Service de otro programador para obtener dicha información.  En este post lo explican muy bien.

Un servidor web o servidor HTTP es un programa informático que procesa una petición en el lado del servidor.  El código que recibe el cliente es compilado y ejecutado en un navegador web. Por ejemplo un Servidor web Apache.

Si se está liando más es necesario  dar un paso a atrás en comprender qué es un Servidor.  Un servidor es un nodo que ofrece servicios para otros clientes en una red. Ejemplo de servidores: servidor web, servidor de bases de datos, servidor de fax, servidor de correo, etc.

¿Qué hace un servidor HTTP Apache?

Si montamos la arquitectura servidor HTTP Apache esta formado por módulos que yo activo o desactivo como puede ser el módulo php, rewrite, etc (véase todos los módulos aquí) y por una configuración para que sepa qué hacer con cada tipo de fichero. Por ejemplo, si Apache recibe una petición hola.phg -> es un nime/types y sé que tengo que devolver el .png con la imagen.

Mime type es un protocolo para saber interpretar un objeto o un archivo de una forma o de otra.

Un ejemplo de módulo: en Apache podemos configurar mod_rewrite. Es un módulo que sirve para personalizar nuestras URL de peticiones. Para saber más aquí hay una guía básica.  Aquí puedes saber si lo tienes activado o no.

¿Qué es mod_rewrite?

Por ejemplo que si todas nuestras peticiones vienen GET /hola/mundo podemos crear un patrón de redirección para que lo interprete como esta petición GET/ index.php?/hola/mundo

¿Para qué sirve mod_rewrite?

De esta forma evitamos que si alguien pone en nuestra web index.php?/hola/mundo no acceda a nuestro contenido de forma arbitraria.

Ejemplo genérico

Ahora. Tenemos nuestra página web. ¿Qué pasa cuando lanzamos la petición www.google.com?

Le pediremos a apache que interprete nuestro PHP y nos servirá por separado los mime types text/html, image/pneg, text/javascript.

De hecho. Siguiendo la imagen de debuger de Firebug podemos diferenciar las peticiones HTML, CSS, JS, XHR, Imágenes, etc que está pidiendo al servidor para que me las muestre en mi local.

En la siguiente imagen vemos cómo lanza la petición para obtener el logo de google.

También estamos descargando ficheros javascript porque javascript se ejecuta en nuestro navegador. Y en un momento determinado de nuestra navegación de la página web, se ejecutará.

¿Qué necesita nuestro navegador?

Nuestro navegador por tanto necesitará al menos:

• Intérprete de JS.

• Webkit: Renderiza el HTML

El servidor web también nos devuelve una estructura DOM. La podemos observar también desde el debuger.

¿Pero qué es DOM?

Es una estructura que se acaba de actualizar con tu petición. Obtiene todos los elementos identificados y estructurados en forma de árbol.

¿Para qué sirve un DOM?

¿Qué utilidad podemos sacarle al DOM? Poder acceder a cualquier elemento de esta estructura en un momento asíncrono. Si por ejemplo pulsamos un botón y queremos que ese botón cambie de color, no hace falta refrescar toda la página. Podemos acceder al botón por medio del identificador y cambiar sus propiedades del HTML y así no hace falta refrescar toda la página.

¿Cómo modifico un elemento del DOM?

Por medio de Javascript .

Siguiendo con el ejemplo de cambiar las propiedades de un botón sin tener que refrescar el código, podemos llamar una función de nuestro javascript que nos hemos traído desde el servidor web  y cambiar las propiedades.

<script type="text/javascript">// <![CDATA[
function bgChange(bg)
{
document.body.style.background=bg;
}
// ]]>

<h2>Change background color</h2>
Mouse over the squares!
<table style="width: 300; height: 100;">
<tbody>
<tr>
<td style="background-color: khaki;" onmouseover="bgChange(this.style.backgroundColor)" onmouseout="bgChange('transparent')"></td>
<td style="background-color: palegreen;" onmouseover="bgChange(this.style.backgroundColor)" onmouseout="bgChange('transparent')"></td>
<td style="background-color: silver;" onmouseover="bgChange(this.style.backgroundColor)" onmouseout="bgChange('transparent')"></td>
</tr>
</tbody>
</table>

Complicando las cosas.

¿Qué pasa si queremos obtener los datos del usuario?

Los datos del usuario están en una base de datos. Es decir, estos datos están en servidor y los queremos traer hasta nuestro navegador.

Por medio de AJAX obtendremos los datos del servidor.

Si esta vez queremos que el botón al pulsarlo nos traiga un listado de países, es necesario AJAX.

AJAX es una técnica no un lenguaje. Extraigo la definición de la wikipedia:

“AJAX, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, lo que significa aumentar la interactividad, velocidad y usabilidad en las aplicaciones

Ajax es una tecnología asíncrona, en el sentido de que los datos adicionales se solicitan al servidor y se cargan en segundo plano sin interferir con la visualización ni el comportamiento de la página. JavaScript es el lenguaje interpretado (scripting language) en el que normalmente se efectúan las funciones de llamada de Ajax mientras que el acceso a los datos se realiza mediante XMLHttpRequest, objeto disponible en los navegadores actuales. En cualquier caso, no es necesario que el contenido asíncrono esté formateado en XML.

Ajax es una técnica válida para múltiples plataformas y utilizable en muchos sistemas operativos y navegadores dado que está basado en estándares abiertos como JavaScript y Document Object Model (DOM).” Wikipedia.

Con Ajax también modificados el contenido del DOM sin actualizar la página

<script type="text/javascript">// <![CDATA[
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
// ]]></script></pre>
<div id="myDiv">
<h2>Let AJAX change this text</h2>
</div>
<pre>
<button onclick="loadXMLDoc()" type="button">Change Content</button>

De esta forma desde nuestra página web, lanzamos una función ajax donde le indicamos a que módulo, función y parámetros pasarle para que nos devuelva nuestro listado de la base de datos. Accederá a la función. Pero, ¿qué tiene que devolver para que me entienda AJAX? puede devolver HTML o un JSON.

¿Cómo obtener la información que me devuelve AJAX?

¿Qué es JSON?

JSON es un objeto que puedo enviar para interpretarlo en diferentes partes de mi página.

En php lo creamos así.

$obj = new StdClass();
$obj->rowsTotal    = $total;
$obj->data = $users;
$this->JSON($obj);

¿Para qué sirve un JSON?

Para comunicar información. Por ejemplo. Cuando invocamos a AJAX nos puede devolver un JSON. Es información estructurada que garantizamos que nuestro destinatorio nos entienda.

Siguiendo con el ejemplo de obtener el listado de paises vamos a ver un ejemplo con javascript que contemplan AJAX para objener los datos y JSON para comunicarlos a donde quiera.

// Función que a partir de un tipo de configuración. Llama al controlador para obtener los datos de esa configuración que ha cambiado. Devuelve el JSON con los cambios del html

$.fn.loadCountryOrganizations = function(){
$("#parent_country_organization_id").attr("disabled","disabled");
$("#parent_country_organization_id").html("
Cargando...
");
$.getJSON(
urlLoadCountryOrganizations,
{
country_configuration_id: $("#country_configuration_id").val()

},

function(data){

var sHTML = "";

$.each(data, function(idx, value){

sHTML += "
"+value+"
";
});
$("#parent_country_organization_id").html(sHTML);
          $("#parent_country_organization_id").removeAttr("disabled");
}
);
}

Vemos que hemos obtenido el objeto JSON con getJSON.

La sintaxis es

$(selector).getJSON(url,data,success(data,status,xhr)).

Ejemplo genérico del flujo

En el siguiente diagrama podemos hacernos una idea del flujo del intercambio de información que tiene nuestra arquitectura web usando un navegador, un servidor web, Javascript, PHP y AJAX.

Arquitectura web basada en PHP, JavaScript & AJAX. Imagen obtenida del siguiente post.

¿Proximos pasos?

• Modelo MVC.
• Profundizar en JavaScript, AJAX, JQuery, JSON.

Bibliografía:

• Wikipedia
• www.w3schools.com

Se agradece comunicar comentarios, opiniones, consejos y erratas.

Si te parece interesante compartir es vivir.