jQuery AJAX – Turing

Learning Goals

• Learn the importance of Ajax and what it stands for
• Learn about when to use Ajax
• Connect Rails Controllers to Ajax
• Practice using Ajax in a Rails app

Structure

• 5 - In a world where there's no Ajax
• 5 - What's Ajax
• 10 - When To use Ajax
• 5 - Break
• 20 - Setup and Live code
• 5 - Break
• 20 - Exercise
• 15 - Recap and Discussion

A world with no Ajax

• In order for us to change one portion of our page, we have to reload the whole page.
• If there's any area in our page that takes time to load, the user has to wait before the page is rendered.

Solution?

• AJAX

JQuery and AJAX

• JQuery provides an easy way to make AJAX Calls
• AJAX essentially is a request made to an API and the response doesn't interrupt our page loading.
• A response comes in the form of: JSON, AJAX or even HTML
• We will deal with JSON in this class, XML is similar.
• Once a response comes back, we should handle displaying the data ourselves.

JQuery AJAX methods

• $.ajax is the main method, all the other methods are just shortcuts.

• http://api.jquery.com/jquery.ajax/

• Shortcuts are:

  • $.get(): https://api.jquery.com/jquery.get/
  • $.getJSON(): http://api.jquery.com/jquery.getjson/
  • $.post: http://api.jquery.com/jquery.post/

Connecting Rails

• Clone down the app:

  https://github.com/turingschool-examples/storedom

• Run:

  git checkout api-workshop

• Bundle install

Steps to adding AJAX to rails

• you have two main areas you want to deal with:

  • Rails controller: make sure you rails controller returns back JSON result to be displayed. (respond with)
  • Javascript Side: call your controller route and display the result in the callback.

• Let's try displaying the items automatically when a button is clicked.