Navigation

Solutions to 5 Common Ajax Problems

JavaScript, Web Development | Dec 14, 2009

The modern web developer who does not consider Ajax when planning or building their websites is potentially missing out on a powerful tool to enhance usability.

There are however, challenges in implementing Ajax functionality on a web page.

In this article we’ll discuss solutions to five of the most common challenges that a developer faces when using Ajax to enhance the content on their website.

Although there is a lot more to discuss and research on all five topics, this post should give beginners and intermediate Ajax developers some solid tips on implementing Ajax functionality in a more user-friendly and accessible manner.

 

Problem #1: Content Is Not Backwards-Compatible

This problem occurs when a designer has incorporated JavaScript and Ajax enhancements into their website’s architecture without making provisions for browsers that have disabled JavaScript.

Nothing is wrong with planning a website with JavaScript and Ajax; in fact, in today’s market, JavaScript considerations should be integral to the planning process. But you should still ensure that the website is backwards-compatible (or that it degrades gracefully) upon launch.

Solution: Implement Ajax as an Enhancement to an Already-Functioning Website

While Ajax may be integral to your planning of the website’s architecture, ensure that all content is accessible through conventional server-side methods.

Let’s say you have an “Employee Information” page that has a separate link for each employee. Using server-side technology, you could display the content for a particular employee based on a value passed through the query string, like this:

<a href="employees?view=CEO">John Doe - CEO</a>
<a href="employees?view=VP">Frank Smith - Vice President</a>
<a href="employees?view=Accountant">Jim Williams - Accountant</a>

All of the links above point to the same page, the “Employees” page, which changes according to the variable in the query string. Each employee’s information would be loaded from the server, which could be done in a number of ways: via server-side includes; through a database; or even using XML.

Whichever employee link is clicked, the full page would have to load in order for the requested information to be delivered.

So, the content is fully accessible before any Ajax enhancements are layered on top. Then, using JavaScript, the full page refresh could be interrupted and the content loaded instead via Ajax. The clicked link could be identified by an ID or by checking the value of the HREF attribute in the anchor.

Although the content is fully accessible with JavaScript disabled, most users will see the enhanced Ajax-driven version.

The principle of progressive enhancement for Ajax is well known, because it is commonly used for unobtrusive JavaScript techniques and is inherent in CSS, as illustrated by the graphic below:

Ajax as an Enanchement Layer

So, build your website to work without JavaScript, and then add JavaScript as an enhancement, just as you would mark up your content in HTML and then “enhance” it with CSS.

 

Problem #2: The Browser’s Loading Indicator Isn’t Triggered by Ajax Requests

Almost every browser has a way of visually indicating to the user that content is loading. In current browsers, the indicator appears on the tab that’s loading the content.

The images below show this animated indicator from a few popular browsers.

IE Browser Loading
Internet Explorer’s loading indicator is a solid circle with a gradient that spins while the content loads.


Firefox Browser Loading
Firefox displays a similar icon of small spinning circles in different shades of gray.


Chrome Browser Loading
Google Chrome spins a half-circle.

The problem is that Ajax requests do not trigger this “loading” indicator that is built into browsers.


Solution: Insert a Similar Loading Indicator Near Content That’s Loading

The common solution to this is to incorporate a custom progress indicator into the Ajax request. A number of websites offer free “Ajax loading” graphics.

Preloader.net
Preloaders.net has a number of fancy, customizable animated graphics to choose from.

Implementing this custom loading graphic, or progress indicator, into your website’s Ajax functionality is simply a matter of showing and hiding it at the appropriate times via JavaScript.

Your Ajax code will include lines of code that tell you if the request is in progress or completed. Using JavaScript, you can show the animated graphic while the request is being processed and then hide it when the action has completed.

 

Problem #3: The User Doesn’t Know That an Ajax Request Has Completed

