John McCollum

Converting Prototype’s Ajax.PeriodicalUpdater to jQuery

One of the things I missed when switching from Prototype to jQuery was the former’s Ajax.PeriodicalUpdater function. It is used to provide a ‘decay’ mechanism for ajax calls, making them less and less frequent if the retrieved content doesn’t change inbetween calls.

It can be a seriously useful piece of functionality. I took a chatroom that was polling every second and using an entire CPU core (50% usage!) and reduced it to 2-3% using this method. There were also errors retrieving content because sometimes the responses would take longer than a second to come back!

The problem is, there really isn’t a similar piece of functionality in jQuery.

So here it is! The script checks the returned data against previously received data, and increases the time between calls if it hasn’t changed.

I’d be interested in your comments. Would it be useful to turn this into a plugin?

View the demonstration here.

Posted in AJAX, jquery, web development at February 18th, 2009. 8 Comments.

Using JSON to access the Twitter search API

Steve Reynolds recently wrote a blog post showing how to access the twitter search API using PHP, cURL, and JQuery.

Steve used JQuery to post to a page on his server, which then cURLed in search results for a given term. This approach is often necessary to get avoid the issue of cross domain ajax calls.

While this approach works well, there’s an even easier way to go about it – $.getJSON!

There are two main advantages to this approach:

  • Server side technology isn’t an issue. You don’t have to rely on PHP, cURL, firewalls, anything like that. It will even work on a static HTML page!
  • All the work is done on the client’s browser – saving precious bandwidth! This could be important on busy sites.

I’ve knocked up a quick-and-dirty demonstration of this concept. If a name doesn’t already exist for this methodology, my vote goes for JAJA (Javascript and JSON, asynchronous!)

View the demonstration here!

Posted in AJAX, jquery, web development at February 7th, 2009. 10 Comments.

How to build search into your site with JQuery and Yahoo!

Yahoo have a hard time fighting off the image of being bridesmaid to Google’s bride. However, they have a decided knack for turning out really cool developer toys! For example, check out the Yahoo User Interface library, Yahoo Pipes, or their latest baby, Yahoo BOSS.

Short for ‘Build your Own Search Service’, Yahoo have pretty much opened up their entire search service via an API. With an unrestricted number of queries, and complete control over presentation of results, you can really go to town with this one!

Getting started is easy; simply get yourself an API key here. Go on, I’ll wait.

With that done, anyone with basic knowledge of PHP and JQuery can easily build a search application!

Check out my demonstration here.

There are two pages involved in this demonstration. The first page displays the form, and contains the necessary JQuery code to fire off an AJAX request to the second page. The second page takes the posted value, fires off a request to the API, and returns the result.

Without further ado, here’s the JQuery:

    $(document).ready(function(){
      $('#results').hide();

      $('#search').click(function(){
        $('#results').hide();
        searchterm = $('#searchterm').val();
        $.post('getresult.php', {query: searchterm}, function(data){
          $('#results').html(data).show('slow');
        });
      })
    })

Nothing too horrendous here; hide the results division, grab the term to be searched for, fire off an AJAX request, and put the returned data in the results div. Show it slloooooowly. :)

The code in ‘getresult.php’ isn’t much more complex; you can see it here.

That’s all there is to it! (At least for this very basic example.)

Once again, you can see a demonstration here.

I’m sure there must be loads of ideas for mashups out there; let’s hear some of your thoughts!

Posted in AJAX, PHP, jquery, web development at July 31st, 2008. 12 Comments.