Solució exercici3-ajax

De wikiserver
Dreceres ràpides: navegació, cerca

Fitxer javascript: 

var xhr;

function peticionAjax(codigo, ciudad){
    if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
            xhr = new XMLHttpRequest();
    }
    else {
            throw new Error("Ajax is not supported by this browser");
    }
    
    xhr.open('POST', 'ciudades.php');
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xhr.onreadystatechange = function() {
	if (this.readyState == 4) {
		if (this.status >= 200 && this.status < 300) {
                        if(document.getElementById("barrios")){
                            document.body.removeChild(document.getElementById("barrios"));
                        }
			document.write(this.responseText);
		}
	}
    }

    var content = "codigo=" + codigo;
    if(ciudad != null){
        content = content + "&ciudad=" +ciudad;
    }
    xhr.send(content);
}


function inici(){
   peticionAjax("ciudades");
}

function ajax(city){
   peticionAjax("BARRIOS",city);
}

window.onload = inici;

Fitxer HTML: 

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="exercici3.js"></script>
    </head>
    <body>


    </body>
</html>

Fitxer PHP: 

<?php
function checkPost(){
    if(isset($_REQUEST["codigo"])){
        switch (strtoupper($_REQUEST["codigo"])){
            case "CIUDADES":
                echo selectCiudades();
                exit();
                break;
            case "BARRIOS":
                if(isset($_REQUEST["ciudad"])){
                    echo selectBarrios(strtoupper($_REQUEST["ciudad"]));
                    exit();
                }
                break;
            default:
        }
    }
    echo "error";
}
function selectCiudades(){
    $html = "";
    $html = $html . "<select id='ciudades' onchange='ajax(this.value);'>";
    $html = $html . "<option>----------</option>";
    $html = $html . "<option value ='BARCELONA'>BARCELONA</option>";
    $html = $html . "<option value ='MADRID'>MADRID</option>";
    $html = $html . "<option value ='SEVILLA'> SEVILLA</option>";
    $html = $html . "<option value ='CORUÑA'>LA CORUÑA</option>";
    $html = $html . "</select>";
    return $html;
}


function selectBarrios($ciudades){
    switch ($ciudades){
        case "BARCELONA":
            return getBarcelona();
            break;
        case "MADRID":
            return getMadrid();
            break;
        case "SEVILLA":
            return getSevilla();
            break;
        case "CORUÑA":
            return getCoruna();
            break;
        default :
            return "";
    }
}

function getBarcelona(){
    $html = "";
    $html = $html . "<select id='barrios'>";
    $html = $html . "<option>----------</option>";
    $html = $html . "<option>EIXAMPLE</option>";
    $html = $html . "<option>GRACIA</option>";
    $html = $html . "<option>LES CORTS</option>";
    $html = $html . "<option>RAVAL</option>";
    $html = $html . "<option>GLORIAS</option>";
    $html = $html . "</select>";
    return $html;
}

function getMadrid(){
    $html = "";
    $html = $html . "<select id='barrios'>";
    $html = $html . "<option>----------</option>";
    $html = $html . "<option>CHUECA</option>";
    $html = $html . "<option>MALASAÑA</option>";
    $html = $html . "<option>SALAMANCA</option>";
    $html = $html . "<option>COSLADA</option>";
    $html = $html . "</select>";
    return $html;
}

function getSevilla(){
    $html = "";
    $html = $html . "<select id='barrios'>";
    $html = $html . "<option>----------</option>";
    $html = $html . "<option>TRIANA</option>";
    $html = $html . "<option>MACARENA</option>";
    $html = $html . "<option>ALAMEDA</option>";
    $html = $html . "<option>BAMI</option>";
    $html = $html . "</select>";
    return $html;
}

function getCoruna(){
    $html = "";
    $html = $html . "<select id='barrios'>";
    $html = $html . "<option>----------</option>";
    $html = $html . "<option>ZALAETA</option>";
    $html = $html . "<option>ENSANCHE</option>";
    $html = $html . "<option>CUATRO CAMINOS</option>";
    $html = $html . "<option>ORILLAMAR</option>";
    $html = $html . "</select>";
    return $html;
}

checkPost();
?>
Obtingut de «http://wikiserver.infomerce.es/index.php?title=Solució_exercici3-ajax&oldid=17938»