title: How to receive data back from server using ajax?
body: <p>Basically I have a form with a username textbox and a submit button in it. Now what I want is that when the user input text in textbox it should get the textbox value and send the username to server so the server could check whether the username is taken by any other user or not. I could do sending the text value to server but I don't know how to receive back some data and turn the textbox border into red and pop an error if the username has been taken.</p>
  
  <p>Here is my code for getting text value and sending it to server:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
   &lt;head&gt;
  
  &lt;script src="../JquerySock.js"&gt;&lt;/script&gt;
  &lt;meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1"&gt;    
  
  &lt;script&gt;
    $(document).ready(function() {
        $('#Registeration_Username_box').on('input', function() {
          console.log('excuted input');
          postUsernameToServer();
      });
    });
    function postUsernameToServer() {
        var formData = {
                  'username': $('input[name=UserName]').val(),
                };
                // process the form
                $.ajax({
                    type: 'POST', // define the type of HTTP verb we want to use (POST for our form)
                    url: '../postr', // the url where we want to POST
                    data: formData, // our data object
                    dataType: 'json', // what type of data do we expect back from the server
                    encode: true
                  })
      }
  &lt;/script&gt;
   &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="Registeration_Div" class="Registeration_Div"&gt;
      &lt;div class="createnewaccount" id="createnewaccount"&gt;Create new account&lt;/div&gt;
      &lt;form class="Registration_Form" id="Registration_Form" action="../postr" method="POST"&gt;
  
          &lt;span class="Usernameerror_spn" id="Usernameerror_spn"&gt;Username has been taken&lt;/span&gt;
          &lt;div id="Registeration_Username_DIV" class="Registeration_Username_DIV"&gt;
              &lt;input type="text" id="Registeration_Username_box" class="Registeration_Username_box"
                  placeholder="Username" name="UserName" maxlength="30" /&gt;
          &lt;/div&gt;
  
      &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>As you can see I have a span box before my username textbox which by default is hidden, but I want it to be shown if the user has been taken.</p>