Navigazione in Ajax

**sciueferrara** · 05-07-2010, 19:01

Salve a tutti, volevo chiedervi come realizzare un semplice sistema di navigazione dei contenuti in Ajax.
Con l'aiuto di un utente, ho realizzato questa bozza che comunque sembra non funzionare...

codice:

<HTML>
<BODY>

<script>
		function assegnaXMLHttpRequest() {
			var
				XHR = null,
				browserUtente = navigator.userAgent.toUpperCase();
			if(typeof(XMLHttpRequest) === "function" || typeof(XMLHttpRequest) === "object")
				XHR = new XMLHttpRequest();
			else if(window.ActiveXObject && browserUtente.indexOf("MSIE 4") < 0) {
				if(browserUtente.indexOf("MSIE 5") < 0)
					XHR = new ActiveXObject("Msxml2.XMLHTTP");
				else
					XHR = new ActiveXObject("Microsoft.XMLHTTP");
			}
			return XHR;
		}
		
		
function getVal(param){
	var req = assegnaXMLHttpRequest();
	req.open("GET", param, false);
	req.send(null);
	document.geElementById('myid').innerHTML=req.responseText;
             return false;
}
</script>



<div id="myid">Prova. Questo è un link</div>
<div style="height:30px;width:100%;position: absolute;bottom:0;left:0;background-color:black;"></div>

</BODY>
</HTML>

Ma non sembra funzionare, ovvero al click sul link la pagina cambia totalmente, il contenuto non cambia solo nel div myid... sapete aiutarmi?

**sciueferrara** · 05-07-2010, 19:31

Ho provato anche con questo script trovato su un sito, ma non mi convince molto, anche perché bisogna caricare ogni volta il css e tornando indietro nella pagina ritorno proprio all'inizio, non all'ultima pagina visitata...

codice:

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="AlterVista - Editor HTML">
<TITLE>Ajax2</TITLE>

<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=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
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>
</HEAD>
<BODY>

<div id="contentarea">test di link</div>
<div style="height:30px;width:100%;position: absolute;position:fixed;bottom:0;left:0;background-color:black;"></div>

</BODY>
</HTML>

**cavicchiandrea** · 05-07-2010, 20:27

Secondo me cosi fai + fatica, prima operazione capire come funziona ajax leggendo qui (guida ajax) poi integrarlo nelle proprie pagine ricordandoti che ajax prevalentemente ha lo scopo di richiedere piccole parti (blocchi) al server non intere pagine che rallenterebbero il caricamento rendendo quasi nulli i benefici, una volta capita la logica potresti espandere le tue conoscenze utilizzando jquey/mootools framework nati per migliorare/aiutare ajax e i contenuti.
saluti.

**lucavizzi** · 05-07-2010, 21:50

nella funzione getVal hai scritto:
document.geElementById('myid').innerHTML=req.respo nseText;
invece di
document.getElementById('myid').innerHTML=req.resp onseText;

edit:
l'ho testato con la correzione e funziona perfettamete

**sciueferrara** · 05-07-2010, 22:03

Ahah

Si.. ora funziona.. ma non viene caricato il Css...

**lucavizzi** · 05-07-2010, 23:54

il css mettilo nella pagina "principale", formatterà anche le parti che inserisci con ajax.

Discussione: Navigazione in Ajax

Strumenti discussione

Ricerca discussione

Visualizza

Navigazione in Ajax

Permessi di invio