First, I'm not trying to start a flame war! I am confused and I want serious advice.
I have a big application in PHP + MySQL to manage a ISP. It goes like this:
open user details page -> choose more details -> opens new page, etc (there are 5 or 6 different pages). So I thought it would be nice to open this details in different divs in the same page (div contents change depending on what I need to do).
Another example: I have a big list of pending installations. I click on each item and I open a new page with details. It would be nice to narrow the list and open a div to its right where I can see the details. But in the traditional way, the whole list would be reloaded, I mean, another call to the database would be issued.
When I discovered Ajax I thought that it was the answer. But I read that the server load of creating the XMLHTTPRequest object was much bigger than the load of making another call to the database.
Is Ajax the best solution? Or is there another way of doing this without reloading the whole page?
Is reloading the whole page so bad?

Thanks
Claudia from Patagonia, Argentina

Hi Claudia,

As with so many things, it depends ......

It is true that the creation of the XMLHTTPRequest object is pretty expensive, but most of that seems to fall on the client, not the server, which just sees a normal TCP connection request. In addition, there is the extra complexity of dealing with IE (ActiveX) vs EveryOtherModernBrowser. The good news is that this only has to be done once per session; the HTTPRequest object can be reused.

The big difficulty I have had in using AJAX is that some browsers take a lot longer to insert stuff into a DIV (using the InnerHTML property) than they seem to take when receiving a whole page. I have not tracked this down in any detail, but if the content of the DIV is large and complex, you may notice a serious delay by using AJAX techniques. Otherwise, this is probably the best overall way to update a portion of a page.

The other choice is to use an IFRAME for the variable content. This approach does not do as well at reflowing the parts of the page when the content changes size, but is probably more efficient, since the browser treats each frame or iframe as a separate window.

Finally, if you are using MySQL at least, you should know that the cost of repeating a SELECT request to the database is quite small; that server caches recent requests and their results, so if an incoming request matches a (still valid) previous request, no actual disk traffic is incurred; the server just repeats the cached result. This may change the analysis of which approach is more efficient.

My advice is to try all three on a test case or two, and get the browser to keep track of the time spent in each stage of the requests, and then report it once everything is done. This is easy in AJAX, harder if you use IFRAMEs, and nearly impossible if you do a complete reload. The only way I can think of to achieve this in the last case is to write Javascript that reads the clock time before and after the sequence "open a new window, specifying a URL; trap the onLoad event in the new window, and read the clock then; pass the finish time to the parent via a function call, which will do the math and report the time in the old window."

Good luck.

One more approach which may or may not be valid is to populate various div's and then hide/unhide them with javascript. I only just recently started doing this with small drop-down menus, so I have no idea how effective it would be on large amounts of data.

HTH

Forrest

p.s. here is a url that shows what I'm talking about:

http://javascript-array.com/scripts/...rop_down_menu/