AJAX: funzioni per utilizzare XMLHttpRequest

Mi sto dedicando allo studio dell'AJAX e dello Javascript, però ho avuto risultati copiando, incollando e modificando leggermente delle parti di codice trovati online, ma vorrei scrivere da me, in modo da imparare meglio.
Ho scritto questo, ma non mi funzione. Potete aiutarmi per poter risolvere?

Codice:

---

var request = false;

function start_request(handler_name)
{
    var start = false;

    if (window.XMLHttpRequest)        // Mozilla, Safari, ecc.
    {
        start = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)    // IE
    {
        try
        {
            start = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e)
        {
            start = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }

    if (start === false)
    {
        alert('Giving up :( Cannot create an XMLHTTP instance');
        return false;
    }

    start.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    start.onreadystatechange = handler_name;

    return start;
}

function handler()
{
    if ((request.readyState == 4) && (request.status == 200))
    {
        return request.responseText;
    }
    else
    {
        alert('There was a problem with the request.');
        return;
    }
}

function names(method, file, get_var, data)
{
    request = start_request(handler);
    method = method.toUpperCase();

    if (method == 'POST')
    {
        request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        request.setRequestHeader("Content-length", get_var + '=' + data.length);
        request.setRequestHeader("Connection", "close");
    }

    request.open(method, file + '.php?' + get_var + '=' + data, true);
    request.send(null);
}

---

Mi serve fare una cosa in generale, in modo da avere un'elevata possibilità di personalizzazione.
Ora come ora usa una funzione per poter provare, ma vorrei che in futuro il rl contenuto che mi viene resitituito (responseText) venga visualizzato in modo diverso per ogni funzione che utilizzo.

Grazie :wink:

Citazione:

---

Originalmente inviato da biccheddu

Ora come ora usa una funzione per poter provare, ma vorrei che in futuro il rl contenuto che mi viene resitituito (responseText) venga visualizzato in modo diverso per ogni funzione che utilizzo.

---

In che senso? Tu hai una funzione (handler) che viene chiamata al completamento della richiesta HTTP. Puoi farle fare tutto quello che vuoi: basarsi sul contenuto ricevuto, chiamare un'altra funzione...

Mi serve avere una funzione GENERALE, cioè che faccia tutto quello che farei in tutte le funzioni utilizzate, per non riscrivere il codice, in questo caso:
start_request crea l'istanza.
handler controlla che l'header restitusica 200 e lo stato sia completamente inizializzato.
names è una delle tante funzioni che dovranno utilizzare sia start_request e handler.

Supponendo di non avere handler, dovrei riscrivere ogni volta quella parte di codice in ogni funziona che crea un'istanza!
Capito ora? :mrgeen:

Io però non capisco perché non funzioni...

Il tuo problema è principalmente questo: che le tue funzioni start_request e handler non condividono la variabile della richiesta.

La soluzione più semplice è quella di definire la funzione handler all'interno di start_request: in questo modo puoi accedere anche alla variabile che contiene l'oggetto della richiesta.

Se preferisci tenerla all'esterno, non puoi fare altro che passare come parametro lo stesso oggetto della richiesta. Nasce però un'altra difficoltà: onreadystatechange è infatti una funzione che non deve avere parametri. Ma a questo ovvii facilmente dichiarandola in questo modo:

Codice:

---

function start_request (handler_name)
{
  var start = new XMLHttpRequest (); // non preoccuparti, anche almeno IE7 dovrebbe capirlo...

  ...

  start.onreadystatechange = function () { handler_name (start); };
  return start;
}

function handler (req)
{
  if (req.readyState == 4 && req.status == 200)
  {
      // è andato tutto bene, procedi con l'AJAX!
  }
}

---

Stammi bene...

Ci ho pensato dopo aver postato che potevo integrare la funzione handler all'interno di start_request!

Mi sto incasinando non poco... Non riesco a capire bene come e dove posizionare alcune stringhe!

Ora ho questo, ma non funziona lo stesso:

Codice HTML:

---

<form name="f1">
    <input type="text" name="nome" id="nome" onkeyup="name()" value="" />
</form>
<div id="result">Inserisci le iniziali di un nome.</div>
<script language="javascript" type="text/javascript" src="ajax.js"></script>

---

Codice:

---

var myRequest = null;

function CreateXmlHttpReq()
{
        var xmlhttp = false;

        try
        {
                xmlhttp = new XMLHttpRequest();
        }
        catch(e)
        {
                try
                {
                        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch(e)
                {
                        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
        }

        if (xmlhttp === false)
        {
                alert('Giving up :( Cannot create an XMLHTTP instance');
                return false;
        }

        xmlhttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xmlhttp.onreadystatechange = function()
        {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                {
                        return xmlhttp;
                }
                else
                {
                        alert('There was a problem with the request.');
                        return:
                }
        }
}

function name()
{
        var nome = document.f1.nome.value;
        myRequest = CreateXmlHttpReq();       
        myRequest.open("GET","ajax.php?nome="+escape(nome));
        document.getElementById("result").innerHTML = myRequest.responseText;
        myRequest.send(null);
}

---

Allora... il tuo JavaScript dovrebbe essere scritto così:

Codice:

---

function name ()
{
  var xmlhttp = new XMLHttpRequest ();
  xmlhttp.onreadystatechange = function () {
      if (xmlhttp.readyState == 4)
      {
        if (xmlhttp.status == 200)
        {
            document.getElementById ('result').innerHTML = xmlhttp.responseText;
        }
        else
        {
            document.getElementById ('result').innerHTML = 'Ops... qualcosa non ha funzionato - Stato HTTP: ' + xmlhttp.status;
        }
      }
      else
      {
        // non è ancora arrivata risposta dal server... di solito qui puoi lasciare vuoto
      }
  };
  xmlhttp.open ('GET', 'ajax.php?nome=' + document.f1.nome.value);
  xmlhttp.send (null);
}

---

Se ti interessa lo spiegone, eccoti accontentato:
- la prima riga non fa altro che creare l'oggetto necessario ad interfacciarsi con il server, nient'altro
- dalla seconda riga in poi definisci la funzione di "cambio stato AJAX". I possibili stati sono cinque, numerati da 0 a 4: arrivati allo stadio 4 la richiesta è conclusa ed è possibile elaborarla
- il passo successivo (sempre all'interno della funzione di cambio stato) è quello di controllare se la richiesta è andata a buon fine. Si usano i codici di errore HTTP: 200 indica che è tutto andato a buon fine (se avessi 404, cosa significa?)
- accertata la conclusione a buon fine, puoi prelevare il risultato della richiesta (dovrebbe essere il solo codice HTML necessario a completare l'output già presente)
- dopo che hai definito la funzione di cambio stato, è il momento di lanciare la richiesta al server: con open() definisci le modalità (GET/POST) e l'URL a cui interfacciarti (c'è un terzo parametro opzionale che ti permette di scegliere se fare una richiesta sincrona o asincrona: è predefinita quella sincrona), e con send() effettui la richiesta vera e propria

Stammi bene...

Grazie infinite come sempre.

Ora, posso togliere, dalla funzione, le parti che andrebbero riscritte in tutte le altre funzioni che creerebbero l'oggetto? Cioè, alla fine mi servirebbe che la funzione, name in questo caso, abbia dentro esclusivamente *.responseText in modo da lavorare sull'outuput.
Spero sia stato chiaro e che si possa fare, altrimenti avrei righe di codice doppio nei sorgenti js, cosa che vorrei evitare.

PS: non voglio appoggiarmi a nessuno Ajax Framework (come jQuery, mooTools od altro), anche per un motivo di pesantezza. Ho un cms che si occupa di comprimere ed ottimizzare i file.js, quindi inserisco solo lo stresso neccessario, per evitare che la pagina diventi "pesante" a causa di codice inutilizzato.

:mrgreen: