Lecciones Prácticas

El otro día os hablaba de cómo invocar servicios de nuestro propio servidor usando request’s de Ajax.

Podéis ver un ejemplo de código que realiza peticiones Ajax [AQUI]. Como véis, NO FUNCIONA. Si utilizáis firebug veréis que la ejecución llega hasta la línea 27.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

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;
               <b>http_request.open('GET', url, false);
               // En este punto URL contiene una URL EXTERNA
               //(fuera de nuestro servidor)</b>
               http_request.send(param);
               return http_request;
          }

Además, si abrimos la consola de errores de Firefox, veremos algo parecido a

Error de seguridad: el contenido en

http://www.leccionespracticas.com/trabajo/buscador_zaguan.php

no puede cargar datos de http://olmo.unizar.es/search?ln=es&sc=1&p=water.

Error: uncaught exception:
[Exception... "Access to restricted URI denied"  
code: "1012" nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)"
location: "http://www.leccionespracticas.com/trabajo/buscador_zaguan.php Line: 110"]

Buscando encontré el manual para hacer proxy desde javascript.

Ésto me dio la pista definitiva para solucionar el problema. Os cuento cómo lo he resuelto:

1. Creo el archivo php_proxy2.php con [éste código fuente] y MODIFICAMOS $vfileañadiendo la url BASE del sitio web al que queremos invocar mediante Ajax, esto es:

<?php
   <font color="red">   $vfile = "http://olmo.unizar.es"; // Esta línea tiene la URL base del sitio </font>
      if (isset($_GET['dst'])){
         $vfile = $vfile.$_GET['dst'];
      }
      header("Content-type: text/xml");
      readfile($vfile);
?&gt;

Nota: Además, por motivos de seguridad es IMPRESCINDIBLE que utilicéis este parámetro base, ya que sino vuestra máquina se podría convertir en un proxy -desde el que se podrían hacer cosas malas, you know what I mean-

2. Hago el encode de la URL que deseo invocar y se la paso como parámetro al proxy ANTES de invocar a http_request.open (mira la línea 26). Ésto es, modificamos la funcion makeRequest, que quedará asi:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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;
               }
               http_request.onreadystatechange = fromServer;
               var url_mod ='http://www.leccionespracticas.com/trabajo/php_proxy2.php?dst=' + encodeURIComponent(param);
               http_request.open('GET', url_mod, false);
               http_request.send(param);
               return http_request;
          }

El resultado podéis verlo [EN ESTE LINK]

Ficheros utilizados en este tutorial:
[1] Proxy PHP: php_proxy2.php
[2] Fichero ORIGINAL desde el que hago los Ajax Requests: buscador_zaguan_bueno.php

Related posts:

1. Ajax (I): peticiones HTTP – HTTP Requests
2. DeepZoom & Seadragon AJAX: add new button with on-hover-changing-style
3. DeepZoom & SEADragon (II)