AJAX & jQuery Development

Viewing pages on the internet is based on a technological architecture called client-server. In short this means that there is a client (a local piece of software, in this case, your browser) and there is the server (a remote machine where the actual webpage files, and all the other files associated with it, are stored).

In simple terms, when you view a webpage your local browser uses the website address (URL) to access the webpage files on the remote server machine. It then renders the code that it finds in these files and displays the results for you locally. Initially websites were made up of text files and moving around a website meant just pointing your browser to a different file on the server and then displaying it. Now websites are more complex and there are databases storing a lot of the information you see, so the browser is pointing to files which are program files performing database queries and then creating the page dynamically with content and bringing it back to the browser to display.

But in any case, there is this constant back and forth between your browser (the client) and the program files (the server) in order to produce what you see on your computer screen. Because of this back and forth, how quickly your page loads and how quickly information can change is depending on what else is happening on the internet when your browser is going out to read the program files. This can slow things down a lot, especially if you are viewing a complex website, like a portfolio site or an on-line shop.

There are two technologies that have been developed which bridge the journey the client must make to server, making it possible to update data on a page without actually revisiting the server and reloading it.

AJAX

AJAX (short for Asynchronous JavaScript and XML) uses a number of existing technologies to achieve this. The AJAX engine acts as an intermediary between the client and the server. It can work with information already loaded and make the “decision” to go to the server only when it needs to without the browser itself having to access a program file directly and causing the page to refresh. This means that you can have sections of your page update with fresh, live data but without the entire page reloading and taking up time.

And taking up time makes for a very frustrating user experience.

jQuery

jQuery is a JavaScript library which can work with the AJAX engine but can also be used on its own to perform simple client-side events, such as animations, form validation or onscreen calculations. A good example is the processing of checking the data being submitted in a form.

You could create a form that uses a program on the server to make sure the required data has been captured or that data is in the proper format (e.g., email addresses or dates) but that means that the data in the form needs to be sent back to the server and then if there are any issues this information needs to be sent back to the browser so the user can address the issues. You can do the same with a jQuery script and all of this happens immediately, BEFORE the data is sent back to the server for processing. There is no waiting for the client-server journey or the page refreshing. You only go back to the server when the data is correct and ready to be processed.

jQuery can also be used to perform a myriad of changes to your page layout and design without having to go back to the server to read a CSS file to collect new HTML. Boxes can appear and disappear, colours can change, menus can expand and detract, and real-time calculations can be performed and appear on screen. All of these happen immediately because they are all happening in your browser and aren’t involving the remote server at all.

These two client-side technologies help to make a website dynamic and alive. They increase the overall usability of website and add to its functionality without adding to its overhead. And most importantly, they improve the user experience because they eliminate the need to wait in order to get results.

Since a positive user experience is one of iSeek’s most important goals in designing any website, we endeavour to utilitise these technologies to their fullest potential.

If you have a project where you think we can offer help we would like to hear from you.

 Return to Knowledge Base