readyState looping?

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply
1 2

•
•
Join Date: Jul 2009
Posts: 7
Reputation: aosmith is an unknown quantity at this point 
Solved Threads: 0
aosmith aosmith is offline Offline
Newbie Poster

readyState looping?

 
0
  #1
Jul 25th, 2009
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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. //Begin AJAX
  2.     //Browser Support Code
  3.     function goToPage(loc)
  4.     {
  5.        var ajaxRequest;
  6.        try
  7.        {
  8.           // Opera 8.0+, Firefox, Safari
  9.           ajaxRequest = new XMLHttpRequest();
  10.           alert("ajaxRequest created!");
  11.        }
  12.        catch (e)
  13.        {
  14.           // Internet Explorer Browsers
  15.           try
  16.           {
  17.              ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
  18.           }
  19.           catch (e)
  20.           {
  21.              try
  22.              {
  23.                 ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
  24.              }
  25.              catch (e)
  26.              {
  27.                 // Something went wrong
  28.                 alert("Your browser broke!");
  29.                 return false;
  30.              }
  31.           }
  32.        }
  33.        // Create a function that will receive data sent from the server
  34.        ajaxRequest.onreadystatechange = function(loc)
  35.        {
  36.           if(ajaxRequest.readyState == 4)
  37.           {
  38.              if(ajaxRequest.status == 200 || ajaxRequest.status == 304)
  39.              {
  40.                 document.getElementById('greenBox').innerHTML = ajaxRequest.responseText;
  41.  
  42.              }
  43.           }
  44.        }
  45.        //contruct url
  46.        var url = "pageserver.php?loc=" + loc
  47.        ajaxRequest.open("GET", url, true);
  48.        ajaxRequest.send(null);
  49.     }

pageserver.php
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <?php
  2.  
  3.     //Begin frame
  4.     /*
  5.     if ($_GET['loc'] == "")
  6.     {
  7.        $textRight = "";
  8.        $textLeft = "";
  9.        echo encap($textRight, $textLeft);
  10.     }
  11.     */
  12.     require_once("inc/dbinfo.inc");
  13.  
  14.     if ($_GET['loc'] == "home")
  15.     {
  16.        $textRight = '##############################################';
  17.        $textLeft = '###############################################';
  18.        echo encap($textLeft, $textRight);
  19.     }
  20.  
  21.     if ($_GET['loc'] == "register")
  22.     {
  23.        $textRight = '##############';
  24.        $textLeft = '################';
  25.        echo encap($textLeft, $textRight);
  26.     }
  27.  
  28.     if ($_GET['loc'] == "browse")
  29.     {
  30.        $query = "######################";
  31.        $result = mysql_query($query);
  32.        for($i=0; $i > 10; $i++)
  33.        {
  34.           $array = mysql_fetch_assoc($result);
  35.           if ($i == 0)
  36.           {
  37.              $textRight = #########################;
  38.              $textLeft = ######################;
  39.           }
  40.           else if ($i > 0)
  41.           {
  42.              $textRight = #############################################;
  43.              $textLeft = ##############################################;
  44.           }
  45.        echo encap($textLeft, $textRight);
  46.        }
  47.     }
  48.  
  49.     if ($_GET['loc'] == "about")
  50.     {
  51.        $textRight = '############################';
  52.        $textLeft = '#############################';
  53.        echo encap($textLeft, $textRight);
  54.     }
  55.  
  56.     if ($_GET['loc'] == "bid")
  57.     {
  58.        if (!$_GET['id'])
  59.        {
  60.           //error
  61.        }
  62.        else if ($_GET['id'])
  63.        {
  64.           $id = $_GET['id'];
  65.           $query = "#########################";
  66.           $result = mysql_query($query);
  67.           $array = mysql_fetch_assoc($result);
  68.        }
  69.  
  70.        echo encap($textLeft, $textRight);
  71.     }
  72.     function encap($textLeft, $textRight)
  73.     {
  74.        return ('<span id="leftBox" class="leftBox">'.$textLeft.'</span><span id="rightBox" class="rightBox">'.$textRight.'</span>');
  75.     }
  76.     ?>
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: readyState looping?

 
0
  #2
