Solució exercici3-ajax
De wikiserver
La revisió el 20:42, 20 març 2014 per Asalinas (Discussió | contribucions) (Es crea la pàgina amb «Fitxer javascript: <pre> var xhr; function peticionAjax(codigo, ciudad){ if (window.ActiveXObject) { //Iexplorer xhr = new ActiveXObject("Microsoft.XMLH…».)
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();
?>
