AJAX stands for Asynchronous JavaScript and XML (although these days XML has been replaced with JSON). The idea is to put most of the work for displaying a view on the browser side instead of the server side, which results in a site that appears much faster and more responsive.

When a user clicks a button without AJAX, the server redirects to a new page with all the HTML that the browser needs, and the browser completley re-renders that HTML after it receives it. With AJAX, the server will just give the browser any new data it needs in JSON format, and the JavaScript code in the browser will use that to update the page as necessary. All the work is contained in JavaScript callback functions that manipulate the DOM.

jQuery provides a .ajax() method that provides a way to make ajax requests that works across all browsers. Typically, you will have an event listener (e.g., for clicking a submit button), and in the callback for that event, you will call $.ajax() to make the ajax request in response.

The .ajax() method takes an object with various paramters, many of which are optional. Here are the most important ones:

• url - The url route that the request will go to.
• type - The type of HTTP request (e.g. "GET", "POST").
• data - The params to provide to the server.
• success - The callback function to be run upon successful completion of the controller action.
• error - The callback function to be run upon an unsuccessful request.

You will want to make sure that the controller is responding to you with JSON rather than the default HTML. There are various ways to specify this in different places in your application, but if you haven't set it up elsewhere, you can include the dataType parameter with the value "json".