Search code examples
jqueryajaxresourcesloadingbandwidth

Does. load() load the whole content of the requested page or just a portion?

I am implementing ajax page loading for some parts of my website. I am trying to save some bandwidth and get faster page load times.

I have read that .load() loads the whole content of the page being requested instead of loading only a portion of it. Thus, not saving me any bandwidth, and perhaps not even loading pages faster to the end user.

  • Please notice that when I use .load(), I am selecting a portion of the page to be displayed.
  • Please keep in mind that my site is for JS and non-JS users.

1.- Is it true that .load() loads the whole content of the page even if only a portion is selected to be displayed?

2.- If that is true, then, what can I do to load pages via ajax requesting and loading only a portion of the page? Thus saving me some bandwidth.

3.- Will this result in faster page loading times?

Solution

  • Does. load() load the whole content of the requested page or just a portion?

    The whole content. The only way to change that would be by changing the server-side code to only return the desired content when it is an ajax request. Ajax requests can be detected by looking for the x-requested-with header.

    Sample logic would be:

    isAjax = doesHeaderExist && doesHeaderEqualXHR;
if (!isAjax) {
    include("header.ext");
}
include("page.ext");
if (!isAjax) {
    include("footer.ext");
}