Ajax Tag | Jacob Emerick's Blog

Popular Music Project

Over the last few months I've been working on a fun side project to display what music I've been listening to recently. I decided to break this information down by albums and number of songs played over a period of time. While the data itself is straightforward and could be displayed either as a list or table, I wanted to make something visually interesting that would show the most 'popular' albums in my library.

Note: you can view this project at Jake's popular music site.

Before I could get involved in the display I needed to find a way to grab the data. Luckily, last.fm has a solution for this. Using their 'scrobbler' media plug-in, I am able to upload my music plays from all of the different computers I use (desktop, laptop, work computer) to my profile. They also have an API that returns this information as an XML feed. I query this API with a daily cron to pull the most recent information to my database.

In order to make the display dynamic I needed to do some ...

• Tags:
• ajax,
• dynamic,
• jquery,
• music,
• my site

AJAX Dynamic Template Solution

One issue I've always had with the typical templating methods over the years is the waste of bandwidth. Even with smart functionality on the backend combining the dynamic and static information on each page, you're still sending an entire new html page for each URL requested by the client, with a good portion of it's content duplicated from the last page they were on. If there was a way to only send the new information, the body of the page, it would save on bandwidth and could provide a better user experience.

I had the opportunity to create such a system with one of my previous clients. They had specifically requested a Flash-like loading feature on each of their pages, so I suggested using AJAX to load the data and refresh the page. There were several problems that I had to address with this system, though.

1. Links would be controlled by Javascript, not the browser. Since the address bar wouldn't change between pages, bookmarking and history wouldn't work correctly.
2. Non-Javascript browsers (robots) wouldn't see the
 ...

• Tags:
• ajax,
• jquery,
• template

Dynamic Template Methods

Ever since I started working on websites during the summer of 2006 I made sure to keep dynamic and static information separate on my projects. Certain things in the website's content should remain the same, or similar, on separate pages: header, footer, navigation, etc. (I'll refer to these similar pieces as 'static' and the content that is unique to each page as 'dynamic'). However, when you work on a website with multiple pages, it becomes difficult to update the static information the same on all pages. This is where a templating system comes in handy.

A templating system allows the developer to separate the content to ease updating. When I first started with websites, I used Dreamweaver templates for this, which is a classic example of a templating system. You create a document in Dreamweaver with the header, footer, and any other information you want to remain the same across all the pages on your site and save it as a template. You can create new pages based on the template and Dreamweaver will 'lock' the template structure and only ...

• Tags:
• ajax,
• mvc,
• php,
• template,
• xml

Setting up the Hiking Website

Even though my waterfalls site turned out to be a great way to chronicle adventures through wilderness, it has several areas that are lacking. The biggest area is the Google Maps functionality, which is shaky at best. It can only show the end points and major points along the route, but I didn't have enough data to actually upload the suggested route (waypoint by waypoint) for each journey. Also, I didn't have any way of displaying or archiving my other adventures with the waterfalls site, so I decided to make an individual web project: the hiking site.

The layout for this site was fairly simple: a full screen map with removable sidebar containing the hike and view options. Utilizing the jQuery framework would allow me to add the Google Maps pieces easily and use cool animation on different elements. The largest step was the data transfer. I only wanted to return xml, preferably formatted as KML, and use Javascript to parse the data and display it correctly.

Breaking it down to the user's view... A user will visit the main page and see ...

• Tags:
• ajax,
• google api,
• javascript,
• jquery,
• kml,
• my site

Using XSL for Websites

Throughout the course of my web development learning, I've always had a central problem to deal with. On a typical website, multiple pages have some sort of general, non-changing bits that stay constant throughout the site: headers, footers, and navigational bars are great examples. The only piece that changes regularly, and is arguably the most important piece of a web page, is the central container. How do you keep these two pieces separate on both the frontend and backend of the site? Also, if there are non-changing or simple pieces of a website that do not change from page to page, is there a way to keep them on the client side to keep bandwidth low?

There are several options to this problem, the most obvious one being AJAX. When a user clicks on a new link, a request is sent for an XML document that would be parsed out and displayed within the container. The XML would be much smaller than an entire xHTML document and would be easy to setup and send from a server. It would be a truly clean separation of data v presentation. The main fall ...

• Tags:
• ajax,
• javascript,
• template,
• xml