jQuery and AJAX Calls

HTML had an issue years ago. If you wanted to update part of a page, you had to reload everything. Think about things like Twitter/X, Instagram, etc. Imagine having to reload everything instead of just a part of your feed? It would slow your experience down, and cost a lot of money in transmission costs.

XMLHttpRequest (XHR), allowed them to request data from the server, and update the page. We call this AJAX now for Asynchronous JavaScript and XML.

jQuery has a generic ajax() object for making those requests, or it has several other helper functions that you can use such as $.get(),  $.getScript(),  $.getJSON(),  $.post(), and $().load().

This means that ajax() is a little harder to use, but fully featured, and will work in all situations. Let’s look at its generic form.

$.ajax({
  url: "https://api.example.com/data", // where you will send the data to
  method: "GET", // or POST -- how you will send the data
  dataType: "json", // or 'text', 'xml', etc. -- what type of data you are expecting to get back
  success: function(data) {
    // Handle the response data if a success code was sent back
    console.log(data);
  },
  error: function(error) {
    // Handle errors if an error code was sent back
    console.error(error);
  }
});

Now, if we work through this, we can get data from a REST API and then load that external source. For this example, we’ll use: https://jsonplaceholder.typicode.com/posts/1

        $(document).ready(function () {
            $('#fetchMe').on('click', function () {
                $.ajax({
                    url: "https://jsonplaceholder.typicode.com/posts/1",
                    method: "GET",
                    dataType: "json",
                    success: function (data) {
                        // Handle the response data if a success code was sent back
                        console.log(data);
                        $('#data').text(data);
                    },
                    error: function (error) {
                        // Handle errors if an error code was sent back
                        console.error(error);
                    }
                });
            });
        });

If the data loads successfully, you’ll see it in the console. If there is an error, it will display in the console as well. This is because of the anonymous functions which are called if there is a success or error. However, this doesn’t happen automatically. It only happens once you click on the button, as we’re using a jQuery Event Handler.

Because this is a JavaScript object, we cannot just load that data directly into the page. So we will need to manipulate the data, which we’ll see next.

We’ll see how to manipulate the DOM in a minute.

Your Request – Adding Parameters

When making a request, we often need to add parameters to be more specific. These can include things like search parameters, identifiers to handle authorization, and many more.

Luckily, in the ajax(), there is a parameter for data to send to the server as part of the request. jQuery will parse it, and send it appropriately for you.

$.ajax({
  url: "https://api.example.com/data", // where you will send the data to
  method: "GET", 
  dataType: "json", 
  data: { } // optional set of data to send to the server. This will be formatted as an object or query string depending upon your method.
  always: function( xhr, status ) {
    alert( "The request is complete!" );
  });
});

Here we see data, the optional parameter where we can pass things to the server. We also see always, another handler which will always run, regardless of if we had an error, or success, or something else.

If you want to see more information about this feature of jQuery, check out: https://learn.jquery.com/ajax/jquery-ajax-methods/

jQuery and AJAX Calls was originally found on Access 2 Learn