Pseudo-AJAX, JavaScript, PHP e Google maps: Georeferenziazione indirizzi

di

 

Questo post ha più di 1 anno. Il contenuto potrebbe essere obsoleto, non più completamente accessibile o mancante di alcune informazioni.

Ajax: no grazie!Nelle conclusioni del precedente post, dicevo che “… sarebbe interessante utilizzare la tecnologia Ajax per recuperare in modo asincrono le coordinate …”, ebbene, fatti alcuni test, mi sono ritrovato ad affrontare due difficoltà: compatibilità dell’oggetto XMLhttprequest e soprattutto la gestione di richieste multiple contemporanee. Cercando sul web, ho trovato diverse soluzioni, alcune molto complicate, altre troppo “deboli”, una di queste interessante, ma alla fine ne ho trovata una, completamente diversa, che mi ha davvero incuriosito: la simulazione di un comportamento AJAX senza utilizzare… AJAX! La soluzione prospettata dall’autore di questo interessante post su W3 Facile, è tanto semplice quanto geniale: utilizzare il tag <script> per includere nella nostra pagina html, porzioni di codice javascript generati dinamicamente da script server side PHP. In questo modo risulta possibile elaborare richieste a server remoti e ricevere serialmente le risposte, vediamo l’applicazione di questa soluzione al nostro caso:

la pagina iniziale contiene un form per impostare gli indirizzi da georeferenziare e questo codice javascript che effettua le chiamate allo script lato server PHP:

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
32
33
34
35

<script type="text/javascript">
// Ottieni la base url
url = document.location.href;
xend = url.lastIndexOf("/") + 1;
var base_url = url.substring(0, xend);
function chiama_ajax(url) 
{
  //Inizia l'url con http?
  if (url.substring(0, 4) != 'http') 
  {
    url = base_url + url;
  }
  // Crea un nuovo elemento JS
  var jsel = document.createElement('SCRIPT');
  jsel.type = 'text/javascript';
  jsel.src = url;
  //Appende l'elemento JS e quindi esegue la 'chiamata pseudo-AJAX'
  document.body.appendChild (jsel);
}
function getFormValues() 
{
  document.getElementById("divResults").innerHTML = '';
  var myForm = document.getElementById("myForm").getElementsByTagName('input');
  var len = myForm.length;
  var params = '';
  for (i = 0; i < len; i++) {
    if(myForm[i].type == 'text'){
      params = myForm[i].value; 
      //per ogni elemento del form, includo lo script js che
      // viene creato dinamicamente dallo script php
      chiama_ajax('pseudoajax.php?query='+params);         
    }        
  }
}
</script>

In pratica, per ogni elemento input di tipo text del form viene richiamata la funzione chiama_ajax() passandogli la url del file php e il valore impostato in querystring.

Lo script lato server pseudoajax.php:

1
2
3
4
5
6
7

<!--?php require("geocoder4.class.php"); $data = array(); if (!empty($_GET['query'])) { $toGeocode = $_GET['query']; $data = array($toGeocode); } //localhost key: $gmpKey = "ABQIAAAAzr2EBOXUKnm_..."; // Inserire la Google key corretta! $test = &amp;amp; new geocodeaddr($data,$gmpKey); $geocodeResults = $test-&gt;getAddress();
$res = $geocodeResults[0]['address'].' lat: '.
       $geocodeResults[0]['lat'].' long: '.
       $geocodeResults[0]['lng'].'&lt;br ?-->';
?&gt;
div = document.getElementById('divResults');
div.innerHTML += '<!--?php echo($res); ?-->';

Lo script raccoglie il parametro passato in querystring, valorizza l’array da passare alla classe geocodeaddr, formatta il risultato e lo rispedisce come elemento code>innerHTML
al client HTML sotto forma di script js. Fatto!

Questa è la demo

Conclusioni:

Concordo pienamente con l’autore che, nei commenti al suo articolo dice “Diciamo che come metodo ha i suoi pro e contro…i pro sono un’enorme leggerezza, compatibilità e semplicità d’uso, i contro dei limiti nel suo utilizzo e l’esclusione per la lettura di valori XML, non utilizzando l’XMLhttprequest”, e conclude dicendo: “…nella programmazione non esiste una soluzione migliore di un’altra SEMPRE, dipende dal problema che dobbiamo risolvere”

Riferimenti ed approfondimenti: