ajax-pre-get

Syntax

ajax-pre-get: "(url)" [method] [return type] [get-pars(parameters)] [post-pars(parameters)] [max(number)] [cache] [every (time)] [after (time)][, ...];

This command is similar to the "ajax" command, except:

1. It does not draw the results after the results have been gotten from the server. It gets the page loaded in advance, usually when the user moves their mouse over a link which triggers the pre-get action.
2. It then stores the html retrieved in standard memory, so that if the exact same ajax call is later run, the page is retrieved from memory and then skips straight to the afterAjax event instead of performing an actual ajax command at that point. The urls for both the ajax command and the ajax-pre-get command must be identical.
3. The ajax-pre-get command comes with a max parameter, eg. max(2) or max(3). This specifies the maximum number of concurrent ajax requests. If you are delivering your website to an area that has a very slow internet connection, or you have large web-pages, or you need to handle jerkiness due to slow CPU processing on the receiving browser, or you just have a very busy site, you may want to limit this number. The default is 6 concurrent ajax requests. On this website there is a max(2) setting.

This command is extremely useful when you are trying to give the impression of fast page loads by pre-getting pages before you actually need them. A common use would be to run ajax-pre-get commands on mouseover events. We use this technique on this website to make you think it runs fast. Open up the console and mouse-over some links to see what happens. This technique doesn't work on mobile though, as there is no mouseover event on mobile, obviously, unless you've got a weird phone.

Even if your pages are slow to load due to heavy imagery, you would benefit from using this command, as we are only getting text from the server and not actually drawing it on the page, so only your HTML or JSON file contents are getting retrieved. No other page resources, such as images, are pre-gotten.

Warning: If your user-base is on dial-up, has a slow computer or a really slow internet, or your website is just slow anyway, then using this command with loads of pre-getting can result in a jerky performance hit, as the browser and CPU plays catch-up with the server responses. If this happens - use the max(n) option (see point 3 above).

The actual text required to draw a webpage is relatively small and can be measured in low kB (usually), so the memory imprint is minimal from this technique.

Pre-getting resources like large images however, which may never get seen by the user, is not necessarily a good idea. It could absorb all their mobile download allowance without their consent. So we have intentionally not set up a way to pre-get resources. If you need to do it for some reason, you'll need to do it via an external JavaScript function using "func", or after page load outside of the Active CSS flow. Pre-getting HTML files, however, is fine - they are generally tiny files. And the speed benefits are noticeable.

Using conditionals with ajax-pre-get

In using ajax-pre-get, care needs to be taken if you are using conditionals for your ajax commands.

All events with ajax commands need to be mirrored in exactly the same way by ajax-pre-get events. They should look exactly the same, with any conditionals included, but instead of being attached to click events like regular ajax calls, you attach them to mouseover events.

You could additionally add a media query or a width conditional to your ajax-pre-get so pre-getting only works on devices over a certain width, but leave the ajax command without either of those.

Implementation

A recommended implementation for this would be to get your regular ajax commands all working first on your click events, including how you want it to work on mobile responsively, get those working fully so everything works great, then duplicate the event selectors with ajax but with mouseover events, along with any conditionals, and populate the mouseover declarations with the exact same ajax action command, but rename the command "ajax-pre-get".

Note: In case it is not clear, you still need to attach regular ajax commands to events as you would normally. But the ajax command won't go the server for the information if the information has already been pre-gotten with ajax-pre-get. You use ajax-pre-get commands alongside ajax commands. The ajax-pre-get will never output data all by itself. It only prepares the data - it gets the page ready for the ajax command to just display it. Ajax return data is only ever displayed after an ajax command from the afterAjax event declaration.

Note 2: Also - don't use this on pages that you need to be "fresh" each time. This is a similar command to the cache parameter on the ajax action command - pages will only ever load once and then stay around in memory until the page is reloaded. For a "fresh" page, use a straight ajax command, with the parameter "nocache" if you want to be certain it is freshly loading each time.

See the SPA tutorial for a real config use of ajax-pre-get.