27 August 2008
simple mobile ajax that works with most of the new mobile phones
i use ajax function below that works with almost all new mobile phones to create better user exprience on my mobile sites.
--------------------------------------
/************************************************************\
*
\************************************************************/
function toggleBox(divId, DivState) // 1 visible, 0 hidden
{
var objToggle = document.layers ? document.layers[divId] : document.getElementById ? document.getElementById(divId).style : document.all[divId].style;
objToggle.display = document.layers ? (DivState ? "show" : "hide") : (DivState ? "block" : "none");
}
/************************************************************\
*
\************************************************************/
function ajaxRequest(mydiv, myloadingdiv, url)
{
var ajaxRequestObject = false;
try
{
ajaxRequestObject = new XMLHttpRequest();
}
catch(err1)
{
try
{
ajaxRequestObject = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(err2)
{
try
{
ajaxRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(err3)
{
document.getElementById(mydiv).innerHTML = 'No ajax support';
}
}
}
ajaxRequestObject.open('GET', url, true);
ajaxRequestObject.setRequestHeader('Content-Type', 'text/html');
ajaxRequestObject.onreadystatechange = function()
{
if(ajaxRequestObject.readyState == 4)
{
if(ajaxRequestObject.status==200)
{
toggleBox(myloadingdiv, 0);
document.getElementById(mydiv).innerHTML = ajaxRequestObject.responseText;
}
else
{
document.getElementById(mydiv).innerHTML = 'Could not retrieve data';
}
}
else
{
toggleBox(myloadingdiv, 1);
}
};
ajaxRequestObject.send();
}
-----------------------------------------------------
you call the function like:
--------------------------------------
/************************************************************\
*
\************************************************************/
function toggleBox(divId, DivState) // 1 visible, 0 hidden
{
var objToggle = document.layers ? document.layers[divId] : document.getElementById ? document.getElementById(divId).style : document.all[divId].style;
objToggle.display = document.layers ? (DivState ? "show" : "hide") : (DivState ? "block" : "none");
}
/************************************************************\
*
\************************************************************/
function ajaxRequest(mydiv, myloadingdiv, url)
{
var ajaxRequestObject = false;
try
{
ajaxRequestObject = new XMLHttpRequest();
}
catch(err1)
{
try
{
ajaxRequestObject = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(err2)
{
try
{
ajaxRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(err3)
{
document.getElementById(mydiv).innerHTML = 'No ajax support';
}
}
}
ajaxRequestObject.open('GET', url, true);
ajaxRequestObject.setRequestHeader('Content-Type', 'text/html');
ajaxRequestObject.onreadystatechange = function()
{
if(ajaxRequestObject.readyState == 4)
{
if(ajaxRequestObject.status==200)
{
toggleBox(myloadingdiv, 0);
document.getElementById(mydiv).innerHTML = ajaxRequestObject.responseText;
}
else
{
document.getElementById(mydiv).innerHTML = 'Could not retrieve data';
}
}
else
{
toggleBox(myloadingdiv, 1);
}
};
ajaxRequestObject.send();
}
-----------------------------------------------------
you call the function like:
<a href="javascript:ajaxRequest('idofresultdiv','idofloadingindicatordiv','url.asp')">ajax</a>
Subscribe to Posts [Atom]
