Ajax Product Search: how to search for a product in real time?

There is a system that allows advanced product search on websites in real time (‘live’ search). It’s called Ajax technology.

When visitors to a website start typing search keys, they display the corresponding results thanks to this system by the plugin with which the search is done instantly.

In the IT field, Ajax stands for Asynchronous JavaScript and XML.

In practice, it is a software development technique that allows you to create interactive web applications (Rich Internet Application).

The basis for developing HTML applications with this system is an exchange of background data between web browsers and servers. What is this exchange for? To dynamically update a web page without the user having to reload.

This technology is called asynchronous because the process by which the data requested from the server is loaded in the background does not interfere with the behavior of the page.

Ajax technology: what it is

AJAX is a multi-platform technique, i.e. it can be used on many operating systems, IT architectures and web browsers.

Many open source implementations of libraries and frameworks can be found.

It is not a new individual technology: it contains a series of technologies to be used together.

AJAX technology uses a combination of:

– HTML (or XHTML) and CSS in reference to markup and style;

– DOM (Document Object Model) treated using an ECMAScript language such as JavaScript or JScript. It is used to show information by interacting with it;

– XMLHttpRequest, object for the asynchronous exchange of data between the user’s browser and the web server. In some cases, an iframe object can be used as an alternative for exchanging data with the server or, in other cases, <script> tag to be added dynamically (JSON);

– XML ​​to be used as a data exchange format. In fact, any type of format can be used (preformatted HTML, JSON, EBML, plain text). These are files dynamically generated by scripts on the server front.

Activation of JavaScript language is required on the client. In reality, the use of JavaScript and XML is not mandatory.

Web applications that use Ajax require certain browsers, including Google Chrome, Firefox, Opera, Konqueror, Safari. However, consider that Opera does not work for formatting XSL objects.

To check browser compatibility you can help by consulting libraries such as SourceForge’s Sarissa.

Static and dynamic web pages

The pages of the different websites behave differently, indeed in two main ways: static and dynamic.

The most common typology is the static one which, once written, remains such in terms of content and can be modified if the relative file is changed.

Dynamic pages, which are becoming increasingly popular on websites, work differently. The contents are updated within a database while the dynamic pages pick up the latest contents in real time and then present them to the user.

Compared to static pages, the contents of dynamic pages can change without having to rewrite the pages. The web server runs a program that generates the new page to show to visitors.

Continuous browser-server-browser interactions occur in dynamic pages. For each interaction, the page is totally recompiled and sent to the browser.

Ajax feeds the dynamic pages. Use your browser to request new content. When it receives them, it allows you to edit the current page in real time, without having to reload and view it.

In practice, here’s what happens with AJAX:

1) the browser requests the product list page.html;

2) the server receives the request, searches for the file and sends it to the browser;

3) the browser displays the page;

4) the visitor makes a request to update contents;

5) the browser requests new content from the web server which, in turn, sends it;

6) at this point, the browser inserts the new contents into the page without reloading it.

What are the advantages of Ajax technology?

Ajax allows extended functionality such as the following:

– improvement of automatic saving;

– monitoring of revisions;

– session management;

– access timeout;

– notifications about blocking a post in the presence of multiple editors.

With the classic web applications, users can fill in forms which, once sent, generate the sending of a request to the web server that responds by showing a new page or blocking.

Doing so in the long run takes a lot, too much bandwidth and all this can lead to a slowdown of the user interface.

How do Ajax applications behave instead?

They can send requests to the server aimed at obtaining only the necessary data.

As a result, they allow you to reduce the amount of data exchanged between browsers and servers and the process speeds up because data processing time is reduced.

Let us give you a trivial example: choosing a new nickname when creating an account on a website. With classic systems, if the chosen name already existed, you should fill in the whole form before you realize that the name exists and that, therefore, you have to change it.

By applying Ajax, however, after introducing a check on the onChange or OnKeyUp event of the text box, the site can immediately warn you that the name entered is not valid because it already exists.

Ajax technology: pros and cons

The great advantage of AJAX we have just described: it is the extreme speed with which an application responds to user inputs.

The biggest problem in applying this technology is that, without adopting suitable countermeasures, applying it could render the browser’s ‘Back’ button unusable.

This type of application does not allow you to navigate from one page to another.

Simply update a single fraction of the same document.

Google, to overcome the problem, uses a stratagem in its Google Maps: instead of using XMLHttpRequest it sends an invisible iframe to obtain the search result.

The latest generation HTML5 technologies, allowing to manage the browser history, solve the problem in 4 phases:

1) Block the refresh process with an event.preventDefault ()

2) Adoption of a new entity in the history through history.pushState method (state_object, title, link)

3) Request in the AJAX application

4) Handling of the popstate event.

We need to work hard with Ajax application design to solve the main page orientation problem.