Ajax - Un esempio base

February 10th 2010 by Paolo Bindi in: JS / Ajax / Jquery / Json | Tags: JS / Ajax / Jquery / Json

In questo semplice esempio, cambieremo una combo box attraverso l'uso di Ajax

Prima di tutto definiamo i 3 file su cui agiremo

• principale.php
• XmlHttp.php
• GoogleMapsReloadCity.php

Questo il codice di principale.php

<td>
	<select class="texto_combos" id="state" onchange="java-script:fnCallByAjax('GoogleMapsReloadCity.php','new_state='+this.value,'cityDiv')">
	<?php
       foreach ($aStateList as $key=>$value){
                   if($key==$state_default){
                        $selected="selected";
                    }else{
                        $selected=false;
                        }
                    echo "<option $selected value='$key'>$value</option>";
                }
	?>
	</select>
</td>
<td><?php echo $lab_city;?>:</td>
<td>
	<div id="cityDiv" name="cityDiv">

	<select class="texto_combos" style="width:100px" id="city">
    <?php
            foreach ($aCityList as $key=>$value){
                    if($key==$city_default){
                        $selected="selected";
                    }else{
                        $selected=false;
                    }
                    echo "<option $selected value='$key'>$value</option>";
                }
        ?>
    </select>

    </div>
</td>

A riga 1 abbiamo la definizione della funzione fnCallByAjax, che verra' chiamata al cambio del combo box. Questa funzione, che vedremo tra poco, andra' a sostituire il codice presente nel div cityDiv

Questo il codice di XmlHttp.php

function XmlHttp(){
var oRequest;
    if (window.XMLHttpRequest) {
        oRequest = new XMLHttpRequest();
        return oRequest;
    } else if (window.ActiveXObject) {
        //"MSXML2.XMLHTTP","MSXML2.XMLHTTP.3.0",
        var arrSignatures = ["MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.5.0","Microsoft.XMLHTTP"];
        for (var i=0; i < arrSignatures.length; i++) {
            try {//alert(arrSignatures[i]);
                var oRequest = new ActiveXObject(arrSignatures[i]);
                return oRequest;
            } catch (oError) {//alert(oError);
            }
        }
    }
    throw new Error("MSXML is not installed on your system.");
}

function addPostParam(sParams, sParamName, sParamValue) {
    if (sParams.length > 0) {
        sParams += "&";
    }
    return sParams + encodeURIComponent(sParamName) + "=" + encodeURIComponent(sParamValue);
    /*var val=escape(sParamValue);
    return sParams + (sParamName) + "="
                   + (escape(val));*/

}

function fnCallByAjax(sPath,sParam,div){
1    var oRequest=XmlHttp();
2    oRequest.open("post",sPath,false);
3    oRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
4    oRequest.send(sParam);

5    var box = document.getElementById(div);
6    box.innerHTML="";
7    box.innerHTML = oRequest.responseText;
}

Dopo le definizioni della chiamata ad Ajax, differente tra FF e IE, a riga XXX abbiamo la definizione della funzione fnCallByAjax, che accetta come parametri

• sPath
Il nome della funzione/file da eseguire
• sParameter
Il valore attuale
• div
Il nome del div, ovvero la parte che si andra' a sostituire della pagina principale.php

A riga 2 effettuiamo la chiamata in POST

a riga 4 inviamo i parametri

A riga 6 cancelliamo il precedente contenuto

a riga 7 aggiungiamo il nuovo.

Infine questo il codice di GoogleMapsReloadCity.php

$oGoogleMap=new GoogleMap();

$aCityList=$oGoogleMap->getGoogleCityList($_POST[new_state]);

foreach ($aCityList as $key=>$value){
    if($key==$city_default){
        $selected="selected";
    }else{
        $selected=false;
    }
    echo "<option $selected value='$key'>$value</option>";
}

Dove dopo aver instanziato la classe GoogleMap per il recupero della lista delle citta' (parte che non interessa per l'argomento che stiamo trattanto), scriviamo il codice che andra' a sostituire quello presente nel div del principale.php

Notare che e' identico a quello gia' presente. Questo per non modificare la struttura della pagina stessa.

Questo era un primo esempio base e piuttosto semplice, ma che permette di capire cosa sia una chiamata ad Ajax e quale il suo obiettivo.

Nel caso che riscontrate qualche errore o se volete contattarmi per qualche consiglio o suggerimento, utilizzate la form della sezione contatti