Dynamic Ajax Content - dynamiczne ładowanie zawartości strony

Skrypt ten wykorzystuke Ajax do ładowania zewnętrznych stron do Div-ów czyli do określonego miejsca na stronie bez konieczności przeładowania przeglądarki lub użycia ramek. Jeżeli zewnętrzne strony nie odwołują się do żadnych zewnętrznych plików .css lub .js skrypt może je ładować ilekroć tego zażądamy.

Z tąd możemy pobrać cały skrypt w formie gotowe demo oraz zobaczyć jak to działa i wygląda na stronie autora TUTAJ

Z tego przykładu widzimy że tak wykorzystując Ajax - można zbudować dynamiczną stronę www

Oto kod do sekcji 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=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>

Przykład deklaracji Linka

<a href="javascript:ajaxpage('test.htm', 'contentarea');">test</a>  
<div id="contentarea"></div>
 
<script type="text/javascript">  
ajaxpage('test.htm', 'rightcolumn') //load "test.htm" into "rightcolumn" DIV  
</script>

Odwoładnie do bezwzględnego adresu na serwerze:

<a href="javascript:ajaxpage(rootdomain+'/mydir/index.htm', 'contentarea');">test</a>  
<div id="contentarea"></div>

Przykład zastosowania dodatkowo rozwijanego menu:

<script type="text/javascript">  
/***Combo Menu Load Ajax snippet**/  
function ajaxcombo(selectobjID, loadarea){  
var selectobj=document.getElementById? document.getElementById(selectobjID) : ""  
if (selectobj!="" && selectobj.options[selectobj.selectedIndex].value!="")  
ajaxpage(selectobj.options[selectobj.selectedIndex].value, loadarea)  }  
</script>    

<form>  
<select id="ajaxmenu" size="1">  
<option value="page1.htm">Page 1</option>  
<option value="page2.htm">Page 2</option>  
<option value="subdirectory/page3.htm">Page 3</option>  
</select>  
<input type="button" onClick="ajaxcombo('ajaxmenu', 'contentarea')" value="Go" />  
</form>    

<div id="contentarea"></div>

gdzie linki do Page 1 i Page 2 są względną ścieżką do plików, które muszą się załadować. A jeżeli potrzebujemy do tego rozwijanego menu to wystarczy zmodyfikować funkcję "ajaxpage()"

ajaxpage(rootdomain+"/"+selectobj.options[selectobj.selectedIndex].value, loadarea)

W finalnej formie całość może wyglądać tak :

<form>  
<select id="ajaxmenu" size="1" onChange="ajaxcombo('ajaxmenu', 'contentarea')">  
<option value="">Select A file to load</option>  
<option value="page1.htm">Page 1</option>  
<option value="page2.htm">Page 2</option>  
<option value="subdirectory/page3.htm">Page 3</option>  
</select>  
</form>

I jeszcze kod do załadowania plików .css i .js

<a href="javascript:ajaxpage('test.htm', 'contentarea'); loadobjs('external.css', 'feature.js')">test</a>
<div id="contentarea"></div>		 
loadobjs('external.css') //load one CSS file  
loadobjs('external.css', 'external2.css', 'feature.js') //load 2 CSS files & 1 JS file  
loadobjs('feature.js', 'feature2.js', 'feature3.js') //load 3 JS files

Download all the files - sciagnij wszystkie pliki

Popularne Artykuly

Najnowsze Artykuły