Tag Archives: ajax

JSONView: View JSON Data in Firefox

Sep 24, 2010 by Matt | Posted in Coding No Comments

JSON is a popular way to format AJAX responses, as it’s more compact than XML and essentially a JavaScript object, but it can be a real pain to work with due to uncooperative browsers. It’s easy enough to view XML in a web browser, which is good for testing, but JSON responses cause a download prompt to open. This makes it harder to verify that an AJAX request is working properly.

Fortunately, a clever developer has built a Firefox extension to solve this problem. JSONView renders a plain-text representation of the JSON object, complete with indentation and color-coding whenever you access a URL that outputs JSON data. For example, the Twitter API. If you click this link in Firefox, you will be prompted to download the file. With JSONView installed, you would see output from the following image.

If you do much JavaScript work, be sure to install JSONView. It will save you some headaches when you have AJAX requests that aren’t working quite right.

WordPress JSON API Plugin

Jun 11, 2010 by Matt | Posted in WordPress No Comments

WordPress provides an RSS feed for just about every part of the website. You can get XML output for anything, from posts to tags to comments. But what if you’re working with JavaScript? Wouldn’t it be nice to have a JSON option? That’s what the JSON API plugin does. Appending ?json=1 to the end of any WordPress URL will work like the RSS option, but the feed will be formatted as JSON. It can even be used to submit comments, if you invoke the right method.

This plugin was created for The Museum of Modern Art, whose weblog Inside/Out appears within an existing structure built with Ruby on Rails. Instead of reimplementing the site templates as a WordPress theme, we opted for a Rails front-end that displays content served from a WordPress back-end. JSON API provides the necessary interface for retrieving content and accepting comment submissions.

I like Chris Coyier’s suggestion of using it in conjunction with the jQuery UI Autocomplete component in order to add a Google Suggest-type feature to your search form.

WordPress JSON API Plugin [Digging into WordPress]

JSON API Usage Guide [JSON API]

Loading JavaScript Asynchronously

Jun 7, 2010 by Matt | Posted in Coding, Featured 12 Comments

BuySellAds and Google Analytics, in an attempt to make the internet faster, recently changed the code snippets they use for serving ads and tracking visitors, respectively, to be non-blocking and asynchronous. This means that the scripts won’t hold up the rendering of your pages while they load. If you reload this page, as an example, the ads to the right may actually appear after the rest of the page has finished loading. It gives the appearance of being a lot faster.

How can you load your own scripts asynchronously? Here’s an example I put together after dissecting Googles’ and BuySellAds’ scripts:

<script id="myscript" type="text/javascript">

(function() {
 var myscript = document.createElement('script');
 myscript.type = 'text/javascript';
 myscript.src = ('http://example.org/myscript.js');
 var s = document.getElementById('myscript');
 s.parentNode.insertBefore(myscript, s);
})();

</script>

What it does is it dynamically assembles and writes out a <script type="text/javascript" src="..." /> DOM element, placing it just before the loader script. You could alter the insertBefore part to append loaded script to the <head> element if you’re so inclined.

You can read further on this technique from these sources:

GetGravatar jQuery Plugin

Sep 3, 2009 by Matt | Posted in Coding No Comments

GetGravatar is a jQuery plugin that is a perfect touch for blog comment forms. It monitors an email address form input, and makes an AJAX request to load a Gravatar. (See a demo.) This would enable you to show a user’s Gravatar next to the comment form immediately after they input their email.

Get Gravatar is meant to be used with a text input. As the text changes in the input, it pings the Gravatar service to fetch the user’s avatar. Due to Gravatar’s restrictions, Gravatars must be retrieved with an MD5 hash of the user’s email. Since Javascript doesn’t have a built-in way to fetch an MD5 hash, this plugin has a PHP counterpart.

Obviously there are more creative uses for this, but either way it’s a nifty script.

Google AJAX Libraries API

Jan 21, 2009 by Matt | Posted in Coding One Comment

