Pues bien, para lograr hacer esto necesitamos utilizar el objeto XMLHttpRequest de nuestro explorador, accederemos a él a través de JavaScript y le enviaremos una petición al servidor. El servidor nos responderá enviándonos los datos en un archivo XML, lo recogemos, lo leemos, y lo mostramos en pantalla haciendo uso de javascript.

Creando el objeto XMLHttpRequest

Vamos por faena, lo primero de todo es… ¿Cómo creamos un objeto XMLHttpRequest? Os muestro el código necesario, en que, como todavía no hay un estándard sobre ese objeto (aunque hay un borrador final de la W3C a 15 de Abril de 2008) es necesario meter varias bifurcaciones para crearlo dependiendo del explorador:

function createXmlHttpRequestObject() {
    var req = false;

    if(window.XMLHttpRequest && !(window.ActiveXObject)) {
        try {req = new XMLHttpRequest();}
        catch(e) {req = false;}
        }
    else if(window.ActiveXObject) {
       	try {req = new ActiveXObject("Msxml2.XMLHTTP");}
      	catch(e) {
      	    try {req = new ActiveXObject("Microsoft.XMLHTTP");}
        	catch(e) {req = false;}
	    }
        }
	return req;
}

El objeto es el que nos permite hacer peticiones, lo guardaremos en una variable en cada petición de la siguiente manera:

var request;
request = apicl_createXmlHttpRequestObject();

Realizando la petición

Una vez que sabemos cómo crear el objeto XMLHttpRequest, es hora de realizar una llamada al servidor, hay que tener en cuenta que en cada llamada al servidor hay que crear un objeto XMLHttpRequest nuevo.

var request;  //Esta variable ha de ser global.

function callWS(url, responseHandler, parameters) {
    var strParameters = "";
    request.onreadystatechange = responseHandler;
    request.open("POST", url, true);

    if(parameters != null && parameters.length != 0) {
        request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

        for(var i = 0; i < parameters.length; i++) {
            var p = parameters[i];
            if(strParameters != "") strParameters += "&";
            strParameters += p[0] + "=" + p[1];
        }
    }
   request.send(strParameters);
}

//Petición sin parámetros:
function getDatos() {
    if (document.getElementById('divDatos').innerHTML==''){
        request = createXmlHttpRequestObject();
        callWS("http://www.entrecodigos.com/service.asmx/getDatos", getResponseDatos, null);
        }
}

Voy a intentar explicar los puntos menos claros:

• La propiedad onreadystatechange permite establecer una función de destino cada vez que nuestro objeto XMLHttpRequest cambie de estado, esa función se encargará de recoger la respuesta.
• El método open, permite asignar ciertos valores a nuestra petición: el method (GET, POST o PUT), la url, si va a ser una petición asíncrona, usuario y contraseña. Los 3 últimos son opcionales.
• La petición puede hacerse con parámetros que requiera la función a la que llamas en el servidor, en ese caso los metemos en una cadena. Luego veremos cómo meter parámetros.
• Realizamos la petición con el método send. Para realizar esta petición se supone que tenemos un webservice al otro lado, es una url a un archivo, el servidor recogerá la petición y la tratará, puedes tener un webservice o hacer una página en aspx manual que reciba las peticiones y devuelva los XML, es preferible lo primero.

Recogiendo la respuesta del servidor

Ahora que ya sabemos cómo llamar al servidor, debemos recoger la respuesta y tratarla, en mi caso lo simplifico haciendo que lo que me pasa el servidor sea una simple cadena de texto que muestro en un div. Como Firefox me dio problemas porque metía las respuestas de strings muy largas en varios nodos tuve que crear un bucle:

function getResponse(){
    var res = '';
    for (var i=0; (i < request.responseXML.documentElement.childNodes.length); i++) {
        if (request.responseXML.documentElement.childNodes.item(i))
            {res = res + request.responseXML.documentElement.childNodes.item(i).nodeValue;}
        }
    res = res.replace(/</g, "<").replace(/>/g, ">");
    return res;
}

function getResponseDatos() {
    if(request.readyState == 4 && request.status == 200) {
        document.getElementById('divDatos').innerHTML=getResponse();
    }
}

Como se puede ver, conforme el objeto cambie de estado (0: Inicializado, 1: Petición abierta, 2: Petición enviada, 3: Recibiendo respuesta, 4: Respuesta recibida) se irán haciendo llamadas a la función que pusimos receptora, por eso, debemos colocar un filtro que mire en que estado nos encontramos cuando recibimos la llamada. Cuando por fin el estado sea 4, miramos si la respuesta es satisfactoria (200) o si por el contrario ha habido algún tipo de problema (401, 404, …).

Peticiones con parámetros

Por último, os pongo el código completo e incluyo de propina una llamada con parámetros de ejemplo, creo que tras todo lo anterior no necesita explicación.

//Peticiones Asíncronas:
var request;  //Esta variable ha de ser global.

function createXmlHttpRequestObject() {
    var req = false;

    if(window.XMLHttpRequest && !(window.ActiveXObject)) {
        try {req = new XMLHttpRequest();}
        catch(e) {req = false;}
        }
    else if(window.ActiveXObject) {
       	try {req = new ActiveXObject("Msxml2.XMLHTTP");}
      	catch(e) {
      	    try {req = new ActiveXObject("Microsoft.XMLHTTP");}
        	catch(e) {req = false;}
	    }
        }
	return req;
}

function callWS(url, responseHandler, parameters) {
    var strParameters = "";
    request.onreadystatechange = responseHandler;
    request.open("POST", url, true);

    if(parameters != null && parameters.length != 0) {
        request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

        for(var i = 0; i < parameters.length; i++) {
            var p = parameters[i];
            if(strParameters != "") strParameters += "&";
            strParameters += p[0] + "=" + p[1];
        }
    }
   request.send(strParameters);
}

function getResponse(){
    var res = '';
    for (var i=0; (i < request.responseXML.documentElement.childNodes.length); i++) {
        if (request.responseXML.documentElement.childNodes.item(i))
            {res = res + request.responseXML.documentElement.childNodes.item(i).nodeValue;}
        }
    res = res.replace(/</g, "<").replace(/>/g, ">");
    return res;
}

//Petición sin parámetros:
function getDatos() {
    if (document.getElementById('divDatos').innerHTML==''){
        request = createXmlHttpRequestObject();
        callWS("http://www.entrecodigos.com/service.asmx/getDatos", getResponseDatos, null);
        }
}
function getResponseDatos() {
    if(request.readyState == 4 && request.status == 200) {
        document.getElementById('divDatos').innerHTML=getResponse();
    }
}

//Petición con parámetros:
function getDatosConParam(){
    var tipo = document.getElementById('divEjemplo');
    if (tipo){
        var parameters = new Array();
        parameters[0] = new Array("nombreParam1", ejemplo.options[ejemplo.selectedIndex].value);
        parameters[1] = new Array("nombreParam2", "valor del param 2");
        request = createXmlHttpRequestObject();
        callWS("http://www.entrecodigos.com/service.asmx/getDatos", getResponseDatosConParam, parameters);
        }
}
function getResponseDatosConParam() {
    if(request.readyState == 4 && request.status == 200) {
        document.getElementById('divEjemplo').innerHTML=getResponse();
    }
}

Notas finales

Para que no os pase como a mi, os aviso de que el javascript sólo podrá hacer peticiones al mismo dominio que ha servido la página por cuestiones de seguridad (phishing y otras historias), esto es, si intentamos llamar a un webservice alojado en www.otraweb.com desde www.miweb.com nos lanzará un error de permisos y nos impedirá el acceso. Para hacer algo como eso debe utilizarse un iframe que cargue una página en www.otraweb.com y lance las peticiones al webservice.

El código que véis lo he picado a mano y nunca lo he probado, es posible que tenga fallos

window.open('url to open','window name','attribute1,attribute2') 

En realidad, ese código tiene fallos, a saber:

• Los navegadores sin JavaScript no podrán abrir la página.
• No se indexará igual de bien en los buscadores, y algunos crawlers, no lo sabrán recorrer.
• Al pasar el ratón sobre el link, no podremos ver la página destino en la barra de estado.
• El usuario pierde la opción de hacer click derecho para abrir en una nueva ventana, pestaña o copiar la ruta del enlace.
• El usuario pierde la opción de agregar la página a favoritos en el menú emergente del enlace.
• Por último, las etiquetas “a” tienen una razón de ser especificada en el W3: “A link is a connection from one Web resource to another“, por lo que utilizarlo para que nuestro texto tenga una apariencia pero funcione a través del onclick no es la mejor forma de seguir el estándar.

La forma correcta de abrir un pop-up es la siguiente:

<a href="./index.html" target="_blank" onClick="window.open(this.href,
this.target, 'width=300, height=400'); return false;">Abrir pop-up.</a>

De esta manera, el enlace es un enlace normal que enlazará de forma correcta bajo cualquier circunstancia y, además, en las condiciones mas habituales funcionará de la forma en que queremos nosotros: abriendo un pop-up.

Fuente: No sólo usabilidad.

Mientras tanto os dejo con el 3 en raya, que se puede jugar con alguien o contra la máquina:

Para ganar al 3 en raya basta con empezar desde una esquina y abrirte 2 caminos posibles colocándote en las otras esquinas, cuando tienes 3 esquinas de 4 ya tienes la victoria, por el centro o por la banda, no puede cubrirte ambas partes.

Tengo muchos otros juegos por ahí, incluso alguno rollo plataformas o el antiquísimo Donkey Kong, arcanoid o tetris, también hay juegos de rol en formato texto o texto en movimiento que persigue tu ratón.

PD: El algoritmo tiene algún bug, pero dado que es del año catapum (cuando mas de media España aún no sabía de la existencia de Internet) y que no tengo ganas de arreglarlo espero que se me perdone

Si eres diseñador y tu paciencia con los diferentes exploradores y sus distintas formas de interpretar el CSS ha llegado a su límite, tengo algo que mostrarte, y es que, ¿que me dirías si te digo que existe una forma de colocar una página de estilos distinta para cada explorador?

Pues existe, se puede hacer usando una sentencia muy sencilla en JavaScript o desde tu código fuente en el servidor. Os muestro cómo:

Desde JavaScript, ideal en páginas estáticas

Para hacerlo desde JavaScript aprovecharemos la capacidad del mismo para recorrer los objetos de la página, y a través de la cual puedes cambiar sus distintos valores, de forma que, si en la etiqueta de inclusión de la hoja de estilos establecemos un ID, podemos cambiar la ruta al mismo en función del explorador que el usuario esté utilizando:

<link rel="stylesheet" type="text/css" href="hoja.css" id="css">

<script type="text/javascript" language="JavaScript">
if (navigator.appName.indexOf("Microsoft Internet Explorer") !=-1) {
	document.getElementById("css").href= "cssIE.css";
} else {
	document.getElementById("css").href= "cssFire.css";
}
</script>

Por supuesto, hay que hacer una llamada a la función en el onLoad del body, y puedes meter mas condicionales para mas tipos de explorador, utiliza la instrucción alert(navigator.appName); para saber el appName de cada uno de ellos. No olvides que es recomendable meter las funciones JavaScript en archivos externos y realizar una llamada, muy útil sobretodo si, como en este caso, pretendes reutilizarla en muchas páginas del site.

Al generar la página en el servidor

Pero si utilizar JavaScript no te convence o te parece arriesgado (el usuario podría tenerlo desactivado) siempre te queda la opción de realizar esta operación en el servidor, utilizando el lenguaje de servidor que tengas para generar tus páginas dinamicamente. Por ejemplo, en ASP.Net utilizaríamos lo siguiente:

Page_Load (...)
If Request.UserAgent.StartsWith("Mozilla") Then
	Me.EtiquetaCSS.Attributes("href") = "estilosMZ.css"
Elseif Request.UserAgent.Contains("Internet Explorer") Then
	Me.EtiquetaCSS.Attributes("href") = "estilosIE.css"
End If

//Para que funcione, habremos colocado la id "EtiquetaCSS" y la 
// propiedad runat="server" en la etiqueta de inclusión del CSS:
<link rel="stylesheet" type="text/css" href="estilos.css" media="screen" runat="server" id="EtiquetaCSS"/>

El resto de lenguajes también incorporan formas de hacer esto mismo, pero tendrás que buscar en Google o entre sus librerías ya que de memoria no puedo decirte cómo.

Otras opciones

Si lo que quieres no es cambiar toda la página de estilos, sino tan sólo el estilo de un objeto o una propiedad, puedes hacerlo a través de JavaScript con un par de instrucciones sencillas. Accediendo al style del objeto y luego a la propiedad que deseas cambiar (como en el ejemplo de arriba) o cambiando el estilo al que tiene acceso:

function CambiarEstilo(){
  //Para cambiar todo el estilo del objeto:
  document.getElementById('elemento').className='nuevoEstilo';

  //Si en cambio sólo queremos cambiar una propiedad:
  document.getElementById('Elemento').style.propiedad='nuevoValor';

  Propiedad: cualquiera de las de css (color,background,border,margin,padding,...)
}

Bueno, pues eso es todo, pronto entenderéis que esto es mas útil de lo que parece, y acabaréis utilizándolo…