Asynchronous JavaScript in jQuery (ajax)

No modern interactive site is complete without background requests. These requests allow you to get data from the site without reloading the page. Such requests are called Ajax (asynchronous JavaScript). The jQuery library has convenient methods for working with such queries.

Ajax requests should be treated in the same way as forms. That is, they can send data to a specific page of the site using two methods: POST and GET. But only when they are sent and the result is received, the page is not reloaded. All the result received in the query is returned to a variable that can be used at your discretion.

jQuery has an ajax method of the same name . Let's try to come up with an example with a form, the sending of which can be programmed via ajax:

<form id="webForm" action="/index.php" method="post">
   <input class="js_username" type="text" value="Anurag">
   <input class="js_role" type="text" value="Developer">
   <input type="submit" value="Submit">
</form>
<script>
   $('#webForm').on('submit', function(event) {
      event.preventDefault();
      
      // read field values
         var username = $('.js_username').val();
         var role = $('.js_role').val();

      $.ajax({ // ajax request
         type: "POST", // sending method
         url: "/index.php", // address to which we send
         data: { 'USERNAME': username, 'ROLE': role }, // transmitted data
         success: function(data){
            alert('Data received:' + data);
         }
      });
   });
</script>

Let's analyze this difficult example line by line. First comes the HTML code for the form with two text fields and a submit button. Text fields have a class prefixed with "js_". Typically, classes with this prefix are created only to make it easier to refer to fields through scripts and do not use them in CSS.

After the HTML code of the form is the script. It handles the submit event of the form with id="webForm". The first line is to stop the execution of the standard "preventDefault" script. That is, when submitting the form, the page will not be reloaded - the standard actions for submitting the form will not be performed. After that, there is code for reading the values ​​of fields with the classes "js_username" and "js_role" into the variables "username" and "role".

At the end of the script, there is a call to the ajax method , which is responsible for sending data with a background request. This method has a lot of different parameters through which you can determine the behavior of the method in any usage scenarios. But in this article, we will analyze the simplest use of ajax, so only parameters were used:

• type - request sending method (POST or GET)
• url - the address of the site page (relative or absolute) to which we send the ajax request
• data - data set (object), which is passed to the page at the address specified in the "url" parameter
• success - the function to be executed in case of successful receipt of data from the request. As you can see from the example, the data variable is available inside the function, which contains all the data received by the request.

As you can see from the example, there was no point in defining the "action" and "method" attributes for the form. After all, all sending occurs through an ajax request, which only passes the value of the form fields from the example, but does not read the form attributes in any way.

The site page that will process the data received in the ajax request can return a response in any format. The word "return" means to output exactly as if the page had been requested via a direct request to the page through the browser. For example, HTML code can be returned. Alternatively, information encoded in JSON can be returned, which will be decoded in the success parameter of the ajax method. It all depends on what logic the programmer who creates the site chooses.