Contact Info Contact Info
Tel:
(+632) 654 0001
Office:
WEB OUTSOURCING GATEWAY
Unit 3101 One Corporate Center, Julia
Vargas Avenue, Corner Meralco Avenue,
Ortigas Center, Pasig City, Philippines

Our Blog

16
Jun

4 Uses of AJAX (What is it and How it is Used)

AJAX logo

What is AJAX

Ajax? Is this the hero of Greek Mythology? Or the detergent? Nope, this is about web development/ programming technology. AJAX stands for Asynchronous Javascript and XML. From its name, it’s two markup languages that work together or working asynchronously – the Javascript and XML. The javascript is a language for making animated webpages and XML is a markup language (similar to HTML and tagged based) used to transport and store data or send messages from one application to another. XML stands for eXtensible Markup Language.

How does AJAX work?

In this example, you opened a webpage in a browser with thumbnails.

  1. For instance, you are using the Quora website and searched for the question: Can humans eat ants eggs? And then you go the bottom part where there are the upvote button and vote counter.

  2. You click the upvote button – What happens is that the browser (also called a client) requests a data from the server – that data is the upvoted button in blue and vote number four.

  3. The browser talks/calls to the server using APIs (Document object model and XML HTTP request The role of XHR API is to allow the browser to send or receive data from the server. It uses javascript and DOM to display the webpage dynamically. The javascript’s role in handling such events, requesting new data from the server and updating the specific part of the website (here the photos).

Without AJAX, the server sends the whole page to a browser. With AJAX, only the requested data updates will be sent to the browser and in this case – the upvoting of the upward arrow and the vote counter.

4. The server then sends the requested data which the DOM and Javascript display in the browser’s webpage and in this example the upvoted blue arrow and the counter turns to 4. AJAX makes such specific updates on a webpage possible without entire page refresh.

The term “asynchronous” means the client can request info pieces from the server without reloading anytime. This request can be requested by an event (clicking via mouse, hovering).

You are unaware that this happens in the background as such AJAX process happens in lightning speed – in seconds.

In simple terms, AJAX is a fancy term for a method for updating a webpage without refreshing it entirely. AJAX is made up of a group of technologies that work together, hence:

  • HTML and XHTML

  • APIs (DOM and XHR)

  • XML

  • Javascript

What are the uses of AJAX and samples?

  • Update web pages without reloading entirely - A website without AJAX would be non-user friendly and cumbersome. An example is a social media site such as Reddit. If you remove its AJAX, and will like to like or unlike the photo or comment and see it happen, the entire page will reload and perhaps go to the top part of the website. Other examples are Twitter’s tweet updates. Every time a trending topic comes, a new tweet appears without affecting the entire page.

  • Provide an autocomplete function - AJAX makes autocomplete possible in websites. Autocomplete gives a user some suggestions or lists of words, phrases and sentences. A popular example is the search bar of Google and Yandex. If you a question or keyword, a series of phrases appear. Autocomplete helps you save time by predicting a shorthand of what you typed before.

  • Comments on blogs and articles – This is another use of AJAX. The comments updates and appears immediately. You can see this in comments in Disqus and Blogspot.

  • Form validation – Form validation or web form is a client or browser-side form that makes sure that the user’s info is accurate and in the proper format. AJAX makes this updating of forms responsive and quick as possible without the need to reload. Examples are logins for username and password for websites and emails.

Form validation for the Yandex email service.

What are the benefits of AJAX?

  • Reduces the traffic between the browser and server - This reduces loading times and internet bandwidth consumption.

  • Makes the web page interactive and responsive - You can interact more with the webpage by hovering an upvote button in the quora example, add a comment to Reddit or search the search engine with drop-down suggestions automatically showing while typing.

  • Allows JSON (Javascript Object Notation) – JSON, an alternative to XML, is slowly replacing XML as JSON is less verbose and faster to parse.

What are the disadvantages?

  • Increased development and design time – Since AJAX combines XML and javascript, it can add more codes and programming thus more coding and designing time. For newbies, this means an additional learning curve.

  • Search Engines may not index all content with AJAX – Javascript codes can be a little complex for search engines such as Google, Yandex, Yahoo Duck Duck Go and Bing. Although, there are some ways to crawl AJAX content. Here’s a quick reference.

  • Ajax may not run on browsers not supporting XHR requests – Browsers that don’t support AJAX are those outdated, the good news is that many browsers support the technology. If your browser supports XHR, then it supports AJAX.

  • Pressing back button problem – Last changes aren’t saved when the back button is clicked.

  • Decreased security – AJAX may pose security risks because of the following reasons:

  • Prone to Security Problems – All data are stored on the browser or client-side that makes the data open to everyone.

  • Prone to Hacking – AJAX’s calls (data requests) are in plain texts that may reveal variable names and database details. Hackers may insert malicious scripts into browsing sessions.

Tags: , , , ,