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

De wikiserver
Dreceres ràpides: navegació, cerca
(Es crea la pàgina amb «Fitxer PHP (usuaris.php): <pre> <?php function valida($nom){ $fitxer = fopen("usuarios.txt", "r") or die("El fitxer ha donat error"); $trobat = false; while…».)
 
Línia 1: Línia 1:
 
Fitxer PHP (usuaris.php):
 
Fitxer PHP (usuaris.php):
<pre>
+
<source lang="php">
 
<?php
 
<?php
  
Línia 59: Línia 59:
  
 
?>
 
?>
</pre>
+
</source>
  
 
Fitxer javascript (exercici4.js):
 
Fitxer javascript (exercici4.js):
<pre>
+
<source lang "javascript">
 
var xhr;
 
var xhr;
  
Línia 132: Línia 132:
 
</html>
 
</html>
  
</pre>
+
</source>

Revisió del 11:58, 19 març 2015

Fitxer PHP (usuaris.php):

<?php


function valida($nom){
    $fitxer = fopen("usuarios.txt", "r") or die("El fitxer ha donat error");
    $trobat = false;
    while(!feof($fitxer) && !$trobat){
        if(strcmp(strtoupper(fgets($fitxer)),strtoupper($nom)."\n") == 0){
            $trobat = true;
        }
    }
    fclose($fitxer);
    
    if($trobat){
        $nom2 = $nom.rand(0,9);
        return valida($nom2);
    }
    else{
        return $nom;
    }
}

function afegeix($nom, $pass){
    $fitxer = fopen("usuarios.txt", "a+") or die("El fitxer ha donat error");
    fwrite($fitxer,$nom."\n");
    fclose($fitxer);
    return "Guardat correctament";
}

function checkRequest(){
    if(isset($_REQUEST["command"])){
        switch(strtoupper($_REQUEST["command"])){
            case "VALIDA" :
                    if(isset($_REQUEST["nom"])){
                        echo valida($_REQUEST["nom"]);
                    }
                    else{
                        echo "Falta el paràmetre nom";
                    }
                    break;
            case "AFEGEIX" :
                    if(isset($_REQUEST["nom"]) ){
                        echo afegeix($_REQUEST["nom"]);
                    }
                    else{
                        echo "Faltan paràmetres";
                    }
                    break;
            default:
                 echo "Aquesta funció no existeix";
        }
        
    }
}

checkRequest();

?>

Fitxer javascript (exercici4.js):

var xhr;

function peticionAjax(nom, command){
     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', 'usuaris.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 (command.toLowerCase() == "valida"){
                            if(nom == this.responseText){
                                document.getElementById("btn").disabled=false;
                            }
                            else{
                                document.getElementById("nomValidat").innerHTML
                                    = this.responseText;
                            }
                        }
                        else{//funcion afegeix de php
                            document.write(this.responseText);
                        }

		}
	}
    }

    var content = "command=" + command + "&nom=" + nom;
    xhr.send(content);
}


function inici(){
    document.getElementById("usuarios").onblur = function(){
        peticionAjax(this.value, "valida");
    }
    document.getElementById("btn").onclick=function(){
        peticionAjax(document.getElementById("usuarios").value, "afegeix");
    }
}

window.onload = inici;
</pre>

Fitxer html (index.html):
<pre>
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="exercici4.js"></script>
    </head>
    <body>
        <input type="text" id="usuarios"  />
        <div id="nomValidat" style="color:green;"></div>
        <input type="password" id="usuarios" />
        <input type="button" id="btn" value="enviar" disabled="disabled"/>
    </body>
</html>