Javascript – How Much AJAX is Too Much?

ajaxjavascriptrest

My current project is part of a highly linked architecture, with individual systems each owning certain pieces of data, and exposing them RESTfully. Both our web services and our user interface take advantage of this linkage, storing links to the resources in other systems rather than storing a copy of the data, and presenting composite views by fetching the current state of those resources.

For example, my system might be responsible for a yearbook of people (I'm not using our real data and relationships here, of course). People are owned by another system, and perhaps have contact information (email addresses, phone numbers, twitter handles, etc). That contact information might be stored in another system that has details about the phone number or email address.

In order to present a view in my user interface, I then have to fetch my own data and follow the links in order to present the appropriate details from these other systems. I could cache certain parts of this information but likely want to retrieve the newest details.

In some of my pages, I have a reasonably small number of lookups to do this kind of data enrichment. In other pages, I am presenting a lot more information and end up with an explosion of data as I get a list, expand each element, expand each of those, and so on. I have experimented with providing a service which does this aggregation and returns all the data needed by the view in a single response. However, I am not sure whether this is the cleanest way to provide this.

Can anyone suggest some strategies for determining when I should directly use AJAX requests to fetch this data? At what point should I switch from individual requests to providing aggregated services to build the data? Or is there some other technique I could apply?

Best Answer

I think how many Ajax requests you should perform and when they should be done really depends on your UI. What I would think of first is what is the most important information related to the data I'm loading. For example, if it's a person, I'd say his first name, last name, birthday date are what I want to display (or the kind of information you can find in Wikipedia's right side frame for displaying personal information). I think you have to display critical information as fast as possible however it's up to you (or your client) to determine what is critical and what is not.

You can then use Ajax requests to load more detailed information (addresses ? phone numbers ? twitter handles) that at first is not available or/and hidden to the user, for example in a "tab" that is not selected. The selected tab by default being the one with the main information. You have two ways to do it then:

  • Load when the page is ready, that is when it has shown up to the user. It is loaded while the user looks at the main information.
  • Load when the user clicks on the tab. The user will have to wait a little bit (could be very fast and nearly unknown to the user).

Either way, adopt consistency and always make sure to show the famous "loading icon" when the data is not yet available. The second choice may not be great, but it could be useful for Ajax requests that take some time, return a lot of data and more than anything else need a complex widget to be displayed. You also avoid unnecessary Ajax calls.

How many Ajax requests you perform (service aggregation as you wrote means to me you aggregate data server-side) is less important in my opinion than the total time it takes to get the data you need. If you display the information faster with one huge request, go for it, if not, stay with several small requests/responses. You should set yourself a goal in terms of loading the page as fast as possible and try to attain it.

Anyway, you will have to experiment and see what gives the user the best experience. I know it's not a great advice, but that's what I'd try to do.