ajax: want to handle events in separate functions

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

ajax: want to handle events in separate functions

Post by raghavan20 »

feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


as we all know when the xmlhttp goes to different states, it calls the function assigned to onreadystatechange and we check for state 4. i do not want to write all client side rendering logic inside this one function. 

for ex: if i want to generate xml and display it in a div named output, i do not really want to write document.getElementById('output').innerHTML inside the function for onreadystatechange. instead, i might want to have a function called generateXML() which will handle client side logic.
[syntax="javascript"]
		function generateXML(){		
			var output;
			output = sndReq( 'get', 'thisisraghavan.com/misc/links.php?action=generateXML',  'generateXML', '' );
    		        document.getElementById( 'output' ).innerHTML = output;
		}
this function will call core ajax function to get output from target php page. somehow, the core js script should be able to give back the http responseText to function generateXML() and this function can take care of displaying the result appropriately in the page.

I could not make this work. I will attach the code of what I tried. I have now put two links in the page, http://thisisraghavan.com/misc/temp1.php. The first link tries to do the same work elaborated in the way i wanted and obviously it does not work for some reason. The second link tries to do the client side logic inside the function assigned for onreadystatechange and obviously it works.

so please help me to change the code so that it works in the way i want to. or if there are any common solutions available to this problem, please let me know.

the code for entire page

Code: Select all


<html>
	<head>
		<script type="text/javascript">
		
			var http = createRequestObject();
			
			//create xmlHTTP obj
			function createRequestObject() {
			    var ro;
			    var browser = navigator.appName;
			    if(browser == "Microsoft Internet Explorer"){
			        ro = new ActiveXObject("Microsoft.XMLHTTP");
			    }else{
			        ro = new XMLHttpRequest();
			    }
			    return ro;
			}



		
		function sndReq(sendMethod, url, event, parameters) {
			
			alert( 'sendMethod: ' + sendMethod + ' url: ' + url + ' event: ' + event );
			//informToWait( 'AJAX Message: Please wait until content loads ...' );
		    http.open( sendMethod, 'http://' + url, true );
		    if( sendMethod == 'post' ){
				http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
				http.setRequestHeader("Content-length", parameters.length);
				http.setRequestHeader("Connection", "close");
				http.send(parameters);
		    }
		    
		    
		    http.onreadystatechange = function(){
		      //alert( 'http state: ' + http.readyState + 'event: ' + event );
			  if(http.readyState==4){
			    	if( event == 'generateXML' ){
			    		alert( 'generateXML event matched' );
			    		//document.getElementById( 'output' ).innerHTML = http.responseText;
			    		return (http.responseText);		
			    	}else if( event == 'generateXML2' ){
			    		alert( 'generateXML2 event matched' );
			    		document.getElementById( 'output' ).innerHTML = http.responseText;
			    	}
			    }
			  }
		    http.send(null);
		    
		}			
			

		function generateXML(){		
			var output;
			output = sndReq( 'get', 'thisisraghavan.com/misc/links.php?action=generateXML',  'generateXML', '' );
    		document.getElementById( 'output' ).innerHTML = output;
		}
		
		function handleXML(){
			sndReq( 'get', 'thisisraghavan.com/misc/links.php?action=generateXML',  'generateXML2', '' );
		}
		
		</script>
	</head>
<body>


	<a href = "javascript:generateXML()">get XML</a><br />
	<a href = "javascript:handleXML()">get XML2</a>
<div id = 'output'></div>


</body>
</html>


feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
Post Reply