Eseguire una Query tramite linguaggi client-side è possibile?

[zenida]

Salve a tutti,

Non so se ho scritto nella sezione giusta dato che l'argomento riguarda il coinvolgimento di diversi linguaggi. Caso mai spostatemi pure tranquillamente xD...

Veniamo al dunque:
Sto creando un nuovo sito web e sto cercando di renderlo il più intuitivo possibile...
Ora mi sono un pò inceppato con una funzione. Praticamente mentre un utente esegue il login vorrei che una volta compilato il campo username, compaia in un riquadro dedicato, l'avatar del suo account (così, a parte l'estetica, si rende anche conto se ha inserito il nome correttamente o meno).

Come ottenere il nome dalla textbox una volta perso il focus è piuttosto semplice, basta eseguire questa funzione JS:

function changeAvatar(){
    var nomeUtente = document.getElementById('username').value;
}

essa viene richiamata dopo l'evento:

onBlur = "changeAvatar()"

che è legato alla casella di testo.

Ora vengono i problemi... Vorrei usare questo nomeUtente per poter fare una ricerca nel mio DB e trovare il relativo avatar così da poter cambiare l'immagine sempre tramite JS con questo codice:

document.getElementById('avatarImage').src = "nuovaImmagine.ext";

Ma come faccio ad eseguire una query senza ricaricare la pagina per passare questa variabile chissà dove??? Perchè ovviamente non voglio aggiornare la pagina, altrimenti si perderebbe tutta l'utilità della funzione stessa.

Mi sa tanto che ho bisogno di AJAX qui, solo che non l'ho mai usato in vita mia quindi non so proprio a che serve e come posso usarlo. Ma leggendo qua e la vedo che la comunicazione tra client e server avviene in tempo reale e dunque sarebbe il candidato ideale per risolvere la questione...

Attendo consigli

 

[Eliox]

Sposto la discussione nella sezione Ajax.

 

[zenida]

Beh si a quanto pare Ajax è proprio la chiave del problema
Ora sto smanettando un pochino con le cose che ho appena imparato.. riesco a farlo funzionare ma non ottengo ancora il risultato che cerco

Ho modificato un pochino la textbox in maniera tale da passare direttamente il valore tramite parametro alla mia funzione Ajax:

onBlur = "changeAvatar(this.value)"

così posso fare direttamente questo poi dal mio script:

function changeAvatar(nomeUtente){
	if (nomeUtente != ""){
		
		if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp=new XMLHttpRequest();
		} else { // code for IE6, IE5
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				document.getElementById("avatarImage").src = xmlhttp.responseText;
			}
		}
		
		xmlhttp.open("GET","themes/advanced/home/get_avatar.php?user="+nomeUtente,true);
		xmlhttp.send();
	}
}

mentre la mia pagina PHP (get_avatar.php) fa questo:

<?php
$user=$_GET["user"];
require '../../../header.inc.php';

$nomeUtente = ucfirst(strtolower($user));
$sql = mysql_query("SELECT url_img_chat FROM personaggio WHERE nome = '".$nomeUtente."'");
$righe = mysql_num_rows($sql);

if($righe > 0){
	$avatar = mysql_fetch_array($sql);
	if ($avatar["url_img_chat"] != ""){
		echo "'".$avatar["url_img_chat"]."'";
	}
}

require '../../../footer.inc.php';
?>

Peccato che però non mi viene cambiato il src dell'immagine in maniera corretta perchè fa riferimento ad una posizione inesistente. Tra l'altro succede qualcosa di strano. Nonostante io abbia scritto nel get_avatar.php

if($righe > 0){

non capisco come mai se metto un nome sicuramente inventato che nel mio DB non esiste, cmq mi viene cambiato il SRC dell'immagine.
Ma non dovrebbe essere cambiato solo dopo aver fatto un Echo?? Oppure non ho capito bene io la funzionalità di XMLHttpRequest???

 

[zenida]

Ci sono riuscito!!! ^^

Il problema stava nel fatto che io includevo un header ed un footer alla mia pagina PHP.
Questi Header e Footer oltre ad eseguire la connessione e disconnessione dal mio DB ricreavano inoltre tutta l'intesazione di una pagina HTML includendo nuovamente i tag HTML, HEAD, BODY...
ma a quanto ho capito la pagina PHP che deve essere richiamata, in realtà non dev'essere una pagina nel vero senso della parola (ovvero navigabile) ma deve solo svolgere il ruolo di una tipica Classe. Quindi fa la sua funzione e stop, tutto li.

Infatti una volta eliminato le due inclusioni, ho semplicemente scritto a mano nuovamente la procedura di connessione al DB per poter effettuare la query.
Et voilà il mio script ha funzionato alla perfezione ^^

Il topic può considerarsi chiuso, ma io lo lascerei aperto nel caso qualcuno con un'esperienza simile alla mia, voglia ottenere ulteriori informazioni, che magari non sono state inserite, dato che avendo fatto tutto da solo potrei aver fatto o detto qualche cavolata