Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Provo, UT
    Posts
    142
    Thanks
    0
    Thanked 0 Times in 0 Posts

    AJAX timing issue.

    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

    Code:
    <!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.

    Code:
    <?
    $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
    I try to convince 'em that I am computer geek, but I just can't do it. Why? Oh why?

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    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 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
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    Provo, UT
    Posts
    142
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the info. I figured out an easier way. I just make the sseperate request for each call. It works great.

    Michael
    I try to convince 'em that I am computer geek, but I just can't do it. Why? Oh why?

  • #4
    Regular Coder
    Join Date
    Aug 2002
    Location
    Silicon Valley, CA
    Posts
    980
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Code:
    <!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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •