title: Javascript PHP - Unexpected delay while processing an ajax call
body: <p>So i've been working on a log in form since yesterday and here is how i currently manage the website : </p>
  
  <p>First i'm having a loader.php that is charged of checking the user privileges and showing up elements on the "main.php" page accordingly.</p>
  
  <pre><code>&lt;?php 
   session_start();
   $status=false;
   if( isset($_SESSION['status']) &amp;&amp; $_SESSION['status']==true){
       $status=true;  
   }
   include 'main.php';
   ?&gt;
  </code></pre>
  
  <p>Then there is the "main.php" that i have organised as such : </p>
  
  <pre><code> &lt;!DOCTYPE html&gt;&lt;html&gt;
   &lt;?php if($status): ?&gt;
  
   &lt;body&gt;
    //DC NC  
  
     // Main content for logged in users
  &lt;/body&gt;
  &lt;?php else: ?&gt;
  &lt;body style="background:url("img/404.png")"&gt;&lt;/body&gt;
  &lt;?php endif; ?&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The index is constitued with a log in form that consists in this : </p>
  
  <pre><code>&lt;form id="logForm" action="loader.php" method="POST"&gt;
              &lt;div class="pom-agile"&gt;
                  &lt;input placeholder="Login (lname.fname)" name="user" class="user" type="text" required&gt;
                  &lt;span class="icon1"&gt;&lt;i class="fa fa-user" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="pom-agile"&gt;
                  &lt;input  placeholder="password" name="pass" class="pass" type="password" required&gt;
                  &lt;span class="icon2"&gt;&lt;i class="fa fa-unlock" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="sub-w3l"&gt;
                  &lt;h6&gt;&lt;a href="#"&gt;Password Forgotten ?&lt;/a&gt;&lt;/h6&gt;
                  &lt;div class="right-w3l"&gt;
                      &lt;input id="enter" type="submit" value="Enter"&gt;&lt;br&gt;&lt;br&gt;
                      &lt;input type="button" value="Subscribe" onclick="document.getElementById('reg').style.display='block'"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/form&gt;
  </code></pre>
  
  <p>Now this login form is handled with javascript such as so : </p>
  
  <pre><code>//My LogForm Handler
  $('#logForm').submit(function(){
      $user=document.forms["logForm"]["user"].value;
      var $pass=document.forms["logForm"]["pass"].value;
      for(var i=0;i&lt;$users.length;i++){
          if($users[i]['user'].trim() == $user.trim() &amp;&amp; $users[i]['password'] == $pass.trim()){
              if($users[i]['status']==1){
                  =&gt; AJAX("startSession");
                  =&gt; alert(); // Debugs the situation but unpractical
                  =&gt; return true;
              }
              else{
                  alert("Your registration is being processed");
                  return false;
              }
          }
      }
      alert("Wrong logs");
      return false;
  });
  </code></pre>
  
  <p>I use the Ajax function for other calls as well but here is her implementation : </p>
  
  <pre><code>function AJAX($call){
      if(window.XMLHttpRequest){
          xmlhttp=new XMLHttpRequest();
      }else{
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.onreadystatechange=function(){
          if(this.readyState==4 &amp;&amp; this.status==200){
              if($call=="getUsers"){
                  $users=JSON.parse(this.responseText);
                  //alert($users.toSource());
              }
          }
      };
      if($call=="getUsers"){
          xmlhttp.open("GET","http://localhost/www/Chellah/beta/read.php?option=users",true);
          xmlhttp.send();
      }
      if($call=="startSession"){
          xmlhttp.open("GET","http://localhost/www/Chellah/beta/read.php?option=session&amp;user=" + encodeURIComponent($user) ,true);
          xmlhttp.send();
      }
  }
  </code></pre>
  
  <p>The concerned Ajax part will read the database through "read.php" with the specified option, therefore only this portion will be executed : </p>
  
  <pre><code>else if($option=="session"){
  session_start();
  $user=$_GET['user'];
  $query=$conn-&gt;prepare("SELECT * FROM users WHERE user='$user'" );
  $query-&gt;execute();
  $row=$query-&gt;fetch();
  if($row['status']==1){$_SESSION['status']=true;}else{$_SESSION['status']=false;}
  $_SESSION['user']=$row['user'];
  unset($conn);unset($query);
  }
  </code></pre>
  
  <p>So the problem is located within the js handler of the log in form. 
  I've been adding some => to highlight the lines that creates the problem. 
  I figured that without an alert after the ajax call, the code would directly return true, without worrying about the completion of the ajax execution which is supposed to go through the read.php so that it can actually update the Session informations which are used to display the page in the loader.php </p>
  
  <p>I've been trying to setTimeOut the return, and that gave me the "wrong logs" message, so that meant that even if it doesn't execute the return true statement it would just continue in the execution of the same page script without worriying about the ajax() completion which is necessary. </p>
  
  <p>I've also tried to set a callback function in which i would put the return so that it would execute after the ajax call, but it showed me an undefined return type. I made it like this i think : </p>
  
  <pre><code>function sessionStart(callback){
     AJAX("startSession");
     return callback();
  }
  function callback(){
     return true;
   }
  </code></pre>
  
  <p>and then i would replace the 3 problematic lines with something like that </p>
  
  <pre><code>sessionStart(callback);
  </code></pre>
  
  <p>I'm wondering if my guesses about the problem are true, and if so what's the proper way to solve this issue ? </p>