This is related to the previous problem but is often overlooked, because the developer might assume that the disappearance of the “loading” indicator suffices to inform the user that the content has completely loaded. But in most cases, definitively indicating that content has been updated or refreshed is better.

Solution: Use a Distinct “Request Completed” Message

This can be done similar to how form submissions are confirmed. After a link has been submitted on Digg, the page lets you know very clearly that your submission has been received:

Digg's Form Submitted Indicator

Although this particular indicator does not point out a completed Ajax request, the principle is the same: the “Success” box appears after the page that submits the form has finished loading, and the box is colorful and distinct.

A similar graphic or indicator could be used at the end of an Ajax request to tell users that content has been updated. This would be implemented in addition to, not instead of, the progress indicator proposed for the previous problem.

A similar but subtler way to indicate that an area of content has been updated is the yellow fade technique. This method is familiar to users, unobtrusive and works well with Ajax-loaded content.

 

Problem #4: Ajax Requests Cannot Access Third-Party Web Services

The XMLHttpRequest object, which is at the root of all Ajax requests, is restricted to making requests on the same domain as the page making the request. But there are instances when you would want to access third-party data via an Ajax request. Many web services make their data accessible via an API.

Solution: Use Your Server as a Proxy

The solution to this problem is to use your server as a proxy between the third-party service and browser. Although the details of this solution are far beyond the scope of this article, we’ll go over the basic principle at work.

Because an Ajax request originates in the client’s browser, it must reference a file at another location but on the same domain as the source of the request.

Your server, however, unlike the client’s browser, is not limited in this way. So, when the page on your server is called, it runs in the background as it normally would but with access to any domain.

This doesn’t present any security risk to the user because the requests to the third-party service are made on your server. So, once the information has been obtained at the server level, the next step in the Ajax call is to send a response back to the client, which in this case would include the data obtained from the third-party web service.

Using Your Server as a Proxy to Access Web Services

If you want more details on this powerful method of combining web-service access with custom Ajax, definitely check out other resources, some of which are listed below.

Further Reading:

 

Problem #5: Deep Linking is Not Available

This is a trickier issue but may not be required depending on your type of website or application. The problem occurs when content is loaded via Ajax and then the “state” of the website is changed without the URL that points to the page being affected.

If the user returns to the page via a bookmark or shares the link with a friend, the updated content will not be automatically displayed. The website would instead revert to its original state. Flash websites used to have the same problem: they did not allow users to link to anything but the initial screen.

Solution: Use Internal Page Anchors

To ensure that a particular “state” on an Ajax-driven web page is linkable and bookmarkable, you can use internal page links, which modify the URL but don’t refresh the page or affect its vertical position.

This simple code demonstrates how this is done:

var currentAnchor = document.location;
currentAnchor = String(currentAnchor);
currentAnchor = currentAnchor.split("#");

if (currentAnchor.length > 1) {
	currentAnchor = currentAnchor[1];
} else {
	currentAnchor = currentAnchor[0];
}

switch(currentAnchor) {
	case "section1":
	// load content for section 1
	break;

	case "section2":
	// load content for section 2
	break;

	case "section3":
	// load content for section 3
	break;

	default:
	// load content for section 1
	break;
}

The above is not a functioning piece of code but rather a theoretical example to demonstrate the main steps involved.

The first two lines of code put the current page location (URL) in a variable. Then the location is converted to a string so that we can manipulate it.

