PDA

View Full Version : js activates php file fails in a loop



cdzhang
03-29-2012, 08:55 AM
I used the js function httpRequest to activate php files.However, when I use it in a loop, it works only for the last loop, can anyone help me with this?
I had two files:try.php and try1.php
/******try.php******/
<script type='text/javascript'>
function httpRequest(reqType,url,asynch,respHandle){
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
} else if(window.ActiveXObject){
request = new ActiveXObject("Msxml2.XMLHTTP");
if(! request){
request = new ActiveXObject("Microsoft.XMLHTTP");
}
}

if(request){
if(reqType.toLowerCase() != "post") {
initReq(reqType,url,asynch,respHandle);
} else {
var args = arguments[4];
if(args != null && args.length > 0) {
initReq(reqType,url,asynch,respHandle,args);
}
}
} else {
alert("your brower doesn't support this request!");
}
}

function initReq(reqType,url,bool,respHandle){
try{
request.onreadystatechange =respHandle;
request.open(reqType,url,bool);
if(reqType.toLowerCase () == "post"){
request.setRequestHeader("Content-Type","application/x-www-form-unlencoded;charset=UTF-8");
request.send(arguments[4]);
} else {
request.send(null);
}
} catch ( errv ){
alert("cann't connect to server" +
"error message: " + errv.message);
}
}
</script>



<script type='text/javascript'>
var numarr;
function updateStatus(num){
var _url='try1.php?id='+num;
httpRequest('GET',_url,true,changeDisplay);
}
function changeDisplay(){
numarr=request.responseText;
document.getElementById('id_'+numarr).innerHTML='changeDisplay';
}
</script>
<?php
$num=array(0,1,2,3,4,5);
foreach($num as $value){
?>
<div id='id_<?php echo $value;?>'>
this is <?php echo $value;?>;
</div>

<script type='text/javascript'>
updateStatus('<?php echo $value; ?>');
</script>
<?php }?>
/***try1.php***/
<?php
echo $_GET['id'];
/************/
the result is:
/***result***/
this is 0;
this is 1;
this is 2;
this is 3;
this is 4;
changeDisplay

However, the expected result is:
changeDisplay
changeDisplay
changeDisplay
changeDisplay
changeDisplay
changeDisplay

devnull69
03-29-2012, 03:01 PM
So this is the "beautified" version of your Javascript code (as seen in the browser). Please use the [ code ] and [ /code ] tags (with no spaces) or the octathorpe # symbol above the input text area next time you post your code here.



function httpRequest(reqType,url,asynch,respHandle){
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
} else if(window.ActiveXObject){
request = new ActiveXObject("Msxml2.XMLHTTP");
if(! request){
request = new ActiveXObject("Microsoft.XMLHTTP");
}
}

if(request){
if(reqType.toLowerCase() != "post") {
initReq(reqType,url,asynch,respHandle);
} else {
var args = arguments[4];
if(args != null && args.length > 0) {
initReq(reqType,url,asynch,respHandle,args);
}
}
} else {
alert("your brower doesn't support this request!");
}
}

function initReq(reqType,url,bool,respHandle){
try{
request.onreadystatechange =respHandle;
request.open(reqType,url,bool);
if(reqType.toLowerCase () == "post"){
request.setRequestHeader("Content-Type","application/x-www-form-unlencoded;charset=UTF-8");
request.send(arguments[4]);
} else {
request.send(null);
}
} catch ( errv ){
alert("cann't connect to server" +
"error message: " + errv.message);
}
}

var numarr;

function updateStatus(num){
var _url='try1.php?id='+num;
httpRequest('GET',_url,true,changeDisplay);
}

function changeDisplay(){
numarr=request.responseText;
document.getElementById('id_'+numarr).innerHTML='changeDisplay';
}

updateStatus('0');
updateStatus('1');
updateStatus('2');
updateStatus('3');
updateStatus('4');
updateStatus('5');


So, you are calling the updateStatus() function 6 times in a row. updateStatus starts the httpRequest() function which starts the initReq() function which starts an Ajax request. Your "async" parameter is true, so the Ajax requests are asynchronous. And that's where's the crux of the matter.

Asynchronous means: The normal Javascript program flow continues while(!) the request is still running. So you immediately start a new request and a new one and a new one and so forth and only the last one has time to finish.

That's the reason why you cannot put Ajax request into a "solid loop" like that. If you want to loop Ajax requests, you have to "loosen" the loop so that you only go to the next step of the loop after the previous one finishes.

onreadystatechange is the method being called on each request status change. If readyState==4 you can start a request for the next loop