Solució exercici4-ajax
De wikiserver
La revisió el 11:59, 19 març 2015 per Jnoguera (Discussió | contribucions)
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>
