Starting out with xmlHttp

[ShawnMolloy]

I wrote this fairly straightfoward ajax call, but the http.readyState never seems to reach 4 or http.status is never 200.

There are two function calls, neither of them work:

var http = createRequestObject();
 function createRequestObject() 
     {
           var xmlhttp;
	 try 
                 { 
                    xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); 
                 }
	  catch(e) 
                 {
	    try { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
	    catch(f) { xmlhttp=null; }
	    }
	        if(!xmlhttp&&typeof XMLHttpRequest!="undefined") 
                        {
	  	   xmlhttp=new XMLHttpRequest();
	           }
		   return  xmlhttp;
 }
 
function sndRating(idnum,rateval) 
  {
	var dvelement = document.getElementById('dv'+idnum);
             dvelement.innerHTML = "<img src='[URL unfurl="true"]http://wisetopic.com/_inc/starrating/progressimgred.gif'>";[/URL]
            try
              {
                 http.open('GET', '[URL unfurl="true"]http://localhost/wt_dev/_inc/starrating/ratingprocess.aspx?id='+idnum+'&rateval='+rateval,[/URL] true);
                 http.onreadystatechange = handleResponseText;
	    http.send(null);
	 }
	    catch(e){}
	    finally{}
 }

function sndComment(idnum,comment) 
  {
	var dvelement = document.getElementById('dv_Comment');
             dvelement.innerHTML = "<br><div style='color: black; padding: 10px; margin: 10px; font-color: black;'><br>Adding Comment<br><img src='[URL unfurl="true"]http://wisetopic.com/_inc/starrating/progressimgred.gif'></div>";[/URL]
            try
              {
                 http.open('GET', '[URL unfurl="true"]http://localhost/wt_dev/settings/video/addComment.aspx?id='+idnum+'&comment='+comment,[/URL] true);
                 http.onreadystatechange = handleCommentResponse;
	    http.send(null);
	 }
	    catch(e){}
	    finally{}
 } 

function handleCommentResponse()
{
    if((http.readyState == 4)&& (http.status == 200))
    { 
      var dvelement = document.getElementById('dv_Comment'); 
      dvelement.innerHTML = "Your comment has been added."; 
   } 
} 

 
function handleResponseText() 
  {
     try
         {
             if((http.readyState == 4)&& (http.status == 200))
                {
    	          var response = http.responseText;
                       var update = new Array();

                    if(response.indexOf('|') != -1) 
                       {
                          update = response.split('|');
                          var drelement = document.getElementById('dv'+update[0]);
                          var voteres = document.getElementById('vot'+update[0]);
                          var totalvote = document.getElementById('tv'+update[0]);
                          var starimg = document.getElementById('star'+update[0]);
                          drelement.style.display ='none';
                          voteres.innerHTML = update[2];
                          totalvote.innerHTML = update[3];
                          starimg.innerHTML = update[4].toString();
             }
	        }
        }
	catch(e){alert("an error occured");}
	finally{}
}

I downloaded FIREBUG and its a great debugging tool but I can't figure out how to inspect the incomoing and outgoing http calls.

Thank yoU!!


Shawn Molloy
Seattle, WA

 

[BillyRayPreachersSon]

If you make sure you're in the "console" tab, then click on "Options" and check "Show XMLHttpRequests".

Both incoming annd outgoiing data will now show up in the console.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BabyJeffy]

Since you have Firebug... try this change to your code (and watch the console tab in Firebug):

function handleCommentResponse()
{
    [!]console.info('In handleCommentResonse function...');
    console.log('http.readyState=' + http.readyState);
    console.log('http. status =' + http. status);[/!]
    if((http.readyState == 4)&& (http.status == 200))
    { 
      var dvelement = document.getElementById('dv_Comment'); 
      [!]console.log(dvelement);[/!]
      dvelement.innerHTML = "Your comment has been added."; 
   } 
}

It will give you feedback on what is going on as each state change happens.

It's not immediately obvious what the problem is - since everything looks like it ought to work for you. Follow Dan's advice and check out the console spam (you can turn down the arrowheads to reveal details on the response etc).

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094

 

[BillyRayPreachersSon]

Shawn,

Did you solve your problem in the end?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[ShawnMolloy]

Hey guys!

Thanks for your help. Yes, I did figure out the issue. It was just simple syntacical problems in various locations within the script and the response page. Learning to debug these issues was the difficult part; the http object does all the hard work for ya and using FireBug is essential. Ajax is a really amazing technology; combined with ASP.NET I can see potential to do some REALLY cool stuff! I love it!

Here is the page with the completed 'ajax' code:

http://wisetopic.com/video/video.aspx?id=4

Thanks again for your help.



Shawn Molloy
Seattle, WA