Webmaster-Source » ajax https://www.webmaster-source.com Useful Resources For Webmasters Thu, 24 Aug 2017 02:01:18 +0000 en-US hourly 1 https://wordpress.org/?v=4.1.42 JSONView: View JSON Data in Firefox https://www.webmaster-source.com/2010/09/24/jsonview-view-json-data-in-firefox/ https://www.webmaster-source.com/2010/09/24/jsonview-view-json-data-in-firefox/#comments Fri, 24 Sep 2010 11:47:58 +0000 http://www.webmaster-source.com/?p=3590 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.

]]> https://www.webmaster-source.com/2010/09/24/jsonview-view-json-data-in-firefox/feed/ 0 WordPress JSON API Plugin https://www.webmaster-source.com/2010/06/11/wordpress-json-api-plugin/ https://www.webmaster-source.com/2010/06/11/wordpress-json-api-plugin/#comments Fri, 11 Jun 2010 11:16:58 +0000 http://www.webmaster-source.com/?p=3394 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]

]]> https://www.webmaster-source.com/2010/06/11/wordpress-json-api-plugin/feed/ 0 Loading JavaScript Asynchronously https://www.webmaster-source.com/2010/06/07/loading-javascript-asynchronously/ https://www.webmaster-source.com/2010/06/07/loading-javascript-asynchronously/#comments Mon, 07 Jun 2010 11:48:50 +0000 http://www.webmaster-source.com/?p=3383 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:

]]> https://www.webmaster-source.com/2010/06/07/loading-javascript-asynchronously/feed/ 12 Twitter List-Powered “Fan Page” Widget https://www.webmaster-source.com/2010/01/15/twitter-list-powered-fan-page-widget/ https://www.webmaster-source.com/2010/01/15/twitter-list-powered-fan-page-widget/#comments Fri, 15 Jan 2010 11:52:10 +0000 http://www.webmaster-source.com/?p=2928 There’s a really neat post over at Tutorialzine on how to build A Twitter List Powered Fan Page.

It’s a little widget, that would go in your sidebar or some similar place, where it would display the Twitter avatars of anyone who wanted to click a button to add themselves to a Twitter List (along with an overall count of the “fans”).

It seems like a neat idea, though you have to do a bit of PHP and JavaScript work to get it up an running. (It would be nice to see a variation made as a WordPress plugin…)

]]> https://www.webmaster-source.com/2010/01/15/twitter-list-powered-fan-page-widget/feed/ 0 GetGravatar jQuery Plugin https://www.webmaster-source.com/2009/09/03/getgravatar-jquery-plugin/ https://www.webmaster-source.com/2009/09/03/getgravatar-jquery-plugin/#comments Thu, 03 Sep 2009 11:46:12 +0000 http://www.webmaster-source.com/?p=2520 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.

]]> https://www.webmaster-source.com/2009/09/03/getgravatar-jquery-plugin/feed/ 0 Google AJAX Libraries API https://www.webmaster-source.com/2009/01/21/google-ajax-libraries-api/ https://www.webmaster-source.com/2009/01/21/google-ajax-libraries-api/#comments Wed, 21 Jan 2009 12:11:15 +0000 http://www.webmaster-source.com/?p=1747 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.

The libraries available at the present are:

  • jQuery
  • jQuery UI
  • Prototype
  • script.aculo.us
  • MooTools
  • Dojo
  • SWFObject
  • Yahoo UI Library

To reference one, you simply call the JavaScript file as you normally would, but put the URL on Google’s servers instead of your own. For example, to load jQuery 1.3.0 you would use the following:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>

Simple, and a good way to cut down on page load time. The only downside is, if Google were to have problems with the servers that host the scripts, we would be looking at a web-wide lack of scripts that may be critical to the operation of some sites. Google is known to be fairly reliable, but you never know, it’s always possible that the supposedly impossible could happen. Then we would have a problem like the Amazon S3 outage last year, where scores of sites were affected. (Twitter’s avatars went AWOL, SmugMug had photos not showing, some podcasts weren’t downloadable, etc..)

]]> https://www.webmaster-source.com/2009/01/21/google-ajax-libraries-api/feed/ 1 AJAX, Disambiguation https://www.webmaster-source.com/2008/10/13/ajax-disambiguation/ https://www.webmaster-source.com/2008/10/13/ajax-disambiguation/#comments Mon, 13 Oct 2008 10:09:45 +0000 http://www.webmaster-source.com/?p=912 “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.”

]]> https://www.webmaster-source.com/2008/10/13/ajax-disambiguation/feed/ 2 FaceBox: Facebook-Style JavaScript Overlays https://www.webmaster-source.com/2008/03/31/facebox-facebook-style-javascript-overlays/ https://www.webmaster-source.com/2008/03/31/facebox-facebook-style-javascript-overlays/#comments Mon, 31 Mar 2008 12:31:51 +0000 http://www.webmaster-source.com/?p=477 FaceBox DialogLightbox-type DIV overlays have a multitude of uses. If you’re building a web app, or if you are just looking for a way to declutter your blog, you can just sweep elements under the proverbial rug until they’re needed, and then call them back in a “almost-window.”

FaceBox, is yet another way of implementing this functionality, but styled in a similar manner to FaceBook’s pop-up boxes.

FaceBox can display DIVs, images, AJAX-loaded pages, or you can just write content in dynamically via JavaScript. It’s fairly easy to implement the script, though it took me a little bit of tweaking to get all of the images to display correctly (I just had to change a few paths throughout the code).

The JavaScript file is just 6KB, and the 1KB worth of CSS can easily be pasted into your existing stylesheet, or referenced separately. There are also a few assorted images that are required, though they’re mainly under 1K. Also note that FaceBox requires jQuery to function, so you may not want it if you’re a Prototype aficionado.

]]> https://www.webmaster-source.com/2008/03/31/facebox-facebook-style-javascript-overlays/feed/ 0 AJAX Whois https://www.webmaster-source.com/2008/03/30/ajax-whois/ https://www.webmaster-source.com/2008/03/30/ajax-whois/#comments Sun, 30 Mar 2008 13:14:10 +0000 http://www.webmaster-source.com/?p=476 AJAX WhoisI 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.

]]> https://www.webmaster-source.com/2008/03/30/ajax-whois/feed/ 2 When Should You Use AJAX? https://www.webmaster-source.com/2008/01/09/when-should-you-use-ajax/ https://www.webmaster-source.com/2008/01/09/when-should-you-use-ajax/#comments Wed, 09 Jan 2008 12:47:24 +0000 http://www.webmaster-source.com/2008/01/09/when-should-you-use-ajax/ 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.

]]> https://www.webmaster-source.com/2008/01/09/when-should-you-use-ajax/feed/ 1