AJAX timing issue. [Archive] - CodingForums.com

MikoLone

02-08-2006, 12:18 AM

I am trying to write a script that calls a function that asks for a php file to return some xhtml. I try to call this function 2 times but it only displays the last call. What is going on? I tried to slow the request by putting false at the end of the open("POST", url, false); part. but then I get no response. When i say true I only get one but sometimes I get 4. It is quite odd and I am lost as to what I should do about it. Here is the html/javascript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Server Information</title>
<script language="javascript" type="text/javascript">

function getOnWithIt(){
//notice that test is called twice here

test();

test();
}

function test(){
url = "test.php";
req = getXMLHTTPRequest();

req.onreadystatechange = function () {
if (req.readyState == 4 ) {
response = "";
response = req.responseText;

displayServerInfo(response, 'serverInfo');
return true;
}
return false;
}

req.open("POST", url, true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send(null);
}

function getXMLHTTPRequest() {
try {
var requester = new XMLHttpRequest();
}
catch (error) {
try {
var requester = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (error) {
return false;
}
}
return requester;
}

function displayServerInfo(html, div){
document.getElementById(div).innerHTML += html;
}

</script>

</head>

<body onload="getOnWithIt();">

<div id="serverInfo"></div>

</body>
</html>

This is what the php page looks like.

<?
$blah = '<p>blah</p>';

echo $blah;
?>

so the page when it loades should say:

blah

blah

What should I do to get this to work?

Thanks

A1ien51

02-08-2006, 04:08 PM

Your code is not Object Oriented because you are using global variables to hold the request object. This allows the second request overwrites the first request.

Look into a framework such as prototype (http://prototype.conio.net/)to do an Ajax Request. It has a great wrapper for making the call and you will not run into the problem. Or you could pick up my book and use the code in it.

Eric

MikoLone

02-08-2006, 08:48 PM

Thanks for the info. I figured out an easier way. I just make the sseperate request for each call. It works great.

Michael

Skyzyx

02-19-2006, 12:48 AM

You could significantly reduce your code by either using Prototype or moo.ajax (both are in my signature). Your code would be more efficient and less redundant.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Server Information</title>
<script language="javascript" type="text/javascript">

function getOnWithIt(){
test('test.php', 'serverInfo1');
test('test.php', 'serverInfo2');
}

function test(urlToRequest, elementToWriteTo){
var options = {
method:'get',
onComplete:function(response) {
$(elementToWriteTo).innerHTML=response.responseText;
}
};

ajax(urlToRequest, options); // If you're using moo.ajax
// Ajax.Request(urlToRequest, options); // If you're using Prototype
}
</script>

</head>

<body onload="getOnWithIt();">

<div id="serverInfo1"></div>
<div id="serverInfo2"></div>

</body>
</html>