Learning AJAX with the Prototype Framework…
The Prototype Framework has been selected as my framework of choice for implementing the AJAX version of my website. It abstracts the need to invest time in how the background operations in an AJAX call and subsequent element update happens.
As I am currently an expert in progress, I cannot say with any great conviction that the Prototype framework is the answer to all my prayers, but as far as first impressions go…. I am impressed.
Having discussed the benefits of AJAX previously, I wont go over them again here.
I have programmed my website in a way that should make it very easy to update in the future. By using <div> elements for everything, I can control the complete layout of my webpages by changing the CSS. This approach reduces the time necessary to implement a redesign – not that I’ll be doing that anytime soon.
If you look at www.mcnicholl.com you will see that I have a link menu just under the logo image at the top. These links are the basis for my AJAX implementation. With Prototype, this is made very simple :
- Add an “onClick” event to the link…
- e.g <a href=”./contact.php” onClick=”Update(‘./contactjs.php’); return false;)”>
When the link is clicked, the Javascript function “Update();” is called. The browser does not try to load the href link until the Javascript function(s) has finished executing – as they are a part of the current page. “return false;” is executed after “Update()” has completed and this is what cancels the call to the href link.
The “Update()” function I created calls a Prototype function to update a <div> element that I pre-specified. The call looks like this :
- var U_div = new Ajax.Updater(“m_left”, “./contactjs.php”);
- m_left = the DIV that I want to update
- “./contactjs.php” = the link to call
As yet I have not completed the change over from my normal website to the AJAX version as I want to explore the search engine consequences. As I have set my robots.txt file to prevent access to the contact page, I can easily make my contact form AJAX based (which I will complete soon), but the other pages are an SEO concern.
When I investigate this issue further and determine that it has no knock on affects, I will roll it out to the rest of the website.
