Talk In Code

Strictly speaking the Google Ajax libraries don’t contain only Ajax libraries, but they are very useful for a variety of reasons. Google host a variety of different JavaScript libraries which you can link to on your pages rather than download the library and host it on your server. You can use MooTools, JQuery, Prototype/Scriptaculous, Dojo and even the Yahoo! User Interface Library.

How To Use Them

Using the Google Ajax libraries on your own site is quite easy, and you can do it in a number of different ways.

Normally, you would download the latest and greatest version of your chosen library and upload it to your site. Here is an example using the MooTools.

<script type='text/javascript' src='http://www.talkincode.com/'></script>

You can include this via Google using the following.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools-yui-compressed.js'></script>

If you are working on a development server you can also include the uncompressed version so that you can see where any errors are coming from.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools.js'></script>

If you want to download version 1.11 instead of version 1.2.1 by changing the folder:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools.js'></script>

You can also use the google.load() function to include the library you want with a single function call.

<script src="http://www.google.com/jsapi"></script>
<script>
  google.load("mootools", "1.2.1");
</script>


Ease Of Use

You have to admit that this method of including JavaScript is much easier than downloading the library manually, uploading it and then sorting the script tags out.

Quick Downloads

The first benefit of using this service is that users will not have to wait very long in order to download the JavaScript libraries that your site relies on to work. This is because they are downloading it from Google and not your site.

Concurrent Connections

Your browser can only open a certain number of connections to a domain; this is partly due to how browsers work but also due to how servers work. If you host your JavaScript libraries with Google then your browser will be able to run off and get them whilst it is downloading your page making the page load a little faster.

Better Caching

Rather than repeatedly downloading files from a site over and over again a browser will try to minimise this by only downloading what it hasn’t downloaded already. This is fine if you spend all of your time on a single site, but most people don’t and they will therefore download the same version of the same JavaScript library over and over again. This happens even if the server has aggressive caching turned on. By hosting your libraries with Google you basically allow a user who has visited a site using the same library as you to reuse the file they downloaded there on your site.

Don’t Use On Your Intranet

There is one small issue if you are using this sort of thing on an Intranet system in that it will create unnecessary network traffic from your network. This method can also leave Intranet systems utterly useless if your Internet connection goes down for whatever reason. Holding your JavaScript libraries locally will mean that your systems can continue to work, even if you are cut off from the outside world.

Word Of Warning

Some countries actively block connections to some sites; especially Google. So if you do include JavaScript libraries like this then the chances are that someone in Iran or China will certainly not be able to view any JavaScript components and might even get a load of authentication errors.

More Information

For more information on the different libraries available take a look at the Google Ajax Libraries page.

JS Bin is an online tool that allows you to test JavaScript without having to muck about with files. You can just quickly cut and paste some code in and view the output. It is even possible to make the code you are looking at public and then use this as part of an ajax call in another instance of the application.

To get you started there is a nice help section, which also includes a couple of videos.

This tool really impressed me, especially the easy inclusion of several different JavaScript frameworks. I don’t mind testing JavaScript, but sometimes I just want to run a little bit of code on it’s own to see why it isn’t working as I expected it would. This tool fills that much needed gap, and the addition of allowing other people to view your code is a very nice feature. Well worth a look!

Creating user interfaces in JavaScript can sometimes lead to a problem, especially when the interface used AJAX to load data from the server. As many actions will be event driven by the user you can find that when a user triggers lots of events all at once the browser will send out lots of AJAX requests all at once. This can easily cause bandwidth issues but can also lead to the user getting confused while they patiently await the browser to settle down and let them get on with things.

There are numerous way to get around this issue, the first being to design programs so that AJAX requests are only issued when the user has clicked on something. Using an AJAX request on a mouseover event is just asking for trouble,
However, sometimes you can’t always get around this, for example, you might want to continuously validate a input box as the user types in it. The most stable and browser friendly seems to be using a combination of the setTimeOut() and clearTimeout() methods. In this way you can wait until the user has finished when they are doing before running the code for the end. The following code will print an alert box, but only after a duration of 500 milliseconds after the last onclick event on the paragraph tag.

<p onclick="runIt();">Run It</p>
<script type="text/javascript">
  var run = '';
  
  function runIt(){
    if(run==''){
      run = setTimeout(actuallyRunIt,500);
    }else{
      clearTimeout(run);
      run = setTimeout(actuallyRunIt,500);
    };
  }
  
  function actuallyRunIt(){
    alert('Clicked');
  }
</script>

This code looks to see if run is equal to ”, which is what the variable has been set to, but is also what the variable is set to when clearTimeout() is called. The setTimeout() function will cause run to be filled with a process ID. The second parameter in the setTimeout() function is the number of milliseconds to wait for before running the function or code defined in the first parameter.
The only draw back with this method is that it is not possible to send parameters along with the callback function stipulated in setTimeout(), but there is a way around this, although it is a bit ugly. When the runIt() function is run you can set the values of a number of variables defined in the global scope that will then be used within the function the is called after the delay. The following code demonstrates this.

<p onclick="runIt();">Run It</p>
<script type="text/javascript">
  var run = '';
  var x = 0;
  
  function runIt(){
    x++;
    if(run==''){
      run = setTimeout(actuallyRunIt,500);
    }else{
      clearTimeout(run);
      run = setTimeout(actuallyRunIt,500);
    };
  }
  
  function actuallyRunIt(){
    alert('Clicked '+x);
  }
</script>
This code will print out the number of times that the user clicks on the p tag. Even if the user clicks on the tag lots of times it will still keep track and print the value 500 milliseconds after the last click event.