Load Dinamico con AJAX

Programmazione - Javascript Visite: 6319

Articolo

 Il nostro scopo è quello di caricare dinamicamente, all'interno di un componente HTML come ad es. un DIV, un contenuto diverso (ma che deve sempre appartenere allo stesso dominio).

Tutto ciò lo si può fare con AJAX e con pochi semplici comandi.


La stessa cosa la si può fare utilizzando un IFRAME e mettendo nella parte SRC la URL da richiamare.

 

Leggi il resto del documento per accedere direttamente alla pagina di esempio.


Il codice AJAX è stato preso dal sito dynamicdrive.com qui.

Esempio completo:

<html>
<head>
<title>Test Load Dinamico con AJAX</title>
<head>Test Load Dinamico con AJAX</head>
<script type="text/javascript">
/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var bustcachevar = 0 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects = ""
//var rootdomain = "http://"+window.location.hostname
//alert(rootdomain);
var bustcacheparameter = ""

function ajaxpage(url, containerid){
    var page_request = false
    if (window.XMLHttpRequest) // if Mozilla, Safari etc
        page_request = new XMLHttpRequest()
    else if (window.ActiveXObject){ // if IE
        try {
        page_request = new ActiveXObject("Msxml2.XMLHTTP")
        }
        catch (e){
            try{
                page_request = new ActiveXObject("Microsoft.XMLHTTP")
            }
            catch (e){}
        }
    }
    else
        return false
       
    page_request.onreadystatechange=function(){
        loadpage(page_request, containerid)
    }
   
    if (bustcachevar) //if bust caching of external page
        bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()       
    page_request.open('GET', url+bustcacheparameter, true)
    page_request.send(null)
}

function loadpage(page_request, containerid){
    if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
        document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
    if (!document.getElementById)
        return

    for (i=0; i<arguments.length; i++){
        var file=arguments[i]
        var fileref=""
        if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
            if (file.indexOf(".js")!=-1){ //If object is a js file
                fileref=document.createElement('script')
                fileref.setAttribute("type","text/javascript");
                fileref.setAttribute("src", file);
            }
            else if (file.indexOf(".css")!=-1){ //If object is a css file
                fileref=document.createElement("link")
                fileref.setAttribute("rel", "stylesheet");
                fileref.setAttribute("type", "text/css");
                fileref.setAttribute("href", file);
            }
        }
        if (fileref!=""){
            document.getElementsByTagName("head").item(0).appendChild(fileref)
            loadedobjects+=file+" " //Remember this object as being already added to page
        }
    }
}
</script>
<body>
<a href="javascript:ajaxpage('/index.php', 'contentarea');">www.mauriziogiglio.netsons.org</a>
<div id="contentarea"></div>

</body>
</html>