Lecciones Prácticas

A menudo es útil realizar peticiones HTTP al servidor, para, por ejemplo, invocar un programa (sea php, python, asp…).
El siguiente ejemplo muestra el código Ajax para realizar una petición de este estilo.
Los resultados se almacenarán en el div RESULTSDIV

<script>
         function fromServer(){
                 if( http_request.readyState==4 ){
                     if( http_request.status==200 ){
                           // results from call to the server appear here
                           // in http_request.responseText;
                           e = document.getElementById("RESULTSDIV");
                           e.innerHTML = http_request.responseText;
                     }
                     else{
                           // uncomment next line if you want to show any error messages
                           alert('error: ' + http_request.responseText);
                     }
                 }
         }

         function makeRequest(url,param){
               url = url + param;
               http_request = false;
               if(window.XMLHttpRequest){ // Mozilla, Safari,...
                  http_request = new XMLHttpRequest();
                  if (http_request.overrideMimeType){
                      http_request.overrideMimeType('text/html');
                  }
               }
               else if (window.ActiveXObject){// IE
                  try{ http_request = new ActiveXObject("Msxml2.XMLHTTP");}
                  catch (e){
                        try{
                           http_request = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                        catch (e2) {}
                   }
               }
               if (!http_request){
                  // uncomment next line if you want to show any error messages
                  alert('Cannot create XMLHTTP instance');
                  return false;
               }
               //alert("makeRequest(): url='"+url+"'");
               http_request.onreadystatechange = fromServer;
               http_request.open('GET', url, false);
               http_request.send(param);
          }
</script>

Un inciso para comentar algo importante:
Ese último parametro de http_request.open() indica si la petición será síncrona o asíncrona.
Es fácil de entender.
SINCRONA: Significa que la funcion javascript no seguirá interpretandose hasta que la operacion ajax finalize.

Código PHP:
var algo = newajax();
algo.open(algo,algo,false);
algo... //blabla
#Este alert solo se ejecutara cuando todo lo de arriba se haya interpretado y finalizado.
alert(222)


ASINCRONA: Significa que la funcion javascript pasará de largo de proceso ajax sin necesidad de esperar a que esté finalizado para seguir interpretandose es por eso que se usa los onreadystatechange osea… en que estado va tu proceso.

Código PHP:
var algo = newajax();
algo.open(algo,algo,true);
algo... //blabla

#Este alert se ejecutará sin importar que el proceso ajax haya finalizado .. pasa de largo.
alert(222)

Otra definición.
ASINCRONA: le vale un pepino tu proceso ajax y continua el interprete javascript.
SINCRONA: espera a que todo termine para continuar.

En el caso que me ocupa utilizo la siguiente función para invocar el procedimiento makeRequest:

        function busca(pal){
               var valor=document.forms[0].group1y.checked;
               //alert("busca(): "+valor);
               if (valor!=true){
                  document.getElementById("RESULTSDIV").innerHTML = "";
               }
               else{
                  var base='http://olmo.unizar.es';
                  var param='/search?ln=es&sc=1&p='+pal;
                  makeRequest(base,param);
               }
           }

También puede hacerse interpretando los valores que devuelve en la función busca. Para ello el código sería:

          function fromServer(){
                 if( http_request.readyState==4 ){
                     if( http_request.status==200 ){
                           // results from call to the server appear here
                           // in http_request.responseText;
                           //e = document.getElementById("RESULTSDIV");
                           //e.innerHTML = http_request.responseText;
                           //alert('fromServer(): responseText='+http_request.responseText);
                           var salida=http_request.responseText;
                           return salida;
                     }
                     else{
                           // uncomment next line if you want to show any error messages
                           alert('error: ' + http_request.responseText);
                     }
                 }
         }

         function makeRequest(url,param){
               url = url + param;
               http_request = false;
               if(window.XMLHttpRequest){ // Mozilla, Safari,...
                  http_request = new XMLHttpRequest();
                  if (http_request.overrideMimeType){
                      http_request.overrideMimeType('text/html');
                  }
               }
               else if (window.ActiveXObject){// IE
                  try{ http_request = new ActiveXObject("Msxml2.XMLHTTP");}
                  catch (e){
                        try{
                           http_request = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                        catch (e2) {}
                   }
               }
               if (!http_request){
                  // uncomment next line if you want to show any error messages
                  alert('Cannot create XMLHTTP instance');
                  return false;
               }
               //alert("makeRequest(): url='"+url+"'");
               http_request.onreadystatechange = fromServer;
               http_request.open('GET', url, false);
               http_request.send(param);
               return http_request;
          }
          function busca(pal){
               var valor=document.forms[0].group1y.checked;
               //alert("busca(): "+valor);
               if (valor!=true){
                  document.getElementById("RESULTSDIV").innerHTML = "";
               }
               else{
                  var base='http://olmo.unizar.es';
                  var param='/search?ln=es&sc=1&p='+pal;
                  var out=makeRequest(base,param);
                  if (out!==undefined){
                       document.getElementById("RESULTSDIV").innerHTML = out.responseText;
                  }
             }

Un ejemplo de todo ello funcionando a la vez como elemento programando en Python disponible para descarga [aquí]

Related posts:

1. Peticiones AJAX a SERVIDORES EXTERNOS
2. httpwatch: record http / https requests
3. DeepZoom & Seadragon AJAX: add new button with on-hover-changing-style
4. DeepZoom & SEADragon (IV)