Next, we “split” the string into two parts via the anchor symbol (#) and subsequently check to see if the array that is created from the split is greater than one item. Greater than one item means that the URL has an anchor.

If the URL has only one part, that means no anchor is present. The subsequent “switch” statement loads content according to the value of the anchor. The switch statement has a “default” option in case no anchor is present, which would be the same as loading the page in its original state.

Furthermore, we would apply code to deal with links that point directly to specific content through internal anchors. A link that points to “content2″ would load the content in “content2,” and the string “#content2″ would be appended to the current URL.

This would change the URL by adding an internal anchor, without changing the view of the page but preserving an identifier that indicates the desired state of the page.

This explanation is only theory. The concept works, and it works very well. But I haven’t explained all of the possibilities, drawbacks and other subtleties of building a website or page in this manner.

Follow the links below for a more comprehensive discussion of the topic, or experiment with it yourself. Also, note that this can be tested using content that changes with JavaScript alone, and doesn’t need to utilize Ajax.

 

Further Reading:


This post was written exclusively for Webdesigner Depot by Louis Lazaris, a freelance writer and web developer. Louis runs Impressive Webs, where he posts articles and tutorials on web design. You can follow Louis on Twitter or get in touch with him through his website.

Do you know of any solutions to these or other Ajax challenges? Please share your comments below…


Share this post
Comments (no login required)
  • http://www.fiveminuteargument.com Bobby Jack

    Solution #5 is right on the money for me – something I just realised the other day. It’s also useful for general dynamic content, not just that served by AJAX (e.g. jquery-ui’s tabs()). And it also serves to avoid breaking the back-button/history. I haven’t seen a way to suppress the page-scrolling, though – maybe one of those articles covers that.

    24ways.org could learn a lot from this technique …

  • pablo dias

    Hey buddy,
    the “yellow fade technique” is broken (linking to some local content).
    At all, nice tips. Thank you!

    • http://www.webdesignerdepot.com Walter

      Thanks, will be fixed.

  • http://www.squiders.com Maidstone Web Designer

    As ever, thank you for a useful post

  • http://tr.im/mewC Rahul – Web Guru

    Very well written article. Help me know more abt Ajax.

  • http://www.inveve.com creative_blondes

    Wish I could get myself to learn some AJAX.. i truly believe that AJAX is the future of webdevelopement.. but the whole programming thing is just too masculine for me :P

  • http://www.jennamolby.com Jenna Molby

    Thanks for the useful post!

  • http://www.chotrul.com/ Chotrul Web Design

    The deep linking issue is part of a wider issue, in a way, which is that of the impact of using AJAX on the SEO of a site. Something that needs to be considered is whether that content is readily available elsewhere on the site for the SE’s, otherwise it’s lost to them.

  • http://www.feedgrids.com Dimi

    I think providing the user with cues of what is happening in the background is very important for the experience. Sometime Ajax doesn’t make that visible.

    This is a great post. Thanks!

  • http://www.cookielabs.com Cookie Labs

    Great article, learnt a few thing about Ajax that I did not know !!!

  • http://www.vunkyblog.net Vunky

    Great article, number three bit me in the ass just a couple of months ago. Customers where unable to sign up because the did not know that an ajax request was loading.

  • Arun N

    Great Explanation, this points are very useful to me for develop the WEB 2.0 application

  • http://www.codesigner.eu Simone Scarduzio

    What about a solution to make the “browser’s back button” aware of ajax pages load?

    • http://www.impressivewebs.com Louis

      Simone,

      There’s a link at the end of the article that discusses preserving the back button in Ajax-based websites, but it is a very complicated process, and not something I have enough experience or knowledge of to talk about yet. But it is definitely a topic worth looking into for Ajax developers.

    • http://www.inveve.com creative_blondes

      that could be annoying, cuz i’ve often clicked back because a certain page had too much loadingtime.. best solution is simply having a good loading indicator..

  • http://www.orphicpixel.com Mars

    thanks for this details ajax thingy.

  • Floor

    For problem #5 i often use reallysimplehistory (http://code.google.com/p/reallysimplehistory/) it triggers every time the anchor tag has changed. This way you can track the previous changes.
    Note: use this when new content is requested not when submitting data :)

  • http://www.level09.net level09

    backward-compatibility is very expensive .. a message that says that “you need javascript Enabled” is faster / cheaper.

    ex: basecamp

  • http://leslievarghese.com Leslie

    kool very helpful !

    For Problem #2(showing preloader) you could also do stuff like changing the document
    title with ‘loading…’ while ajax request is being processed, and/or also changing the page favicon dynamically with some animated loading image.
    This would be helpful for a user who has temporarily switched over to another tab window.

  • http://www.jannis-gerlinger.de Jannis Gerlinger

    A very good article. It shows some problems with ajax!

  • http://hdragomir.com Horia Dragomir

    @Simone Scarduzio, changing the hash will trigger a new state in the browser’s history. So the “back” button will work. IE is the bad-boy, so you will need an “iframe hack”

    This is a great round-up for people just starting to play with Javascript and AJAX, really.

  • M.R.

    Thanks for the article. Great job.

  • http://www.i-mediaconcepts.net Stone Deft

    As Simone Scarduzio pointed out the back button and history functionality in ajax should be on the top of the list

    • http://www.impressivewebs.com Louis

      I agree, however, as I mentioned in a previous comment, preserving the back button in Ajax is complex, and I wasn’t aware of any simple solution through my research. WDD generally doesn’t publish overly-technical articles on programming, so I’m not even sure if it would be suitable for this site anyhow.

      I’ll have to check out “reallysimplehistory” which another commenter recommended.

  • http://www.vgreano.com Victor G.

    Yes for #5….never thought about deep-linking, i should try it out. And yes, full flash sites is annoying when sharing…frankly I get annoyed even when I cant copy text because its a flash document.

  • http://gulati.info Austin

    Awesome post! That’s definitely something that I have to focus on. When I use AJAX, I don’t always make it backwards compatible.

  • http://www.r4-ds.com.ar dsi r4

    I face the second problem very frequently. Thanks for the solution to it.

  • http://www.kaplang.com/blog Michelle

    great article

  • http://billbolmeier.com Bill Bolmeier

    I like this type of article because it diggs into the problems of a new language for some. Helps keep these in the back of my mind as I work with ajax. Thanks.

  • chrispaul

    nice article.. *cheers*

  • http://www.thefuse.se/ Thomas

    Regarding #3

    What I’ve done lately, in addition to what you’ve described above, is defining the following CSS-class:
    BODY.ajax-loading {cursor: progress !important;}

    When I call for the Ajax request I’ll just apply the class “ajax-loading” to the BODY-tag, and when the request has completed it gets removed.

  • http://web4half.com EmmA SmIth

    Great SHare…

    I love it..

    This is a great post. Thanks!

  • http://www.sanbaldo.com baldo
  • http://www.zoombits.de/speicherkarten/usb-sticks/memory2go-2gb-usb-stick/5801 2gb usb stick

    Hi,
    Wonderful article.I had little bit idea about AJAX.But your post helped me in understanding the whole concept of it.Really Very helpful text.

  • assad

    I need some help about an issue. i.e

    i am loading the contents (from php files e.g xyz.php) when any menu button is clicked to the content_area (div) on the index page using ajax and jquery.

    now when i add some ajax/jquery to xyz.php it doesnt work when page is loaded in index.php.

    if i open xyz.php independently everything works.

    what am i doing wrong?

  • http://emlakx.net emlak ilanları

    As Simone Scarduzio pointed out the back button and history functionality in ajax should be on the top of the list

  • http://www.texturepl.us Texture Plus

    new to ajax, but i hope to find more helpful resources like this one about ajax on your site

  • http://Notuploaded... Anant

    I am getting response “Access Denied” as XHR.resposeText.
    I am using wamp server.
    The PHP file (which i want to access) is in similar Directory.

    Please tell me solution….

  • http://www.fiveminuteargument.com Bobby Jack

    @Anant: The comment thread on a blog isn’t really the best place for troubleshooting implementation problems. Have you tried stackoverflow.com?

  • Mick

    Nice tutorial, You can find more helps here http://phpschools.freehostia.com/category/ajax