javascript or php - what is most efficient for updating?

Question

I have several update methods in a javascript file, used for updating my ajax application, like so:

function updateByPk(layer, pk) {
   url = "get_auction.php?cmd=GetAuctionData&pk="+pk+"&sid="+Math.random();
   update(layer, url);
}


function updateByQuery(layer, query) {
   url = "get_records.php?cmd=GetRecordSet&query="+query+"&sid="+Math.random();
   update(layer, url);
}

function updateByPage(layer, query, pg) {
   url = "get_records.php?cmd=GetRecordSet&query="+query+"&pg="+pg+"&sid="+Math.random();
   update(layer, url);
}

I am wondering if it would be more efficient to do things like pagination and such strictly through php, simply by reloading the page, rather than using an ajax method. I am not sure which method is more efficient, or if there are advantages and disadvantages to each.

Answer 1

if I get the question, then you're asking whether pagination, and similar, is better to be done through Javascript + AJAX, or to be done through a call to the server?

I'd personally say to just use a request to the server. AJAX is uneccesary in cases like this, other than for "bling" factor (yes, that is a technical term :P )

If you're writing the app correctly with accessibility in mind, you should HAVE to write the "direct call to the server" bit anyway (for when someone has Javascript turned off and clicks on one of your "next page" links.

Having the Javascript there means that 1) you've got extra code to maintain. 2) you break the back button. If you only implement the AJAX method, then you have no way of accessing the data on other pages. And you've no easy way of linking to it (by copying the address bar) if you do.

I will personally only ever use AJAX for things that are going to add functionality to the page, without taking any other functionality away, for example, checking if a username is taken when filling in a registration form. Auto-suggest, etc etc.

Answer 2

The Ajax will be easier on the client and the server. The client will not have their scrolling reset, wont have to check for all new assets like stylesheets and images and will load things much quicker. The server doesn't have to generate a whole page with a header and footer; it only has to generate the part of the page that changes.

The downside is that it's a little harder to code with a good UI (adding a loading spinner, and related doodads). And if the client has javascript disable, your page breaks. So really, you need both if you do ajax at all. It's easy to code in graceful degredation for Ajax though.

<a href="/search?term=foo&amp;page2" onclick="loadPageViaAjax(2); return false">
  Next
</a>

That's an example of a link that will work even without javascript. If javascript is on, the onclick is triggered, the ajax happens and it stops the following of the link with the return false. If there is no javascript, the onclick is ignored and the link is followed as normal.

Answer 3

Paging with AJAX advantages:

• Potentially less transmitted data, which means faster page loads and less bandwidth usage.
• Smoother user experience

Paging without AJAX advantages:

• Back and Forward buttons will work in the browser
• You can have the URL of a specific page (although you can do this with AJAX too with the page.php#pagenumber trick)
• Perhaps a bit easier to write and maintain

Answer 4

It depends on your definition of efficiency. Loading new content through AJAX will net less bytes going over the wire, but might be more strenuous on your server if you can't cache the dynamic content into static files (which I assume you would when reloading the page). However relying on AJAX too much might cause your pages to be less accessible for users whose browsers don't support javascript (they exist) and might hurt your sites capability to be indexed by search engines. A best of both worlds scenario would be to let the links point to a reloaded page, but override that behaviour with javascript to load in new content through AJAX.