Introduction
Whenever you visit a website and click on a link or submit a form, you will get the data according to your responses. How does this happen when you are redirected to a new page with the result or on the same page without even refreshing the page?
The answer is with the use of ajax, as it enables the user to retrieve data without refreshing the content of the entire web page.
This is the basic introduction of ajax. We will learn more about it further in the blog.
Ajax and its Implementation
Ajax refers to Asynchronous Javascript and XML. Ajax is a combination of several technologies. The technologies Ajax contains are :
- CSS for styling
- Data interchange and manipulation using XML
- Data retrieval using XML HTTP request
- XHTML for the markup of web pages
- A dynamic interaction and display using DOM
- Javascript glue all these together
Generally, when the user clicks on a link or submits a form. The form gets submitted to the server, and then the server sends back the response, which is shown on a new page.
While interacting with an Ajax-powered web page, it loads a Java Script written Ajax engine in the background whose responsibility is to display the result to the user and communicate with the webserver.
When the user submits the form while working with ajax, the server sends its response in the HTML fragment, and then it displays on the new page without refreshing the current page.
Unobtrusive Javascript
For handling the attached javascript to the DOM, rails use the technique known as Unobtrusive Javascript. This is considered as one of the best techniques in the front-end community.
In this, we don't mix javascript code into HTML. It also has some benefits, like users can access the whole javascript on every page as it caught after at every page after downloading from the first page.
Implementation in Rails
Rails have a consistent and simple model for Ajax implementation and its operations. Different users trigger an Ajax Operation after the browser has rendered and displayed the initial web page.
- Some trigger fires - These are the changes like a user making changes in the form or clicking on a button or a link.
- The web client calls the server- XMLHttpRequest is a Javascript method that sends data related to the trigger with an action handler on the server. The data might be the text in the henry field, the ID of the checkbox, or the complete form.
- The server processing- The action handler of the server-side does some processing with the data and returns the HTML fragment to the web client.
- Response to the client- The client’s side javascript changes the web page's content according to the received HTML fragments by the server.










