[pecky]

Hi just wondering whether i can Multi-AJAX in way - if you get me.

I have a thing i have made, it works with one function but then does not with two ajax request functions...

This is the layout for the ajax thingy i got

	$value = array
		(
			"id" => $_GET['pid']
		);
	$url = 'ajax/comment.php';
	$divname = 'commentsarea';
	$ajax 	-> Req($value, $url, $divname, "reply");

// I can use it a second time to create a second function
	$value = array
		(
			"id" => $_GET['pid'],
			"content" => "'+document.getElementById('contentbox').value+'"
		);
	$url = 'ajax/comment_submit.php';
	$divname = 'submitarea';
	$ajax 	-> Req($value, $url, $divname, "submit");

And it would output

 <script type="text/javascript">
 function requestObj() 
 {
 var reqObj;
 var browser = navigator.appName;
 if(browser == "Microsoft Internet Explorer"){
 reqObj = new ActiveXObject("Microsoft.XMLHTTP");
 }else{
 reqObj = new XMLHttpRequest();
 }
 return reqObj;
 }

 var http = requestObj();
 </script>
 <script type="text/javascript">
 function reply() {
 document.getElementById("commentsarea").innerHTML = "<p align='center'><img src='images/loader.gif' /></p>";
 http.open('get', 'ajax/comment.php?id=1&', true);
 http.onreadystatechange = handleResponse;
 http.send(null);
 }
 function handleResponse() {
 if(http.readyState == 4){
 var response = http.responseText;
 document.getElementById("commentsarea").innerHTML = response;
 var http = requestObj();

 }
 }
 </script>
 <script type="text/javascript">
 function submit() {
 document.getElementById("submitarea").innerHTML = "<p align='center'><img src='images/loader.gif' /></p>";
 http.open('get', 'ajax/comment_submit.php?id=1&content='+document.getElementById('contentbox').value+'&', true);
 http.onreadystatechange = handleResponse;
 http.send(null);
 }
 function handleResponse() {
 if(http.readyState == 4){
 var response = http.responseText;
 document.getElementById("submitarea").innerHTML = response;
 var http = requestObj();

 }
 }
 </script>

But though, it doesnt work? It only works if i had only one, like

	$value = array
		(
			"id" => $_GET['pid']
		);
	$url = 'ajax/comment.php';
	$divname = 'commentsarea';
	$ajax 	-> Req($value, $url, $divname, "reply");

Do i need another requestObj() or something? Please help - thanks

[ghilix]

using the same request object for multi ajax requests is problematic because you need to check the ready state of the last request before performing an other one and sometimes it's not 100% accurate, using a request object for each function is the the good solution and the best practice.

[pecky]

Aah right, i will try it anyway thanks

[ghilix]

you're welcome

[pecky]

Aah it wasnt quite what you suggested, but i spent nearly 20 minutes figuring it out any hoo

Basically, i generate a completely unique AJAX function name - as i figured out, you cant really have the same function name twice or more throughout a script.

My amazing code if your bothered to look at it quite simples if you ask me

function Req($array, $url, $divname, $a = 1)
		{
			// Prevar is predefined variable - such as an ID
			// To set a dynamic var such as a textbox USE THIS FORMAT '+document.getElementById('box').value+'
			// For multiple AJAX requests, change the $a to a different number when calling the function
			
			// If we are having multiple AJAX requests, we will need to generate a random requestObj ID
			$ran_reqObj = "f".md5(rand(0, 99999) * time() / rand(1, 99)); // Nice and random (requestObj)
			$ran_varhttp = "v".md5(rand(0, 99999) * time() / rand(1, 99)); // Nice and random (http)
			$ran_handleResponse = "v".md5(rand(0, 99999) * time() / rand(1, 99)); // Nice and random (handleResponse)
			
			$urlext = "?";
			foreach($array as $key => $value)
			{
				$urlext .= $key."=".$value."&";
			}
			echo '
				<script type="text/javascript">
					function '. $ran_reqObj .'() 
					{
							var reqObj;
							var browser = navigator.appName;
							if(browser == "Microsoft Internet Explorer"){
									reqObj = new ActiveXObject("Microsoft.XMLHTTP");
							}else{
									reqObj = new XMLHttpRequest();
							}
							return reqObj;
					}

					var '. $ran_varhttp .' = '. $ran_reqObj .'();
					
					function '.$a.'() {
						document.getElementById("'.$divname.'").innerHTML = "<p align=\'center\'><img src=\'images/loader.gif\' /></p>";
						'. $ran_varhttp .'.open(\'get\', \''.$url.$urlext.'\', true);
						'. $ran_varhttp .'.onreadystatechange = '. $ran_handleResponse .';
						'. $ran_varhttp .'.send(null);
					}
					function '. $ran_handleResponse .'() {
						if('. $ran_varhttp .'.readyState == 4){
							var response = '. $ran_varhttp .'.responseText;
							document.getElementById("'.$divname.'").innerHTML = response;
						}
					}
				</script>';
			
			return true;
		}

[ghilix]

hehe, Its the same as creating multiple request objects the only difference is that your function create them automatically instead of having you do that manually.
This would be helpful if you need many ajax requests at the same time.