User Personalization with PHP: The Verification Code [Page 2]

On-Demand JavaScript Explained [con't]

Whereas the XMLHttpRequest technique allows you to download individual code snippets, the following techniques are used to download an entire JavaScript file at once. They also have the advantage that you can load JavaScript from external domains and the script will be included in the browser cache.

Setting a Script's SRC Property

A script element's src property can be used to load a new script at any time. Previously-loaded scripts remain in memory, even after the src property has changed. Here's how to do it:

<script type="text/javascript" src='oldScript.js' id="dynaScript"></script> ...further down the page <script type="text/javascript"> document.getElementById('dynaScript').src = "newScript.js"; </script>

Dynamically Creating the <SCRIPT> Element

This technique goes further by dynamically creating the element from scratch. DOM methods are used to reference the HEAD portion of the document, create a new script element, set its type and src properties, and append it to the HEAD element:

<script type="text/javascript"> var oHead = document.getElementsByTagName('HEAD').item(0); var oScript= document.createElement("script"); oScript.type = "text/javascript"; oScript.src = "utilities.js"; oHead.appendChild( oScript ); </script>

Writing a Script Element Using document.write()

Our final method relies on the long-standing document.write() function. Although easy to use, it does have a limitation in that it must be called during the loading of the page; otherwise, it will clobber the existing document! You must also pay attention to include the "/" escape character in the closing <SCRIPT> tag:

<script> document.write('<script src="https://cross.domain.com/other.js" type="text/JavaScript"><\/script>'); </script>

Here's a real life example of the above technique:

I recently worked on a chat application that was built using the Prototype Framework. My job was to make the chat app work within a content management system that used MooTools 1.1 or 1.2. To do that, I included a JavaScript file that would check for the presence of MooTools in memory and load it if it was not there. Subsequent code initialized functions that would bridge the gap between the two frameworks. The following code snippet is part of the main PHP file:

<script type="text/javascript" src="<?php echo $c->data_public_url; ?>/js/myprototype.js"></script> <script type="text/javascript"> loadMootools(mootoolsjs_url);</script> initScripts(); //myprototype.js function window.addEvent('load', function() { pfc = new pfcClient(); if (pfc_isready) pfc.loadChat(pfc_theme); }); </script>

Here's a couple of the JavaScript functions that are referenced above. The loadMootools() function uses document.write() to add the script to the page. The initScripts() function includes all the required functionality to delegate Prototype methods to equivalent MooTools ones or to those from own library:

function loadMootools(url) { if (window.MooTools === undefined) { document.write('<script src="', url, '" type="text/JavaScript"><\/script>'); } } function initScripts() { if (window.MooTools === undefined) return; //delegate to Mootools Array.filter() window.without = function(array, value) { return array.filter(function(item, index) { return item != value; }); } //... more code if ( MooTools.version == '1.11') { alert('Mootools 1.11 detected.'); //... more code } }

Script Loading Tools

There are already plenty of excellent libraries out there that utilize dynamic script loading. Some are limited to their own modules, while others can be used to import a variety of resources.

The Dojo JS Library

Dojo is one of the few JavaScript Frameworks that gives you the choice of which modules to include in your page.

First, add the main script to your page: <script src="dojo.js" type="text/javascript"> You can then include additional packages using the following code: dojo.require("dojo.packageToInclude");

The JavaScript Archive Network (JSAN)

JSAN may truly be ahead of their time by hosting an extensive library of JavaScript modules. Perhaps following the JavaScript On-Demand concept to its conclusion leads to the storing of scripts in online repositories so that developers can access a multitude of code snippets for every usage. Their method of including modules is called JSAN.use(). Here's an example of a script that performs a test using a JSAN library:

<script type="text/javascript" src="/js/JSAN.js"></script> <script> JSAN.use('Test.Simple'); plan({tests: 1}); ok(1 == 1, 'one does equal one!'); </script>

The Persevere Framework

Persevere is an open source set of tools for persistence and distributed computing using the JSON interfaces of HTTP REST, JSON-RPC, JSONPath, and REST Channels.

Today, we touched on some basics of On-Demand JavaScript, but that is far from the end of the story. Even newer models are being brought into reality by ambitious Web developers and systems architects. For instance, a subcategory of On-Demand JavaScript is called Predictive Fetch. This strategy is to not only download code and other resources as required, but it has the browser anticipate likely user actions and call the server in preparation! This can be achieved using any number of clues, such as the user's profile and history. For instance, if the user always navigates to a certain page as soon as they log on, then the homepage could download that page's content immediately. It's also often possible to predict what the user will do next from their current activity. For example, if a user has just added an item to their shopping cart, they will likely be conducting a purchase in the not-too-distant future; developers could then consider downloading the customer's previous address details. All this may sound far fetched to you, but Google Maps already uses Predictive Fetching to download content that is just beyond the viewable map area, in anticipation of further navigation.

Original: March 18, 2009

Find a programming school near you

Zip Code:

Subject: - Select All Subjects - Computer Applications Computer Engineering Computer Science Computer Prog. - Software Dev. Computer Game Programming Web Design Web Development Internet Systems Internet Certification Database Design and Development Information Systems Management Information Technology Project Management Network Design - Development Systems Analyst

Degree: - Select All Degrees - Associate's Bachelor's Master's Doctoral Certificates Diplomas Coursework MBA

Online Campus Both