Menu
I can use the following script to load a text file
using the asynchronous AJAX function.
I found it from a reference on this forum and it works well.
I wanted to delay until the entire text file is loaded
so that I can process the loaded information further.
I thought I should be able to use the ‘readyState’
to populate a progress bar. I understand that the text
file should be pretty large or the display doesn’t change much.
The progress bar was just something to do while the text file loaded.
The problem I’m having is that if I don’t put the ‘alert’ message
in the delay loop logic,
the script never changes the ‘CurrentReadyState’ flag to ‘4’ (I think)
so that the processing can proceed.
With the ‘alert’ all works as expected and I can process the loaded information.
Without the ‘alert’, the script times out.
? Any one have a recommendation or am I just wrong with my intended implementation of this AJAX attempt?
Here’s the script (just substitute a text file to load)
[code=php]
<html>
<head>
<META Http-Equiv=”Cache-Control” Content=”no-cache”>
<META Http-Equiv=”Pragma” Content=”no-cache”>
<META Http-Equiv=”Expires” Content=”0″>
<title>AJAX status during load</title>
<script type=”text/javascript”>
// From: http://www.w3schools.com/ajax/ajax_serverscript.asp
var ReadyStateFlag = 0;
var CurrentReadyState = 0;
function ajaxFunction(filename,storeTo) {
var xmlHttp;
try { // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e) { // Internet Explorer
try { xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”); }
catch (e) {
try { xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”); }
catch (e) {
alert(“Your browser does not support AJAX!”);
return false;
}
}
}
xmlHttp.onreadystatechange=function() {
// var CurrentReadyState = xmlHttp.readyState;
CurrentReadyState = xmlHttp.readyState;
if (CurrentReadyState==4) {
document.getElementById(storeTo).value=xmlHttp.responseText;
ReadyStateFlag = 4;
}
}
xmlHttp.open(“GET”,filename,true);
xmlHttp.send(null);
}
function Retrieve() {
while (ReadyStateFlag != 4) {
document.getElementById(‘progress’).innerHTML = ‘Progress: ‘+’XXXX’.substring(0,CurrentReadyState);
// remove following ‘alert’ and script end up timing out and not loading text file
// alert(‘Loading: ‘+CurrentReadyState);
}
document.getElementById(‘progress’).innerHTML = ‘Progress: ‘+’XXXX’.substring(0,CurrentReadyState);
}
function CollectInfo(fromArea,toArea) {
ajaxFunction(fromArea,toArea);
Retrieve();
ReadyStateFlag = 0;
}
</script>
</head>
<body>
<center>
<h1> AJAX test load </h1>
<a href=”javascript:void(0)”
onClick=”CollectInfo(‘BQ200701.txt’,’TxtInfo’)”>Load text file</a>
<!– Change ‘BQ200701.txt’ to your own text file name for testing purposes –>
<br /><span id=”progress”></span>
<br />
<textarea id=”TxtInfo” rows=”10″ cols=”80″></textarea>
</center>
</body>
</html>