AJAX stands for Asynchronous Javascript & XML. It’s a technique that’s independent of your web framework, but Rails specifically has good support for it as you’ll learn in this article.

Direct AJAX Request

AJAX has two parts, the request, which you make from the browser using Javascript, and the response, which you handle from your Ruby app.You can make an AJAX request with plain Javascript.

But because that requires a lot of boilerplate code we usually do this through a Javascript library like jQuery.

$.get( “/vegetables”, function(data) {

  alert(“Vegetables are good for you!”);

});

Updating a Partial with AJAX:

To update only part of your page with the data you get from AJAX, there are mostly two options. 

  • write a Javascript + ERB view, which updates the element
  • Can return a JSON response from your controller with the new HTML as a string, then use Javascript to update the element
  • The generating the HTML elements with Javascript using that data.
  • Ajax enables you to retrieve data for a web page without having to refresh the contents of the entire page. In the basic web architecture, the user clicks a link or submits a form. The form is submitted to the server, which then sends back a response. The response is then displayed for the user on a new page.
  • When you interact with an Ajax-powered web page, it loads an Ajax engine in the background. The engine is written in JavaScript and its responsibility is to both communicate with the web server and display the results to the user. When you submit data using an Ajax-powered form, the server returns an HTML fragment that contains the server’s response and displays only the data that is new or changed as opposed to refreshing the entire page.

Rails has a simple, consistent model for how it implements Ajax operations. Once the browser has rendered and displayed the initial web page, different user actions cause it to display a new web page (like any traditional web application) or trigger an Ajax operation −

  • Some trigger fires − This trigger could be the user clicking on a button or link, the user making changes to the data on a form or in a field, or just a periodic trigger (based on a timer).
  • The web client calls the server − A JavaScript method, XMLHttpRequest, sends data associated with the trigger to an action handler on the server. The data might be the ID of a checkbox, the text in an entry field, or a whole form.
  • The server does processing − The server-side action handler ( Rails controller action )– does something with the data and returns an HTML fragment to the web client.
  • The client receives the response − The client-side JavaScript, which Rails creates automatically, receives the HTML fragment and uses it to update a specified part of the current page’s HTML, often the content of a <div> tag.

These steps are the simplest way to use Ajax in a Rails application, but with a little extra work, you can have the server return any kind of data in response to an Ajax request, and you can create custom JavaScript in the browser to perform more involved interactions.

Rails includes its own AJAX function:

Rails.ajax({

  url: “/books”,

  type: “get”,

  data: “”,

  success: function(data) {},

  error: function(data) {}

})