Is AJAX on pageload bad?

Question

I saw this on nerd dinner and other sites. When loading a page (in JavaScript, through a browser), an AJAX request will be issued to get some data from the same server that displayed the start page. The data will be small, and there are no technical limitations that would otherwise prevent them from simply tearing down the data in the first place.

Isn't that bad? This seems like a waste of AJAX calls, as they can simply display this data as JavaScript with the rest of the page.

My bank uses AJAX to extract information to create form elements for the "Transfer Funds" form. This information is a few kilobytes, an AJAX request seems redundant.

In a botanical dinner, at least in MIX09, the video that I saw, they request (via AJAX) a set of lunches for rendering on the map control when the page loads.

I could understand if we are talking about large amounts of data that would otherwise take too much time to tear them down, but if there were less than 10-15 kb, would it be better to just pull out the data using markup? Do they do this to avoid data caching?

Change I suggest that instead of opening an AJAX call to the server to pull json data for onload clients, just try asp.net (or something else) to make json in the content of the pages when it does the rest. I just felt the need to point this out, because the actual client-side code would be exactly the same, except where the json variable occurs.

Answer 1

Generally speaking, in my experience, you want to avoid having any Javascript on your page you can. By this, I mean that if you can do this on the server, and not with Javascript, then you need to. Your page will load faster and you will only have a better user interface.

Sometimes it can be more, especially if the same AJAX call at startup is used during the page at subsequent points. Perhaps you are duplicating the code by doing this on the server. Thus, there is a trade-off between performance and the amount of code you want to write.

Another aspect of this is that Javascript is sometimes used defensively against bots, scraper, malware (e.g. keys, etc.), etc. both for your safety and for the site. This could mean, for example, loading page elements using Javascript simply because it makes it hard to hack or clear. It's unbelievable that you are just harder.

Answer 2

Back button

If the user clicks the "Back / Forward" button, the server will not be called again from the moment the content was pulled from the cache. However, when ajax is called on the user side on the client side, the server will always be called.

Answer 3

I would write a server homepage to enable this first potential AJAX call, and then use the actual AJAX for something after that. You want to do more work on your end to make it faster for the end user.

I saw a site that uses AJAX for main content. When the side is under load, it will display the navigation bar, after which you will not see anything for another 5 seconds, because it loads with an AJAX call, and you lost your place in the queue. It is annoying like hell.

Answer 4

I use AJAX when loading mostly to avoid duplication of effort and keep things simple - if I still need to do client-side rendering for updates, it is best to use the same code for the initial rendering.

Everyone created by javascript has consequences for searching, etc., but as long as you know about this when designing a page, this is not a big problem.

Answer 5

As a rule, you are right if you initially take out the page from the server, why take another trip to get more data? But, if the data is large, then you can also have a page load so that end users can see something and then pull the data out.

Data can be pulled by Ajax wise, because a similar data extraction method is often used on the page. Why write a separate data pull mechanism for bootstrapping if you intend to do multiple Ajax loads anyway.

Plus, always remember that demos are just a demo. The Nerd Dinner guys were probably more interested in how to use AJAX with MVC than about other priorities.

In any case, a good catch.

Answer 6

Just the reason I could do this:

Making an AJAX call to load the source data can serve as a way to verify that Javascript is enabled and subsequent AJAX calls. Otherwise, it will happen that the first server call made by the client using JavaScript does not work, and the user may be disappointed with why it does not work, not realizing that the reason is their security settings.

Answer 7

I agree with Adam. If you have a complex page that may take some time to render your server, but it only has a few bits of dynamic content, then you can get great performance benefits from aggressive HTML caching and loading dynamic content using Ajax.

As an example, imagine the main page of a site, which should display the username in the corner. Everyone who visits your site will get to this page, so the more caching you can improve for HTML, the better. By filling out the username with Ajax, you can serve the same cached version of HTML for everyone and serve much less dynamic content separately.

Cachability becomes even more important if you work with a not terribly fast server technology - Ruby on Rails in the case of it. You can get a good speed boost on the server side by passing pages through a proxy server, such as Varnish or Squid, which stores a cached copy of every page that is served. Subsequent requests for the same resource will be served from the proxy cache instead of your server code until the cache becomes obsolete.

Answer 8

I do not understand how the size of the request / response makes any difference. Whether AJAX is used or not is more a matter of usability, and one of the factors is the time to make the original page. Users do not want to wait. If you need only 2 seconds to calculate a page element on the server side, you should definitely consider sending the page without this element, and then get the element through ajax. Even if this page element has only a couple of bytes.

Answer 9

An AJAX call when loading a page is to preserve the separation of presentation from content / data.

The presentation (HTML page) can be cached by the browser, and the AJAX call only retrieves the data for updating the user interface.

This can lead to very clean separation, as well as some performance benefits. In fact, you transmit less information over the wire, as you will not miss the soup HTML tag - just any view in which you have data.

Answer 10

This is not the size that is the main problem, but the additional delay / block request for available parallel request slots.

Answer 11

Against Ajax on page load

• Uses an additional connection on your server to process an AJAX request.
• You can leave the page idling while trying to end the call.
• Not indexed by search engines.

For Ajax on page load

• Convenient. Saves data on the page.
• Makes easier changes to the data.
• Ability to implement Ajax response caching.
• Create many "widgets", each of which processes its own calls.

A lot of this also depends on where your building is located. You want to be careful with larger sites so you don’t rely on tons of small Ajax calls directly to load the page.

Answer 12

The best reason for this is having one source for the content: instead of getting the first instance embedded in the page and the updated instances coming from Ajax, now each instance comes from Ajax.

In other words: doing it your own way is a double job, with the probability (due to errors) that the two versions behave differently.

Answer 13

The best solution is to call the Ajax function on the server side and load the json content into pageload. This preserves consistency and avoids additional connectivity at startup.