Jul 25th, 2009
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:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <script type="text/javascript">
  2. // <![CDATA[
  3.  
  4. var ie = (( !!document.all && !!!document.getElementById ) ? 1 : 0 ); // Checks whether it is an IE based browser or not.
  5.  
  6. // Request Handler 
  7.    var handleMyRequest = function() {
  8.  
  9.    var seq = {
  10.    4 : "complete",
  11.    complete : 4 };   
  12.    if ( seq[ this.readyState ] ) { // Request state my hold (STRING/INTEGER) value.
  13.     if ( this.status === 200 || this.status === 304 ) { /* The request status handling can be turned off when you are working off-line. */
  14.          (( ie ) ? document.all.greenBox : document.getElementById( "greenBox" )).innerHTML = this.responseText; 
  15.       } 
  16.    } 
  17. };
  18.  
  19. // Request Builder
  20.    var XHR = function( method, url, callback ) {
  21.    this.createRequest = null;
  22.    this.xml = 0;
  23.    this.method = method || "GET";
  24.    this.url = url || null;
  25.    this.callback = callback || null;
  26.    if ( arguments.length < 3 ) {
  27.          return false;
  28.    } this.xmlDoc = ( function() {
  29.       try {
  30.          if ( !ie ) {
  31.             this.xml = new XMLHttpRequest();
  32.          } else {
  33.             try {
  34.             var client = [ "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
  35.             for ( var i = 0; i < client.length; ++i ) {
  36.                if ( new ActiveXObject( client[ i ] )) {
  37.                   this.xml = new ActiveXObject( client[ i ] );
  38.                   break;
  39.                }
  40.             }
  41.             } catch( e ) {
  42.                this.xml = 0;
  43.             }
  44.          }
  45.       } catch( er ) {
  46.          if ( "createRequest" in window ) 
  47.             this.xml = createRequest();
  48.          else
  49.             this.xml = 0;
  50.       } return (( this.xml ) ? this.xml : 0 );
  51.    } )();
  52.    if ( this.xmlDoc ) {
  53.       this.createRequest = ( function( xhr, callback, url, method ) {
  54.          (( "overrideMimeType" in xhr ) ? xhr.overrideMimeType("text/xml") : xhr );
  55.          xhr.onreadystatechange = callback;
  56.          xhr.open( method, encodeURI( url ), true );
  57.          (( method === "POST" && "setRequestHeader" in xhr ) ? xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8;") : xhr );
  58.          xhr.send((( method === "POST" ) ? " " : null )); 
  59.       } )( this.xmlDoc, this.callback, this.url, this.method );
  60.    } return this.createRequest;
  61. }; onload = function() {
  62. var loc = ""; // Your given value or reference;
  63. var url = "pageserver.php?loc=" + loc;
  64.  
  65. new XHR( "GET", url, handleMyRequest ); // Building AJAX Call, via onload event.
  66.  
  67. // The call can be manipulated on any event.
  68.  
  69. // You can create new instance of request by calling out, the same procedure above. 
  70. };
  71.  
  72. // ]]>
  73.  
  74. </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
Last edited by essential; Jul 25th, 2009 at 5:22 am.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2009
Posts: 7
Reputation: aosmith is an unknown quantity at this point 
Solved Threads: 0
aosmith aosmith is offline Offline
Newbie Poster

Re: readyState looping?

 
0
  #3
Jul 25th, 2009
Essential,
Thanks for the help... I'm having one problem with line 22:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1.    this.method = method || "GET";
I'm getting a "method is not defined" error. Here's my completed code:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. // <![CDATA[
  2. var loc = 'home';
  3. var ie = (( !!document.all && !!!document.getElementById ) ? 1 : 0 ); // Checks whether it is an IE based browser or not.
  4.  
  5. // Request Handler 
  6.    var handleMyRequest = function() {
  7.  
  8.    var seq = {
  9.    4 : "complete",
  10.    complete : 4 };   
  11.    if ( seq[ this.readyState ] ) { // Request state my hold (STRING/INTEGER) value.
  12.     if ( this.status === 200 || this.status === 304 ) { /* The request status handling can be turned off when you are working off-line. */
  13.          (( ie ) ? document.all.greenBox : document.getElementById( "greenBox" )).innerHTML = this.responseText; 
  14.       } 
  15.    } 
  16. };
  17.  
  18. // Request Builder
  19.    var XHR = function( loc ) {
  20.    this.createRequest = null;
  21.    this.xml = 0;
  22.    this.method = method || "GET";
  23.    this.url = url || null;
  24.    this.callback = callback || null;
  25.    if ( arguments.length < 3 ) {
  26.          return false;
  27.    } this.xmlDoc = ( function() {
  28.       try {
  29.          if ( !ie ) {
  30.             this.xml = new XMLHttpRequest();
  31.          } else {
  32.             try {
  33.             var client = [ "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
  34.             for ( var i = 0; i < client.length; ++i ) {
  35.                if ( new ActiveXObject( client[ i ] )) {
  36.                   this.xml = new ActiveXObject( client[ i ] );
  37.                   break;
  38.                }
  39.             }
  40.             } catch( e ) {
  41.                this.xml = 0;
  42.             }
  43.          }
  44.       } catch( er ) {
  45.          if ( "createRequest" in window ) 
  46.             this.xml = createRequest();
  47.          else
  48.             this.xml = 0;
  49.       } return (( this.xml ) ? this.xml : 0 );
  50.    } )();
  51.    if ( this.xmlDoc ) {
  52.       this.createRequest = ( function( xhr, callback, url, method ) {
  53.          (( "overrideMimeType" in xhr ) ? xhr.overrideMimeType("text/xml") : xhr );
  54.          xhr.onreadystatechange = callback;
  55.          xhr.open( method, encodeURI( url ), true );
  56.          (( method === "POST" && "setRequestHeader" in xhr ) ? xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8;") : xhr );
  57.          xhr.send((( method === "POST" ) ? " " : null )); 
  58.       } )( this.xmlDoc, this.callback, this.url, this.method );
  59.    } return this.createRequest;
  60. }; onload = function() {
  61. var loc = ""; // Your given value or reference;
  62. var url = "pageserver.php?loc=" + loc;
  63.  
  64. new XHR( "GET", url, handleMyRequest ); // Building AJAX Call, via onload event.
  65.  
  66. // The call can be manipulated on any event.
  67.  
  68. // You can create new instance of request by calling out, the same procedure above. 
  69. };
  70.  
  71. // ]]>

Thanks again
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: readyState looping?

 
0
  #4
Jul 25th, 2009
Hi,

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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. 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...
Last edited by essential; Jul 25th, 2009 at 10:37 am.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2009
Posts: 6
Reputation: droffij is an unknown quantity at this point 
Solved Threads: 0
droffij droffij is offline Offline
Newbie Poster

Re: readyState looping?

 
0
  #5
Jul 25th, 2009
any idea about error 404?.....xampp was successfully intalled..
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: readyState looping?

 
0
  #6
Jul 25th, 2009
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 With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: readyState looping?

 
0
  #7
Jul 25th, 2009
Hi,

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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. var check = ( Boolean((( XMLHttpRequest ) ? 1 : 0 )));
  2.    var handleMyRequest = function() {
  3.    var seq = {
  4.    4 : "complete",
  5.    complete : 4 };   
  6.    if ( seq[ this.readyState ] ) { alert( this.responseText );
  7.       if ( this.status === 200 ) {
  8.          (( check ) ? document.getElementById("greenBox") : document.all.greenBox ).innerHTML = this.responseText;
  9.       } return;
  10.    } alert("Request failed!\nPlease verify your QueryString...");
  11. };
  12.    var XHR = function( loc ) {
  13.    this.createRequest = null;
  14.    this.loc = loc || null; 
  15.    this.url = "pageserver.php?loc=" + this.loc;
  16.    this.xml = 0;
  17.    var method = "GET";
  18.    this.xmlDoc = ( function() {
  19.       try {
  20.          if ( check ) {
  21.             this.xml = new XMLHttpRequest();
  22.          } else {
  23.             try {
  24.             var client = [ "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
  25.             for ( var i = 0; i < client.length; ++i ) {
  26.                if ( new ActiveXObject( client[ i ] )) {
  27.                   this.xml = new ActiveXObject( client[ i ] );
  28.                   break;
  29.                }
  30.             }
  31.             } catch( e ) {
  32.                this.xml = 0;
  33.             }
  34.          }
  35.       } catch( er ) {
  36.          if ( "createRequest" in window ) 
  37.             this.xml = createRequest();
  38.          else
  39.             this.xml = 0;
  40.       } return (( this.xml ) ? this.xml : 0 );
  41.    } )();
  42.    if ( this.xmlDoc ) {
  43.       this.createRequest = ( function( xhr, loc, method ) {
  44.          (( "overrideMimeType" in xhr ) ? xhr.overrideMimeType("text/xml") : xhr );
  45.          xhr.onreadystatechange = handleMyRequest;
  46.          xhr.open( method, encodeURI( loc ), true );
  47.          (( method === "POST" && "setRequestHeader" in xhr ) ? xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8;") : xhr );
  48.          xhr.send((( method === "POST" ) ? " " : null )); 
  49.       } )( this.xmlDoc, this.url, this.method );
  50.    } return this.createRequest;
  51. };
  52.  
  53. onload = function() {
  54.  
  55. new XHR( "home" ); // Your query string...
  56. }
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2009
Posts: 7
Reputation: aosmith is an unknown quantity at this point 
Solved Threads: 0
aosmith aosmith is offline Offline
Newbie Poster

Re: readyState looping?

 
0
  #8
Jul 25th, 2009
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 :: http://127.0.0.1/tablesniper/js/sniperlib.js :: anonymous :: line 46" data: no]
line 46:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1.  xhr.open( method, encodeURI( loc ), true );
TIA
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: readyState looping?

 
0
  #9
Jul 25th, 2009
Sorry, ive missed a spot and this has to work now.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. var check = ( Boolean((( XMLHttpRequest ) ? 1 : 0 )));
  2.    var handleMyRequest = function() {
  3.    var seq = {
  4.    4 : "complete",
  5.    complete : 4 };   
  6.    if ( seq[ this.readyState ] ) { alert( this.responseText );
  7.       if ( this.status === 200 ) {
  8.          (( check ) ? document.getElementById("greenBox") : document.all.greenBox ).innerHTML = this.responseText;
  9.       } return;
  10.    } alert("Request failed!\nPlease verify your QueryString...");
  11. };
  12.    var XHR = function( loc ) {
  13.    this.createRequest = null;
  14.    this.loc = loc || null; 
  15.    this.url = "pageserver.php?loc=" + this.loc;
  16.    this.xml = 0;
  17.    var reqType = "GET";
  18.    this.xmlDoc = ( function() {
  19.       try {
  20.          if ( check ) {
  21.             this.xml = new XMLHttpRequest();
  22.          } else {
  23.             try {
  24.             var client = [ "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
  25.             for ( var i = 0; i < client.length; ++i ) {
  26.                if ( new ActiveXObject( client[ i ] )) {
  27.                   this.xml = new ActiveXObject( client[ i ] );
  28.                   break;
  29.                }
  30.             }
  31.             } catch( e ) {
  32.                this.xml = 0;
  33.             }
  34.          }
  35.       } catch( er ) {
  36.          if ( "createRequest" in window ) 
  37.             this.xml = createRequest();
  38.          else
  39.             this.xml = 0;
  40.       } return (( this.xml ) ? this.xml : 0 );
  41.    } )();
  42.    if ( this.xmlDoc ) {
  43.       this.createRequest = ( function( xhr, loc, method ) {
  44.          (( "overrideMimeType" in xhr ) ? xhr.overrideMimeType("text/xml") : xhr );
  45.          xhr.onreadystatechange = handleMyRequest;
  46.          xhr.open( method, loc, true );
  47.          (( method === "POST" && "setRequestHeader" in xhr ) ? xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8;") : xhr );
  48.          xhr.send((( method === "POST" ) ? " " : null )); 
  49.       } )( this.xmlDoc, this.url, reqType );
  50.    } return this.createRequest;
  51. };
  52.  
  53. onload = function() {
  54.  
  55. new XHR( "home" );  
  56. }

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.
Last edited by essential; Jul 25th, 2009 at 1:08 pm.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2009
Posts: 7
Reputation: aosmith is an unknown quantity at this point 
Solved Threads: 0
aosmith aosmith is offline Offline
Newbie Poster

Re: readyState looping?

 
0
  #10
Aug 10th, 2009
Now I'm getting:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. Error: no element found
  2. Source File: <a rel="nofollow" class="t" href="http://localhost/------r/pageserver.php?loc=Home" target="_blank">http://localhost/------r/pageserver.php?loc=Home</a>
  3. Line: 1

and

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. Error: junk after document element
  2. Source File: http://localhost/--------------r/pageserver.php?loc=home
  3. Line: 1, Column: 109
  4. Source Code:
  5. <span id="leftBox" class="leftBox"><h4>############</h4><br />#############</span><span id="rightBox" class="rightBox"><h4>##############</h4> <br />###############</span>

Any ideas?
Thanks again
-Alex
Last edited by aosmith; Aug 10th, 2009 at 3:10 pm.
Reply With Quote Quick reply to this message  
Reply
1 2

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum


Views: 814 | Replies: 10
Thread Tools Search this Thread



Tag cloud for JavaScript / DHTML / AJAX
acid2 ajax ajaxcode ajaxhelp animate array automatically autoplay beta boarder box bug button calendar captcha card cart codes column cookies createrange() css cursor date debugger decimal design developer dom download dropdown element enter error events firefox firehose flash focus form frameworks getselection google gwt html htmlform iframe image() index java javascript javascripts jawascriptruntimeerror jquery jsp listbox maps marquee masterpage menu microsoft mimic mp3 mp4 offline onmouseover parameters php player post problem programming progressbar prototype rating redirect regex safari scale scriptlets search select size sources sql starrating text textarea toggle twitter validation variables w3c web website window windowofwords windowsxp xml xspf
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC