AJAX function to retrieve content from the server
You will need to download waiting.gif image file. -
- Right click and select "Save Image As..".
You can have this function embedded using <script> tags between the <head> tags of your document or in a separate javascript file.
|
function getContent(page, params, elementid, waitmsg){ //params has to have following format //i.e.: c=1&id=3.... //page is the server side script. include full path //i.e. ../scripts/myscript.php
//Clear our fetching variable var xmlhttp=false; //Try to create active x object try { xmlhttp = new ActiveXObject('Msxml2.XMLHTTP'); } catch (e) { try { xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); } catch (E) { xmlhttp = false; } } if (!xmlhttp && typeof XMLHttpRequest!='undefined') { xmlhttp = new XMLHttpRequest(); }
//This is the path to the PHP file on the server var file = page+params;
//Open the file through GET, and add the page we want to retrieve as a GET variable xmlhttp.open('GET', file, true);
xmlhttp.onreadystatechange=function() { if(xmlhttp.readyState == 1){ //Display waiting image and message while content loads. //Make sure you have the corect path for the image document.getElementById(elementid).innerHTML = "<p><img src='images/waiting.gif' align='middle'> Please wait... <br />"+waitmsg+ "</p>" ;
//Check if it is ready to recieve data }else if(xmlhttp.readyState==4) { //Make sure there is something in the content variable var content = xmlhttp.responseText;
//The content data which has been retrieved if( content ){ //Change the inner content of your div to the newly retrieved content document.getElementById(elementid).innerHTML = content; } } } //Nullify the XMLHttpRequest xmlhttp.send(null) return; } |
Usage
Call the function using link tag
<a href="javascript:getContent('../page.php', '?li=info', 'info','')">Info</a>