AJAX

Microsoft.com’s Recent Update

less than 1 minute read

Conforming with the Ajax/Web 2.0 trend, Microsoft has updated their Microsoft.com homepage to a sleeker looking page stuffed with DHTML goodies. Yet as with most media-rich websites it’s very slow on older computers (probably the one you have in your office also ;) ) so it becomes quite tedious to navigate through.

One good thing about all this is that the website works well in Firefox, you’d think they’d screw it up but they didn’t. Gotta give some kudos for that one.

What the new page comes down to is a roll-over navigation system to the left side of the screen, and less links as before if I see correctly. Apart from the homepage, nothing has changed, except that instead of going to the http://www.microsoft.com/ page you get redirected to http://www.microsoft.com/en/us/default.aspx which has no PageRank and I doubt the search engines will like a 302.

Microsoft.com’s new DHTML layout.

AJAX: Dictionary Search

less than 1 minute read

Much like a suggestive search I’ve created a relatively small application to search through a 1.2MB Dictionary file which is delimited by line-breaks (\n). This example updates the contents of a div container on each keystroke. For this example the prototype framework, a dictionary file from winedt.org and PHP as the actual Server-Side parser were used to display the results. If you want to see the entire code and how to call the objects, right-click on the example page and click on “view source”, the PHP and JavaScript Sources are displayed below.

PHP Code:

// removed unsafe code

Simple PHP code link this could easily be adapted to retrieve results from a SQL database or an XML file.

You may get the JavaScript and HTML source by right-clicking on the page and viewing the source, it’s all open.

Link removed.

AJAX: Simplified beyond belief with Prototype

1 minute read

Before reading this I assume you know your JavaScript.

Creating your own AJAX slash AJAH handler in JavaScript can be a huge pain in the neck. For those who have been struggling with AJAX for a while there’s an easy way out. Its called “prototype” a JavaScript framework that aims to ease development of dynamic web applications. And that’s a direct quote from prototype.conio.net. AJAX is not the only thing that prototype handles, it also eases regular operations such as the document.getElementById(’myeElementId’); by simplifying it as $F(’myElementId’);.

Now, for the AJAX part in which we are all interested. Let’s say you have a div container like below:

<div onclick="myMakeRequest('myElement');" id="myElement">
My Container
</div>

Which onclick is going to find the function makeRequest which in turn will replace the innerHTML property of this particular div (myElement) with the AJAX response.

Normally when generating your own AJAX-code you’ll be creating xmlHTTPRequest, probing browsers etc, etc. Prototype simplifies this by giving you something like this:

function myMakeRequest(elementId) {
    var url = 'my_file.xml'; // Your XML file
    var Ajax = new Ajax.Updater({success: elementId},url,{method: 'get'});
}

The good thing about this method is that your page or your .js file isn’t humongous in filesize. The thing that isn’t so great about it is that the prototype library is 54KB in size which could make your page quite slow qua loading time on a slower connection (non-broadband).

Still, it’s easier than coding it all yourself, I mean; what’s the point in reinventing the wheel? Especially a well-formed wheel. Below follows the entire code that will display the example given above.

<script src="prototype.js" type="text/javascript"></script>
<script type="text/javascript">
    function myMakeRequest(elementId) {
        var url = 'my_file.xml'; // Your XML file
        new Ajax.Updater({success: elementId},url,{method: 'get'});
    }
</script>
<div onclick="myMakeRequest('myElement');" id="myElement">
    My Container
</div>

Sources and Requirements: