Woodburn2006 Posted September 17, 2008 Share Posted September 17, 2008 i have an image ready to use as a loading image for when images are loading after an ajax request but as i am very new to javascript and ajax all of the examples i have read seem weird because they are all coded slightly differently. here is the code in my JS file: var xmlHttp function showPhoto(str) { if (str.length==0) { document.getElementById("txtHint").innerHTML="" return } xmlHttp = createXmlHttp() if (xmlHttp == null) { alert("Browser does not support HTTP Request"); return; } var url = "http://travelling.dw20.co.uk/AJAX/largephoto.php"; url += "?id=" + str; url += "&sid=" + Math.random(); xmlHttp.onreadystatechange = stateChanged; xmlHttp.open("GET", url, true) xmlHttp.send(null) } function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById("txtHint").innerHTML=xmlHttp.responseText } } function createXmlHttp() { var xmlHttp; try { //try the hard way because IE7 doesn't implement XMLHttpRequest() properly var xmlVersions = new Array('MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'); //iterate through the array until we get one that works for(var i = 0; i < xmlVersions.length && !xmlHttp; i++) { xmlHttp = new ActiveXObject(xmlVersions[i]); } } catch(e) { //try the easy way for the good browsers xmlHttp = new XMLHttpRequest(); } //return object (if we have one) or null return xmlHttp; } could anybody please advise me on how i would go about adding a loading image into this script? thanks alot in advance Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted September 17, 2008 Share Posted September 17, 2008 I think this would be pretty easy to do. In essence, you'll need to check the readyState of the XmlHttp object. Since a readyState of 1 means the server is loading the response, it makes sense to test against that. You can add it to your existing stateChanged function. function stateChanged() { if(xmlHttp.readyState == 1 || xmlHttp.readyState == "loading") { //display loading image } if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById("txtHint").innerHTML=xmlHttp.responseText } } Quote Link to comment Share on other sites More sharing options...
Woodburn2006 Posted September 17, 2008 Author Share Posted September 17, 2008 sorted, thanks alot, i just used this: function stateChanged() { if(xmlHttp.readyState == 1 || xmlHttp.readyState == "loading") { document.getElementById("txtHint").innerHTML="<img src='/images/ajax-loader.gif' border='0' alt='running' />"; } if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById("txtHint").innerHTML=xmlHttp.responseText } } cheers for that Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.