Diferència entre revisions de la pàgina «Solució exercici3-ajax»

De wikiserver
Dreceres ràpides: navegació, cerca
(Es crea la pàgina amb «Fitxer javascript: <pre> var xhr; function peticionAjax(codigo, ciudad){ if (window.ActiveXObject) { //Iexplorer xhr = new ActiveXObject("Microsoft.XMLH…».)
 
Línia 1: Línia 1:
 
Fitxer javascript:
 
Fitxer javascript:
−
<pre>
+
<source lang="java">
 
var xhr;
 
var xhr;
  
Línia 44: Línia 44:
  
 
window.onload = inici;
 
window.onload = inici;
−
</pre>
+
</source>
  
 
Fitxer HTML:
 
Fitxer HTML:
−
<pre>
+
<source lang="html">
 
<!DOCTYPE html>
 
<!DOCTYPE html>
 
<html>
 
<html>
Línia 60: Línia 60:
 
     </body>
 
     </body>
 
</html>
 
</html>
−
</pre>
+
</source>
  
 
Fitxer PHP:
 
Fitxer PHP:
−
<pre>
+
<source lang="php">
 
<?php
 
<?php
 
function checkPost(){
 
function checkPost(){
Línia 166: Línia 166:
 
checkPost();
 
checkPost();
 
?>
 
?>
−
</pre>
+
</source>

Revisió del 15:46, 17 març 2015

Fitxer javascript: 

var xhr;

function peticionAjax(codigo, ciudad){
     if (window.ActiveXObject) { //Iexplorer
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else 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=4381»