Do you use a JavaScript library — such as jQuery, Prototype, or MooTools — on one (or more) of your websites? That probably adds a good 18-120 kilobytes to your pages’ total size, adding more time to users’ download time.

Now, how many websites use that same framework? How many websites make use of jQuery, or example? A lot. That means any given user could be downloading the JavaScript files multiple times in a day, as different sites require it. What a waste of time and bandwidth.

Google has an interesting solution. They host multiple versions of several major JavaScript libraries on their servers for web developers to take advantage of. This offers several advantages. Their servers are quick and have wide pipes allowing for very fast downloads, for one. The real benefit is caching.

If a user visits several sites that reference jQuery (or another library) from Google, their browser caches the file and will only load it once, reusing the cached file on the other sites when they are loaded. This is because you’re referencing a file from ajax.googleapis.com instead of your own domain, and if multiple sites reference it, the browser remembers it already downloaded the file and uses the local copy.

Continue reading →

AJAX, Disambiguation

Oct 13, 2008 by Matt | Posted in Coding 2 Comments

“AJAX,” which stands for “Asynchronous Javascript and XML” has sadly been being used as a buzzword lately, referring to Javascript/DHTML tricks rather than it’s “real” meaning.

AJAX is the use of the XMLHttpRequest object in JavaScript to load new content from a server into a page, without reloading the page. A good example of this is Twitter. Type your new message into the box, press the button, and your message is sent to the server (and a response is sent back) without the page being reloaded. This is AJAX.

What AJAX isn’t, but people keep referring to as AJAX, is dynamic Javascript tricks such as Script.aculo.us effects.

Please use the term “AJAX” to refer to asynchronous HTTP requests, and not any old bit of JavaScript. We already have a term for that, it’s “DHTML,”� or “Dynamic HTML.”

AJAX Whois

Mar 30, 2008 by Matt | Posted in Domains 2 Comments

I recently stumbled across AJAX Whois, which may have become my new favorite way to find domains and check WhoIs info. It’s fast, and it’s easy to use.

I’m serious when I say AJAX Whois is fast. Start typing in the form, and the web app searches as you type. By the time you’ve finished typing in a domain, the results are already there.

There are a couple of small features that really make the site easier to use. Number one is the favorites feature. If you find a domain that you want to remember while you’re searching other ones, you can just click the favorite button and it will be added to a space in the sidebar for easy access. The other feature is even simpler, yet you would really miss it if it wasn’t there; You don’t have to enter a TLD when searching. Many whois services require that you enter a TLD, even if you want to see results for multiple TLDs. Luckily AJAX Whois doesn’t follow that trend.

When Should You Use AJAX?

Jan 9, 2008 by Matt | Posted in Design One Comment

AJAX, or Asynchronous JavaScript and XML, was probably the most-hyped web programming technique in the last two years. It’s no surprise, as it enables you to do a lot that couldn’t have been done just a few years ago.

AJAX is being used in more and more places, often when it doesn’t need to be…and when it shouldn’t. With all the talk about how you can use AJAX for everything, the real question is when should you.

You should use AJAX in places where it will improve the user experience. One example is with polls. Why should a full pageload be required just to vote in a poll (or view the results)? That’s a waste of your users’ time, and a waste of your server resources.

Do not use AJAX for loading your main content, though. It’s not a good idea. I’ve seen a few sites that have tried it, and it doesn’t work that well. You have to come up with extra solutions for search engines, because they can’t understand your JavaScript trickery (you thought the dreaded “text-only version” link only applied to Flash sites? ). You also cause problems for people using some browsers (Safari, IE5, etc).

Basically, you want to use AJAX for things where an extra pageload would be irritate the heck out of everyone. Suppose you have a star-rating system, like on Netflix. Wouldn’t it be horrible if you had to sit through a page refresh every time you rated a movie? Use your own judgment.

Tag Archives: ajax

TweetRoll