Conceptos esenciales del desarrollo web: Servlets, HTTP, PHP, JavaScript, JSON y DOM

Servlet

Servlet: programa Java que se ejecuta en un servidor. Actúa como intermediario entre cliente y servidor. Los módulos servlet se ejecutan en el servidor, pueden recibir y responder peticiones y permiten gestionar peticiones HTTP y enviar respuestas de texto de forma sencilla.

Métodos de petición y respuesta HTTP

GET: petición para solicitar datos de un recurso.
POST: envía datos al servidor para ser procesados por un recurso.

Diferencias entre GET y POST

• Caché: Las respuestas a GET pueden almacenarse en caché; las de POST normalmente no.
• Visibilidad: En GET los datos se incluyen en la URL y son visibles; en POST los datos no aparecen en la URL.
• Longitud y codificación: GET está limitado por la longitud de la URL y depende de la codificación de la misma (los caracteres no ASCII se codifican en la URL); POST no tiene ese límite práctico y permite enviar datos más extensos y binarios.
• Uso: GET se utiliza para recuperar recursos; POST para enviar datos que cambian el estado en el servidor.

PHP

PHP: lenguaje de código abierto apropiado para el desarrollo web y la generación de páginas HTML, centrado en secuencias de comandos del lado del servidor. Permite procesar datos de formularios, generar páginas dinámicas, trabajar con bases de datos mediante extensiones, conectar con bases de datos mediante ODBC, y gestionar cookies (enviar y recibir). Soporta varios sistemas de gestión de bases de datos.

ADOdb

ADOdb: sistema rápido y sencillo de abstracción de bases de datos para PHP. Permite usar el mismo código para acceder a diferentes sistemas de bases de datos, facilitando la portabilidad.

JSON

JSON (JavaScript Object Notation): estándar abierto que utiliza un formato de texto para representar datos compuestos por pares atributo-valor y arreglos, y que se emplea frecuentemente para la comunicación entre servidor y navegador.

Formato JSON

• Objeto: conjunto no ordenado de pares nombre-valor, delimitado por llaves { }.
• Array: colección ordenada de valores, delimitada por corchetes [ ].
• Valores: pueden ser números, cadenas, booleanos (true, false), null, objetos o arrays. Estas estructuras pueden anidarse.

JavaScript

JavaScript: lenguaje de alto nivel, dinámico y multiparadigma que ofrece una API para trabajar con cadenas de texto, arreglos, expresiones y el control del DOM.

Propiedad innerHTML y método alert

Propiedad HTML DOM innerHTML: establece o devuelve el contenido HTML de un elemento. Ejemplo:
document.getElementById("div_demo").innerHTML = "Changing this div";

Método alert(): muestra un cuadro de alerta con un mensaje y un botón. Ejemplo:
alert("Mensaje de ejemplo");

HTML DOM

HTML DOM (Document Object Model) define las propiedades y métodos para interactuar con el documento y sus elementos.

Propiedades y métodos del objeto document

• document.getElementById(id): devuelve el elemento con el id especificado.
• document.getElementsByTagName(nombre): devuelve una colección de elementos con la etiqueta especificada.
• document.createElement(nombre): crea un nuevo elemento (nodo) del tipo indicado.

Objeto elemento

• element.className: establece o devuelve el valor del atributo "class" de un elemento.
• element.nodeValue: establece o devuelve el valor de un nodo (es una propiedad, no un método).
• element.setAttribute(nombre, valor): establece o modifica un atributo del elemento.
• element.getAttribute(nombre): devuelve el valor de un atributo del elemento.

Eventos

Evento: suceso generado por el navegador o por el usuario. Algunos eventos HTML comunes son:

• onload: el navegador ha cargado la página.
• onchange: se ha modificado el valor de un elemento HTML.
• onkeydown: el usuario pulsa una tecla.
• onclick: el usuario hace clic sobre un elemento HTML.
• onmouseover: el cursor del usuario se mueve sobre un elemento HTML.
• onmouseout: el cursor del usuario se aleja de un elemento HTML.

jQuery

jQuery: biblioteca de JavaScript que simplifica la manipulación del DOM, la gestión de eventos y las llamadas Ajax. Ofrece la función jQuery (o el alias $) para seleccionar elementos mediante selectores CSS.

Ejemplos de selectores

• $("#header"); — selecciona el elemento con id "header".
• $(".person"); — selecciona los elementos con la clase "person".
• $("li"); — selecciona los elementos <li> de la página.
• $("ul li"); — selecciona elementos <li> dentro de <ul>.

Ejemplo de eventos con jQuery

Ejemplo:

$("p").click(function(){
  alert("The paragraph was clicked.");
});

Ajax

Ajax: conjunto de técnicas para desarrollar aplicaciones web asíncronas que pueden enviar y recuperar datos desde un servidor sin recargar la página, permitiendo actualizar la interfaz sin afectar la visualización ni el comportamiento del resto de la página.