Simplehost Web Hosting

Degradable AJAX, Unobtrusive JavaScript coding

This article is intended for web developers who wish to code javascript into their sites, using AJAX.

Firstly what is AJAX? Well it stands for Asynchronous JavaScript and XML.
And what does it do? It allows us to load data from the server using JavaScript and not force the clients web browser to reload the page. Typically this was used to fetch a section of HTML code to be shown on the site under say a popup window, a menu or a dynamic scrolling content pane. It can be used for almost anything, some websites have every bit of content loaded via AJAX, there is pros and cons to both methods.

You are not limited to just calling XML files from the server of course, you can call any URL resource. More commonly however today for data transmission is the JSON data spec. This allows objects to be parsed back and forth between client and server languages. JavaScript objects can be sent directly to the server and converted to say a PHP object which can make your systems much cleaner and run more reliable.

Back to the topic then, when coding AJAX sites, it's very important to remember that a clients web browser is not the only thing that may be looking at your site. There of course the big Google, Bing, Yahoo..., and also SEO to think about. These engines do not run AJAX or JavaScript, and if you want them to see all your brilliant content, you had better code your site right so they can see it.

Most AJAX will be triggered by one of 2 events, on page load or when a user clicks an object on your site.

1. The on page load event should be used only to prepare the site, formatting items for example but never use it for loading textural content that you want search engines to read.

2. When a user clicks an object, then you need to code your ajax links in such a way that they have a fallback option and will load with JavaScript disabled.

We will now dig deeper into #2 as thats the most important. Search engines read links, if they cannot follow them they cannot read them. A link should look like this:

	 <a href="/my-great-content.html">My great content</a>

The key is to always have a working href (URL) in the link and never put javascript into this attribute. Lets say we now want to load this page by AJAX into a popup window (LightBox, FancyBox ...) we must give our script a way to identify that this link should be loaded via AJAX. We do this by either adding a class for a collection of elements, or a unique ID for a single link. e.g. <a id="ajax" href="/xyz.html">Ajax popup</a>

The next step is to code the Ajax. To make this easy, I highly recommend using jQuery. It is a lightweight versatile JavaScript coding library which makes easy work of many common JavaScript routines, in particular AJAX. In your HTML head section, first place the jquery library, and lets also create our own external javascript file (ajax.js) which keeps everything neat and tidy.

	 <head>
	  ...
	  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
	  <script src="/ajax.js"></script>
	 </head>

Inside ajax.js we can start our coding. Always check that the page is loaded before attaching any events to elements in the page, in modern browsers external libraries are loaded asynchronously and may load and be executed before your element is which will cause an error on occasion.

	 //This block will run when the HTML has fully loaded and all elements are available
	 $(document).ready(function() {
	  //... Your code goes here ...
	  $('#ajax').bind('click',function(){
	     //This block gets run when the link is clicked
	     event.preventDefault(); //We dont want the browser to load the new page
	     //Make our AJAX call (always use GET to load data)
	     $.get(this.href,{},function(response){
	       //The response parameter will contain the result (content) from the server, if JSON is sent       //from the server we get a nice JavaScript object to play with
	       $('#ajax-content-window').html(response); //Fill the ajax content window with our result
	     });
	   });
	 });

One important thing to note here is that we re-used the href URL attribute of the link using this.href, therefore we do not 'hard code' any URL references in our JS and it is more re-usable. Also any querystring parameters can be parsed as an object as the 2nd $.get parameter. More detailed information on AJAX requests can be found here.

Now your content will load even if JS is not enabled (you can do this in Firefox also to test, and is always good practise to confirm your site is usable without JS).

I would recommend AJAX development with the Firefox web browser and firebug to see what the AJAX is really doing and it allows you to inspect the content. All new browsers have their own web inspectors which can also do this but some can be rather difficult to navigate.

Good luck and happy AJAX coding!

Recent News
Feb 13, 2016

We have deployed PHP 7.0 to selected servers which has up to 4x performance gain on previous versions as well as the most comprehensive language API available. Read More


Feb 08, 2015

Bitcoin payments are now accepted for all hosting products. Bitcoin payments are simple, fast and simple to do on a mobile device. Get your digital wallet today and pay with Bitcoin. Read More