AJAX status 0 and readyState of 4 error

[kseguy]

I have this small project to mine that I am using to learn web development but I've been stuck at a certain point now with AJAX for 3 days now. I have this ajax code that is supposed to submit to a PHP file.

function submitArticle() { 
               xhr = new ajaxValue();
               function ajaxValue() {
                    try {
                         xhr = new XMLHttpRequest();                         
                      }
                      catch(e) {
                                try {
                                  var  xhr = new ActiveXObject("Microsoft.XMLHTTP");
                                }
                        catch(e) {
                                    try {
                                       var  xhr = new ActiveXObject("Msxml2.XMLHTTP");
                                    }
                                    catch(e) {
                                      alert("Your Browser is not Supported");

                                    }
                        }                          
                      }
                      return xhr;
                 }                                                                         

               var postTitle = document.getElementById('postTitle');
               var postDes   = document.getElementById('postDes');
               var postCont  = document.getElementById('postCont');   
               var data = "postTitle=" + postTitle + "&postDes=" + postDes + "&postCont=" + postDes;                            
               var url = '../engine/engine.php';
               xhr.open('POST', url , true);
               xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");   
               xhr.send(data);                
               xhr.onreadystatechange = function() {
                      if(this.readyState === 4 && this.status ===200) {                     
                             alert(this.responseText);
                          }
                          else {
                            alert("status " + this.status);
                            alert("readyState " + this.readyState);
                      }
                  }           

              }

The problem i am facing is that I get an status of 0 where as my readyState is 4 which is the right value that I should get. I am confused on how to debug this sort of error. I have read a couple of articles and I am still confused on where I am going wrong.

    <?php             
        include_once('database.php');
        if (isset($_POST['blogsubmit']) ) {
            $title   =  $_POST['postTitle'];
            $summary =  $_POST['postDes'];
            $content =  $_POST['postCont'];
            insertPost($title,$summary,$content);
        }            
        else {
            return false;
        }
        function insertPost($title,$summary,$content) { 
            $query = "INSERT INTO `blogposts` SET
                    `title`     = '{$title}',
                    `summary`   = '{$summary}',             
                    `content`   = '{$content}' ";

            mysql_query($query) or die(mysql_error());
            echo "yattaa";                  
        } 
        ?>    

if it helps, this is how my folders and files are located

adminpanel.php is where the javascript code is located

[kseguy]

a small update I have made some changes to the code now the javascript code looks like this

function submitArticle() { 
           xhr = new ajaxValue();
           function ajaxValue() {
                try {
                     xhr = new XMLHttpRequest();                         
                  }
                  catch(e) {
                            try {
                              var  xhr = new ActiveXObject("Microsoft.XMLHTTP");
                            }
                    catch(e) {
                                try {
                                   var  xhr = new ActiveXObject("Msxml2.XMLHTTP");
                                }
                                catch(e) {
                                  alert("Your Browser is not Supported");

                                }
                    }                          
                  }
                  return xhr;
             }                                                                         

           var postTitle = document.getElementById('postTitle');
           var postDes   = document.getElementById('postDes');
           var postCont  = document.getElementById('postCont');   
           var data = "postTitle=" + postTitle + "&postDes=" + postDes + "&postCont=" + postDes;                            
           var url = '../engine/engine.php';
           xhr.open('POST', url , true);
           xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");   
           xhr.send(data);                
           xhr.onreadystatechange = function() {
                  if(this.readyState === 4 && this.status ===200) {                     
                         alert(this.responseText);
                      }
                      else {
                        alert("status " + this.status);
                        alert("readyState " + this.readyState);
                  }
              }           
           return false;                                                                                                                                                                                                                                         
          }

Now im getting a status of 2 and a readyState of 200 but I'm still stuck with no results from the responseText. Please help

[hag++]

Ok well first I would change your onreadystatechange function a little. he way it is will cause the "else" block to execute very often.

I would reccomend first checking that the readyState == 4, if it's not then just return. The readyState will become 4 when the request is finished (whether it errors out or not) so it's not worth doing anyhting with until it reaches that state.

 xhr.onreadystatechange = function() {
                if(this.readyState !== 4) return;

                if(this.status === 200) {                     
                         alert(this.responseText);
                }
                else {
                    alert("status " + this.status);
                    alert("readyState " + this.readyState);
                }
              };           

So the two things I changed was the readyState check and added the semicolon at the end of the statement. Since you are assigning an anonymous function you need the end semicolon. Also, keep in mind you are using the strict comparison operators (=== and !==). This is good but make sure that the datatypes are exactly the same or else the "if" block will never get run.