readyState looping?

Question

aosmith 0 Newbie Poster

15 Years Ago

I'm having an issues with this script from my own debugging it appears that the readyState is doing the following
1 ... 4 ... 1 ... 4
the second time it appears not to have any response so I end up seeing my content shortly (if all my debugging alerts are on) but it then dissapears when the ready state jumps to 4 for the second time. I have a feeling there is something very simple that I'm missing but it's been a long week for me

//Begin AJAX
    //Browser Support Code
    function goToPage(loc)
    {
       var ajaxRequest;
       try
       {
          // Opera 8.0+, Firefox, Safari
          ajaxRequest = new XMLHttpRequest();
          alert("ajaxRequest created!");
       }
       catch (e)
       {
          // Internet Explorer Browsers
          try
          {
             ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
          }
          catch (e)
          {
             try
             {
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
             }
             catch (e)
             {
                // Something went wrong
                alert("Your browser broke!");
                return false;
             }
          }
       }
       // Create a function that will receive data sent from the server
       ajaxRequest.onreadystatechange = function(loc)
       {
          if(ajaxRequest.readyState == 4)
          {
             if(ajaxRequest.status == 200 || ajaxRequest.status == 304)
             {
                document.getElementById('greenBox').innerHTML = ajaxRequest.responseText;
               
             }
          }
       }
       //contruct url
       var url = "pageserver.php?loc=" + loc
       ajaxRequest.open("GET", url, true);
       ajaxRequest.send(null);
    }

pageserver.php

<?php

    //Begin frame
    /*
    if ($_GET['loc'] == "")
    {
       $textRight = "";
       $textLeft = "";
       echo encap($textRight, $textLeft);
    }
    */
    require_once("inc/dbinfo.inc");

    if ($_GET['loc'] == "home")
    {
       $textRight = '##############################################';
       $textLeft = '###############################################';
       echo encap($textLeft, $textRight);
    }

    if ($_GET['loc'] == "register")
    {
       $textRight = '##############';
       $textLeft = '################';
       echo encap($textLeft, $textRight);
    }

    if ($_GET['loc'] == "browse")
    {
       $query = "######################";
       $result = mysql_query($query);
       for($i=0; $i > 10; $i++)
       {
          $array = mysql_fetch_assoc($result);
          if ($i == 0)
          {
             $textRight = #########################;
             $textLeft = ######################;
          }
          else if ($i > 0)
          {
             $textRight = #############################################;
             $textLeft = ##############################################;
          }
       echo encap($textLeft, $textRight);
       }
    }

    if ($_GET['loc'] == "about")
    {
       $textRight = '############################';
       $textLeft = '#############################';
       echo encap($textLeft, $textRight);
    }

    if ($_GET['loc'] == "bid")
    {
       if (!$_GET['id'])
       {
          //error
       }
       else if ($_GET['id'])
       {
          $id = $_GET['id'];
          $query = "#########################";
          $result = mysql_query($query);
          $array = mysql_fetch_assoc($result);
       }
       
       echo encap($textLeft, $textRight);
    }
    function encap($textLeft, $textRight)
    {
       return ('<span id="leftBox" class="leftBox">'.$textLeft.'</span><span id="rightBox" class="rightBox">'.$textRight.'</span>');
    }
    ?>

javascript

3 Contributors
10 Replies
167 Views
2 Weeks Discussion Span
Latest Post 15 Years Ago Latest Post by aosmith

essential 84 Posting Shark

15 Years Ago

Hi aosmith,

your code looks fine to me and maybe what it needs is a little adjustment.

Please don't get confused by the lines that i have implemented on this demo, my intention is to provide better support in AJAX handling, no matter what version of browsers that may come to handle it. You can just concentrate the whole thing that is inside the request handler function and forget about the rest.

Here's the code for the demo:

<script type="text/javascript">
// <![CDATA[

var ie = (( !!document.all && !!!document.getElementById ) ? 1 : 0 ); // Checks whether it is an IE based browser or not.

// Request Handler 
   var handleMyRequest = function() {

   var seq = {
   4 : "complete",
   complete : 4 };   
   if ( seq[ this.readyState ] ) { // Request state my hold (STRING/INTEGER) value.
    if ( this.status === 200 || this.status === 304 ) { /* The request status handling can be turned off when you are working off-line. */
         (( ie ) ? document.all.greenBox : document.getElementById( "greenBox" )).innerHTML = this.responseText; 
      } 
   } 
};

// Request Builder
   var XHR = function( method, url, callback ) {
   this.createRequest = null;
   this.xml = 0;
   this.method = method || "GET";
   this.url = url || null;
   this.callback = callback || null;
   if ( arguments.length < 3 ) {
         return false;
   } this.xmlDoc = ( function() {
      try {
         if ( !ie ) {
            this.xml = new XMLHttpRequest();
         } else {
            try {
            var client = [ "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
            for ( var i = 0; i < client.length; ++i ) {
               if ( new ActiveXObject( client[ i ] )) {
                  this.xml = new ActiveXObject( client[ i ] );
                  break;
               }
            }
            } catch( e ) {
               this.xml = 0;
            }
         }
      } catch( er ) {
         if ( "createRequest" in window ) 
            this.xml = createRequest();
         else
            this.xml = 0;
      } return (( this.xml ) ? this.xml : 0 );
   } )();
   if ( this.xmlDoc ) {
      this.createRequest = ( function( xhr, callback, url, method ) {
         (( "overrideMimeType" in xhr ) ? xhr.overrideMimeType("text/xml") : xhr );
         xhr.onreadystatechange = callback;
         xhr.open( method, encodeURI( url ), true );
         (( method === "POST" && "setRequestHeader" in xhr ) ? xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8;") : xhr );
         xhr.send((( method === "POST" ) ? " " : null )); 
      } )( this.xmlDoc, this.callback, this.url, this.method );
   } return this.createRequest;
}; onload = function() {
var loc = ""; // Your given value or reference;
var url = "pageserver.php?loc=" + loc;

new XHR( "GET", url, handleMyRequest ); // Building AJAX Call, via onload event.

// The call can be manipulated on any event.

// You can create new instance of request by calling out, the same procedure above. 
};

// ]]>

</script>

i can still provide more enhancement over the code, but for now, i think that would enough to handle your trouble.

Hope it helps...

essential

essential 84 Posting Shark

15 Years Ago

Hi,

as you can see i've build the code with 3 parameters on it:

var XHR = function( method, url, callback );

but you've replaced it with a single arguments which is the loc, doing this instance will the break entire program and will cause your browser to generate error.

In able for this to work, you must explicitly define another two variables in replaced of the two parameters that you have currently removed.

I will reconfigure it, so that you will only have to add a single parameter to it. Be right back...

essential 84 Posting Shark

15 Years Ago

Hi,

404 error was a server response status, im not quite familiar of this error instances, normally it's always referred as 200 ( means the response was ok ).
Try to check your server settings...

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

aosmith 0 Newbie Poster · Answer 1 · 2009-07-25T17:44:02+00:00

Essential,
Thanks for the help... I'm having one problem with line 22:

this.method = method || "GET";

I'm getting a "method is not defined" error. Here's my completed code:

// <![CDATA[
var loc = 'home';
var ie = (( !!document.all && !!!document.getElementById ) ? 1 : 0 ); // Checks whether it is an IE based browser or not.

// Request Handler 
   var handleMyRequest = function() {

   var seq = {
   4 : "complete",
   complete : 4 };   
   if ( seq[ this.readyState ] ) { // Request state my hold (STRING/INTEGER) value.
    if ( this.status === 200 || this.status === 304 ) { /* The request status handling can be turned off when you are working off-line. */
         (( ie ) ? document.all.greenBox : document.getElementById( "greenBox" )).innerHTML = this.responseText; 
      } 
   } 
};

// Request Builder
   var XHR = function( loc ) {
   this.createRequest = null;
   this.xml = 0;
   this.method = method || "GET";
   this.url = url || null;
   this.callback = callback || null;
   if ( arguments.length < 3 ) {
         return false;
   } this.xmlDoc = ( function() {
      try {
         if ( !ie ) {
            this.xml = new XMLHttpRequest();
         } else {
            try {
            var client = [ "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
            for ( var i = 0; i < client.length; ++i ) {
               if ( new ActiveXObject( client[ i ] )) {
                  this.xml = new ActiveXObject( client[ i ] );
                  break;
               }
            }
            } catch( e ) {
               this.xml = 0;
            }
         }
      } catch( er ) {
         if ( "createRequest" in window ) 
            this.xml = createRequest();
         else
            this.xml = 0;
      } return (( this.xml ) ? this.xml : 0 );
   } )();
   if ( this.xmlDoc ) {
      this.createRequest = ( function( xhr, callback, url, method ) {
         (( "overrideMimeType" in xhr ) ? xhr.overrideMimeType("text/xml") : xhr );
         xhr.onreadystatechange = callback;
         xhr.open( method, encodeURI( url ), true );
         (( method === "POST" && "setRequestHeader" in xhr ) ? xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8;") : xhr );
         xhr.send((( method === "POST" ) ? " " : null )); 
      } )( this.xmlDoc, this.callback, this.url, this.method );
   } return this.createRequest;
}; onload = function() {
var loc = ""; // Your given value or reference;
var url = "pageserver.php?loc=" + loc;

new XHR( "GET", url, handleMyRequest ); // Building AJAX Call, via onload event.

// The call can be manipulated on any event.

// You can create new instance of request by calling out, the same procedure above. 
};

// ]]>

Thanks again

droffij 0 Newbie Poster · Answer 2 · 2009-07-25T19:24:08+00:00

any idea about error 404?.....xampp was successfully intalled..

essential 84 Posting Shark Featured Poster · Answer 3 · 2009-07-25T20:27:14+00:00

Hi,

Here's is the configured code, and i have based it in your provided argument(loc):

var check = ( Boolean((( XMLHttpRequest ) ? 1 : 0 )));
   var handleMyRequest = function() {
   var seq = {
   4 : "complete",
   complete : 4 };   
   if ( seq[ this.readyState ] ) { alert( this.responseText );
      if ( this.status === 200 ) {
         (( check ) ? document.getElementById("greenBox") : document.all.greenBox ).innerHTML = this.responseText;
      } return;
   } alert("Request failed!\nPlease verify your QueryString...");
};
   var XHR = function( loc ) {
   this.createRequest = null;
   this.loc = loc || null; 
   this.url = "pageserver.php?loc=" + this.loc;
   this.xml = 0;
   var method = "GET";
   this.xmlDoc = ( function() {
      try {
         if ( check ) {
            this.xml = new XMLHttpRequest();
         } else {
            try {
            var client = [ "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
            for ( var i = 0; i < client.length; ++i ) {
               if ( new ActiveXObject( client[ i ] )) {
                  this.xml = new ActiveXObject( client[ i ] );
                  break;
               }
            }
            } catch( e ) {
               this.xml = 0;
            }
         }
      } catch( er ) {
         if ( "createRequest" in window ) 
            this.xml = createRequest();
         else
            this.xml = 0;
      } return (( this.xml ) ? this.xml : 0 );
   } )();
   if ( this.xmlDoc ) {
      this.createRequest = ( function( xhr, loc, method ) {
         (( "overrideMimeType" in xhr ) ? xhr.overrideMimeType("text/xml") : xhr );
         xhr.onreadystatechange = handleMyRequest;
         xhr.open( method, encodeURI( loc ), true );
         (( method === "POST" && "setRequestHeader" in xhr ) ? xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8;") : xhr );
         xhr.send((( method === "POST" ) ? " " : null )); 
      } )( this.xmlDoc, this.url, this.method );
   } return this.createRequest;
};

onload = function() {

new XHR( "home" ); // Your query string...
}

aosmith 0 Newbie Poster · Answer 4 · 2009-07-25T20:52:25+00:00

Now I've got this:

Error: uncaught exception: [Exception... "Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIXMLHttpRequest.open]" nsresult: "0x80070057 (NS_ERROR_ILLEGAL_VALUE)" location: "JS frame :: [url]http://127.0.0.1/tablesniper/js/sniperlib.js[/url] :: anonymous :: line 46" data: no]

line 46:

xhr.open( method, encodeURI( loc ), true );

TIA

essential 84 Posting Shark Featured Poster · Answer 5 · 2009-07-25T21:59:49+00:00

Sorry, ive missed a spot and this has to work now.

var check = ( Boolean((( XMLHttpRequest ) ? 1 : 0 )));
   var handleMyRequest = function() {
   var seq = {
   4 : "complete",
   complete : 4 };   
   if ( seq[ this.readyState ] ) { alert( this.responseText );
      if ( this.status === 200 ) {
         (( check ) ? document.getElementById("greenBox") : document.all.greenBox ).innerHTML = this.responseText;
      } return;
   } alert("Request failed!\nPlease verify your QueryString...");
};
   var XHR = function( loc ) {
   this.createRequest = null;
   this.loc = loc || null; 
   this.url = "pageserver.php?loc=" + this.loc;
   this.xml = 0;
   var reqType = "GET";
   this.xmlDoc = ( function() {
      try {
         if ( check ) {
            this.xml = new XMLHttpRequest();
         } else {
            try {
            var client = [ "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
            for ( var i = 0; i < client.length; ++i ) {
               if ( new ActiveXObject( client[ i ] )) {
                  this.xml = new ActiveXObject( client[ i ] );
                  break;
               }
            }
            } catch( e ) {
               this.xml = 0;
            }
         }
      } catch( er ) {
         if ( "createRequest" in window ) 
            this.xml = createRequest();
         else
            this.xml = 0;
      } return (( this.xml ) ? this.xml : 0 );
   } )();
   if ( this.xmlDoc ) {
      this.createRequest = ( function( xhr, loc, method ) {
         (( "overrideMimeType" in xhr ) ? xhr.overrideMimeType("text/xml") : xhr );
         xhr.onreadystatechange = handleMyRequest;
         xhr.open( method, loc, true );
         (( method === "POST" && "setRequestHeader" in xhr ) ? xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8;") : xhr );
         xhr.send((( method === "POST" ) ? " " : null )); 
      } )( this.xmlDoc, this.url, reqType );
   } return this.createRequest;
};

onload = function() {

new XHR( "home" );  
}

that happens when we implement new variable's on a pre-created code, applying instant changes on its line is twice as hard than making a code from a scratch.

aosmith 0 Newbie Poster · Answer 6 · 2009-08-11T00:06:28+00:00

Now I'm getting:

Error: no element found
Source File: [url]http://localhost/------r/pageserver.php?loc=Home[/url]
Line: 1

and

Error: junk after document element
Source File: http://localhost/--------------r/pageserver.php?loc=home
Line: 1, Column: 109
Source Code:
<span id="leftBox" class="leftBox"><h4>############</h4><br />#############</span><span id="rightBox" class="rightBox"><h4>##############</h4> <br />###############</span>

Any ideas?
Thanks again
-Alex

aosmith 0 Newbie Poster · Answer 7 · 2009-08-11T11:15:36+00:00

Problem solved, thanks for all you help Essential... I just had to make the hrefs='#'