Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Enrich your site with AJAX forms

Monday, December 22nd, 2014 by Servage

formsWhen you build a website you often think of requests to specific URLs which return some content in the form of a page. This is the underlying principle for websites, and has been so ever since the Internet was invented. It is also easy to comprehend how you ask for a specific target address, and then receive the relevant content for that site back from the server and show it in the browser. It is a synchronous linear understanding of how the web works. However, there is much more to it, and nowadays we have so much more power and so many more options available in the browsers so we can build sites that are based on web technologies but resemble a full fledged application much more than a boring static website.

While much of the innovation on websites and web apps lies in responsive design and device compatibility, one of the single most important features of moderns browsers is the capability of making asynchronous request between client browser and server back end. That is the cornerstone in building any kind of web app.

Traditional forms

Forms used to be the original and only real interaction between the user and the server. Forms enabled the user to insert data into a preset list of fields, and submit that data to the server. Usually the entire page would therefore reload and the user taken back to the same form with validation errors, or on success taken to a “Thank you” page or similar. This underlines the approach described at the beginning of the post: One request returns one page. In this case it is a POST request with data which returns a result page.

The old way of handling forms gives the user a clear understanding of the page reloading, and the entire thing being a website rather than a web app. Also the server has to respond with the entire page on every request, even though it would in theory have been sufficient to render the validation errors or the “Thank you” message.

Modern forms

Today forms are much more than their original intention. Using AJAX a form can be submitted without redirecting the entire browser window anywhere. In fact you will often see how the user is kept on the same page, while for example the form is being blocked and a loading indicator is displayed. This gives the user instant feedback that something is happening. The request was sent. However, at the same time the user does not immediately get redirected anywhere. Instead a more streamlined experience is offered, so the user feels he is inside of an app.

More advanced web apps will give the user options to continue using the app while AJAX requests occur, and maybe even abort requests etc. This highly depends on the purpose of the app, but technically it is definitely possible.

Action buttons

When working with lists, tables or other data, AJAX requests also provide an opportunity to include action buttons at the relevant positions, without having to reload anything. Imagine a list of products the visitor added to a shopping cart. Each of those items would have a “Remove” button. Following the old way, there would be a link or form which would reload the entire shopping cart with the desired item removed. Following the modern way, the same element would trigger an AJAX request to notice the removal, and at the same time simply remove the item from the HTML without reloading the page. This gives instant UI feedback and a great user experience.

Sources for further reading

Enrich your site with AJAX forms, 5.0 out of 5 based on 4 ratings
Categories: Guides & Tutorials

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.