[JS]Scrivere contenuto nella pag al click

ciao a tutti, ho un problema:
stò creando un sito e inizialmente avevo deciso di creare un iframe per dargli un pò più di plasticità, però ho pensato che alcuni browser non lo supportano (ho anche chiesto nel forum). Quindi ho deciso di creare uno script che cambi solo una parte della pagina, il contenuto, e che lo carichi da un file o da un xml, o cose del genere..., in poche parole io vorrei un effetto simile a questo:
http://toninosite.altervista.org/
cioè che non cambia la pagina ma solo il contenuto...come si fa? grazie a priori..ciao

Bisogna usare AJAX e xmlHttpRequest

Codice HTML:

---

<script type="text/javascript">
        <!--
                function ajaxCallback() {
                        try {
                                if (xmlHttpRequest.readystate == 4) {
                                        if (xmlHttpRequest.status == 200) {
                                                var text = xmlHttpRequest.responseText;
                                                var doc = xmlHttpRequest.responseXML;
                                                document.getElementById('content').innerHTML = text;
                                        }
                                        else {
                                                if (xmlHttpRequest.status == 404)
                                                        { alert('404: Not Found'); }
                                                else
                                                        if (xmlHttpRequest.status == 500)
                                                                { alert('500: Internal Server Error'); }
                                                        else
                                                                { alert(xmlHttpRequest.status + ': ' + xmlHttpRequest.statusText); }
                                        }
                                }
                                else {
                                        // In esecuzione
                                }
                        }
                        catch(e) {
                                alert('Errore in callback function: ' + e);
                        }
                }
               
                var xmlHttpRequest = makeXMLHttpRequest();
                if (!xmlHttpRequest) {
                        alert('Non è possibile utilizzare AJAX');
                }
                else {
                        xmlHttpRequest.onreadystatechange = ajaxCallback;
                        xmlHttpRequest.open('GET', 'pagina.html', true);
                        xmlHttpRequest.send(null);
                }
        //-->
        </script><div id="content"></div>

---

ho trovato questo e funziona, ora però vorrei fare che carica un file solo se si clicca su un a href , e che io faccio, per esempio:
javascript:ajaxCallback('src_del_file.html'); e che quindi mi carica quella pagina...come si fa? grazie ancora..ciao

Fai così:

Codice:

---

<script type="text/javascript">
        <!--
                function ajaxCallback(what) {
                        try {
                                if (xmlHttpRequest.readystate == 4) {
                                        if (xmlHttpRequest.status == 200) {
                                                var text = xmlHttpRequest.responseText;
                                                var doc = xmlHttpRequest.responseXML;
                                                document.getElementById('content').innerHTML = text;
                                        }
                                        else {
                                                if (xmlHttpRequest.status == 404)
                                                        { alert('404: Not Found'); }
                                                else
                                                        if (xmlHttpRequest.status == 500)
                                                                { alert('500: Internal Server Error'); }
                                                        else
                                                                { alert(xmlHttpRequest.status + ': ' + xmlHttpRequest.statusText); }
                                        }
                                }
                                else {
                                        // In esecuzione
                                }
                        }
                        catch(e) {
                                alert('Errore in callback function: ' + e);
                        }
                }
               
                var xmlHttpRequest = makeXMLHttpRequest();
                if (!xmlHttpRequest) {
                        alert('Non è possibile utilizzare AJAX');
                }
                else {
                        xmlHttpRequest.onreadystatechange = ajaxCallback;
                        xmlHttpRequest.open('GET', 'what', true);
                        xmlHttpRequest.send(null);
                }
        //-->
        </script><div id="content"></div>

---

In questo modo dovresti poter fare quel che vuoi :wink:

P.S. Usa il tasto edita!

uhm, pensa però a questo: è più facile che sia supportato un iframe rispetto al javascript, e ciò che scrivi con javascript non è assolutamente visibile se esso è disattivato - per l'iframe rimane almeno un link.

Ho creato questo script che per il mio sito funziona perfettamente.
Crea una pagina html e includi il seguente js:

Codice HTML:

---

function Pagina(Stringa)
{
    if (Stringa.length > 0)
    {
        var url = "./pagine.php?pagina=" + Stringa;
        XMLHTTP = RicavaBrowser(CambioStato);
        XMLHTTP.open("GET", url, true);
        XMLHTTP.send(null);
    }
    else
    {
        document.getElementById("principale").innerHTML = "";
    }
}

function CambioStato()
{
    if (XMLHTTP.readyState == 4)
    {
        var R = document.getElementById("principale");
        R.innerHTML = XMLHTTP.responseText;
    }
}

function RicavaBrowser(QualeBrowser)
{
    if (navigator.userAgent.indexOf("MSIE") != (-1))
    {
        var Classe = "Msxml2.XMLHTTP";
        if (navigator.appVersion.indexOf("MSIE 5.5") != (-1));
        {
            Classe = "Microsoft.XMLHTTP";
        }
        try
        {
            OggettoXMLHTTP = new ActiveXObject(Classe);
            OggettoXMLHTTP.onreadystatechange = QualeBrowser;
            return OggettoXMLHTTP;
        }
        catch(e)
        {
            alert("Errore: l'ActiveX non verrà eseguito!");
        }
    }
    else if (navigator.userAgent.indexOf("Mozilla") != (-1))
    {
        OggettoXMLHTTP = new XMLHttpRequest();
        OggettoXMLHTTP.onload = QualeBrowser;
        OggettoXMLHTTP.onerror = QualeBrowser;
        return OggettoXMLHTTP;
    }
    else
    {
        alert("Browser non abilitato");
    }
}

---

Po nella pagina html metti:

Codice HTML:

---

<div id="principale"></div>

---

E crea un file chiamato pagine.php dove fai uno switch della variabile GET pagina e stampi i contenuti delle pagine.
es.

Codice PHP:

---

switch($_GET[pagina]){
case info:
echo "informazioni";
break;
case forum:
echo "forum";
break;
// ecc...
}


---

Poi per linkare le varie pagine:

Codice HTML:

---

<a href="javascript:Pagina('nomepagina');">vai alla pagina</a>

---

Ciao!

Solo che così dovrebbe modificare un po di più...

ok, grazie mille e ciao :mrgreen: