Think2Loud » JavaScript

JSON vs. XML: What Should You Use?

Jared — Sun, 27 Dec 2009 21:02:54 +0000

From the start, JSON is already has a leg up on XML for one reason: it’s faster. To read XML you need to parse it, read the nodes, attributes, and child nodes in the XML document, and then use the data that you’ve found.

In jQuery the easiest way to do that is to use the built-in ajax functions to call the XML and use the each function to loop through all the nodes. The each function is nice, but is much much slower than a for loop. Just imagine what happens when we have an XML document with multiple levels of nested nodes you need to get at. You end up with multiple nested $.each functions and without much trying, you end up with a script that crawls. With JSON it’s easy to get at the data since its already native javascript. No parsers or proxies necessary–all you need to do is loop through the data, fast and simple. That’s one point for JSON.

There are aspects of XML that people point to as reasons to use it. First, XML is both human and machine readable. It is nice to see what data is being returned just by viewing the source, but that problem is solved by having good documentation, including an example of the JSON that will be returned. Also, being a front-end developer, I spend a lot of my time reading javascript anyway. I find it just as easy to read as XML, it’s just different.

Another good reason to use XML is that it’s widely available. Lots of websites offer APIs to get at their public (and sometimes private) data, and I usually find the returned format of these APIs are often either XML or JSON. However since XML has been around longer than JSON, there is simply more XML out there.

Sometimes you might find yourself in a situation where you don’t have JSON as an option. So do you submit to the API gods and slow down your site and just use the XML? Why do that when you can write the API yourself! This is where some server side skills come in handy. It’s super easy to load an XML document via PHP and print out the data in whatever format you need it to be in.

So in conclusion, you should be using JSON every chance you get.

JSON vs. XML: What Should You Use?

Using Advanced Segments in Google Analytics to Separate Outgoing Links and Downloads from Pageviews

Josh — Fri, 10 Apr 2009 03:28:40 +0000

Creating the Segment

Make your way to the dashboard for the site you are tracking.
When you reach the dashboard, you will see a settings section on the left. Click the Advanced Segment(beta) link.
There will now be a link in the upper right that says “Create new custom segment.” Click that to start your new segment. You should now be on a page that looks like the one below.
Under the Dimensions header on the left it’s probably green. There is a section for content. Pop that open to reveal a list of options.
Drag the Page box onto the box on the right that says “dimension or metric.” Then select “Does not start with” from the drop down that appears under the Condition header. Put “/outgoing” in the Value text area. This gives you a filter that will get all pages that do not start with “/outgoing”
Now you’ll need to make another filter in this same segment that also removes the downloads. Click the ‘Add “and” statement’ link.
You will now have another “dimension or metric” box. You will want to repeat step 5 but change “/outgoing” to “/download” or whatever you use to mark your downloads.
Test your segment with the test segment button on the bottom right side of the page.
Now give your segment a name and hit “Create.” I used “- outgoing/download” as a name.

The finished segment should look like this before you hit create.

Using the Segment

Make your way back to the dashboard for your site.
Directly above the date picker on the right in the gray menu box there is a drop down labeled Advanced Segments. Click the drop down to open the Advanced Segments options.
Under custom segments, click the check box next to your new segment you just created. Also leave the all visits default segment checked if you would like to see your unfiltered results.
Hit “Apply” and that is it.

Once all this is done you will be able to quickly find a more accurate count of pageviews.

Using Advanced Segments in Google Analytics to Separate Outgoing Links and Downloads from Pageviews

Using jQuery and XML to Populate a Drop-Down Box

Josh — Tue, 10 Mar 2009 00:30:41 +0000

Source Demo Reading XML with jQuery Source

You’ll now have an index.html file that looks like this:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" type="text/css" media="all" href="style.css" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
	<title>Using jQuery and XML to populate a drop-down box demo</title>
        <script>
     	$(document).ready(function(){
			$.ajax({
				type: "GET",
				url: "sites.xml",
				dataType: "xml",
				success: function(xml) {
 
				}
			});
		});
     </script>
</head>
<body>
<div id="page-wrap">
    	
</div>
</body>
</html>

Next you’ll need a simple XML file to load.

Here is the one that I used : dropdown.xml

 version="1.0" encoding="iso-8859-1"?>
>
	>
    	>first set>
 		>
 			>option a>
 			>option b>
 		>
 	>
   	>
    	>second set>
 		>
 			>option 1>
 			>option 2>
 		>
 	>
 	>
    	>third set>
 		>
 			>option 1a>
 			>option 2b>
 		>
 	>
 >

Now that you’ve created your XML, add a form with a select box to the HTML page. I simply replaced everything within the body tag from our index.html from the previous article.

<form>
      <select id="mySelect">
              <option>loading</option>
      </select>
</form>

Once the XML is ready, jump back into the index.html file. You’ll need to update the jQuery Ajax call to get the new XML document. To do this, simply change the url to your new document.

old:

$.ajax({
        type: "GET",
	url: "sites.xml",
	dataType: "xml",
	success: function(xml) {
 
	}
});

new:

$.ajax({
        type: "GET",
	url: "dropdown.xml",
	dataType: "xml",
	success: function(xml) {
 
	}
});

With the Ajax call in place, you need to tell it what to do when it loads the XML in the success function. Start by getting the select tag with jQuery and storing it in a variable for later use. The select tag you are looking for has an id of mySelect.

var select = $('#mySelect');

Next, loop through all of the menuitem nodes in the XML with a jQuery each function.

$(xml).find('menuitem').each(function(){
});

Inside the each function, you will get the title of your menuitem. Create an option tag as a header for the menuitem, and then create another jQuery each function to get all the possible values that go with the current menuitem.

The first thing you’ll want to do within the each function for the menuitem is get the title and append it to your select.

var title = $(this).find('title').text();
select.append("+title+"");

There is a empty option tag in the code to get a space above the header, that way the drop down will be easier for the user to read. Add a class of ddheader to the option tag so in browser like firefox you can make the header bold.

With the header now inserted into the select, you’ll now need to create the options that will be under that header. To do this, use another jQuery each function, looking for all the value nodes that are in the menuitem node. Within this each you will get the text in the value node and then append it to the select tag as an option with a class of ddindent. The ddindent class is used to push these items to the right a bit so they are easy to follow.

$(this).find('value').each(function(){
	var value = $(this).text();
	select.append("+value+"");
});

That is just about everything, there’s only one more thing. At the end of the success function, change the option tag you hard coded in the index.html file that said “loading” to now say “please make a selection.” Make sure that it’s selected to start with by giving it the selected attribute. Because the option tag is the first child of the select tag, you can use the children function with the optional parameter of “:first”. This will return only the first child of the select tag.

select.children(":first").text("please make a selection").attr("selected",true);

You should now have a functional drop-down box loaded with XML via jQuery.

Source Demo Reading XML with jQuery Source

Using jQuery and XML to Populate a Drop-Down Box

Add Scroll Bars to Full Browser Flash with a Simple jQuery Plugin

Josh — Wed, 10 Sep 2008 03:09:36 +0000

.zip .js only Demo

The first thing you need to do is get jQuery set up and running. Once you have that done, I recommend the jQuery Flash Plugin for embedding your Flash movies, but you can use any method you like. Now you need to download and include the jQuery FlashResize Plugin.

With the plugin included and ready to use, we need to get it running. You will need to have an element to use as your placeholder. The body tag can be used, but I always use a container element, usually a div.

<body>
     <div id="flash-scroll">
          <p>Html to be replaced by 100% Flash.</p>
     </div>
</body>

With the HTML set up for the scroll bars, you simply need to add the call to the FlashResize plugin in the document.ready function. The plugin only has two parameters minWidth and minHeight. If you don’t specify a value, then the Flash container is set to 100% and no scroll bar is added.

So just set the parameters to your minimum values and that’s it. As you can see below, the Flash has been set to a minimum of 800 by 750.

$(document).ready(function() {
	$('#flash-scroll').flashResize({
  		minWidth: 800,
  		minHeight: 750
	});
});

If you would like to see this plugin in action, check out the demo.

.zip .js only Demo

Add Scroll Bars to Full Browser Flash with a Simple jQuery Plugin

Reading XML with jQuery

Jared — Sat, 06 Sep 2008 17:00:00 +0000

The first step is making sure you have jQuery included on your page.

<script src="jquery.js" type="text/javascript">script>

Second, you should check the XML file you are going to read and make sure it’s free of errors. If you are unfamiliar with XML synatax, check out the W3School’s rules on XML syntax. The file I’m using for this example is just a listing of some Web sites I enjoy.

Finally, you just need to tell jQuery to read the file and print out the contents. Start by adding the document.ready function to the page.

$(document).ready(function(){
 
});

Within the document.ready we start a jQuery ajax request to read the XML file. The ajax request takes four parameters: file type, url, dataType, and success. You’ll see below how these are set to read a file. The important thing to notice is the success parameter. We set it to a function that takes the data the request gets from the XML file.

$.ajax({
        type: "GET",
	url: "sites.xml",
	dataType: "xml",
	success: function(xml) {
 
	}
});

This is where the fun part comes in. Now that we are reading the XML, we need to find the data written within it and do something with it. We start by reading the returned data and using the find method to get all the nodes that match the text we supply (in this case, “site”), and then use the each function to loop through what the find function give to us.

$(xml).find('site').each(function(){
 
});

All that’s left is to get the data from that node and print it out. Do this by using the attr function, and the find function to get the text and any attributes on the nodes.

var id = $(this).attr('id');
var title = $(this).find('title').text();
var url = $(this).find('url').text();
$('+id+'">
').html('+url+'">'+title+'').appendTo('#page-wrap');

Your final code should look something like this:

$(document).ready(function(){
	$.ajax({
		type: "GET",
		url: "sites.xml",
		dataType: "xml",
		success: function(xml) {
			$(xml).find('site').each(function(){
				var id = $(this).attr('id');
				var title = $(this).find('title').text();
				var url = $(this).find('url').text();
				$('+id+'">
').html('+url+'">'+title+'').appendTo('#page-wrap');
				$(this).find('desc').each(function(){
					var brief = $(this).find('brief').text();
					var long = $(this).find('long').text();
					$('
').html(brief).appendTo('#link_'+id);
					$('
').html(long).appendTo('#link_'+id);
				});
			});
		}
	});
});

That’s all it takes to read XML with jQuery. Feel free to check out the demo and download the source code.

Reading XML with jQuery

Build an Unsupported Browser Warning with jQuery

Josh — Wed, 03 Sep 2008 20:54:58 +0000

Trying to get someone to upgrade, without being overly aggravating, can be tough. This script accomplishes this by adding a warning box across the top of the site with an option to hide the message. The script uses cookies, so if someone hides the warning it will not come back until they restart their browser. This way, even with an unsupported browser, they can remove the warning and use your site as they wish.

Source Demo (Firefox is also unsupported for the Demo)

Initial Setup

To get started you need to include jQuery and the badBrowser script in the header. The script does the browser detection. This allows for screening of multiple browsers if you like. I just set it up for IE 6 and below.

<script src="jquery-1.2.6.min.js" type="text/javascript">
script>
<script src="jquery.badBrowser.js" type="text/javascript">
script>

So whats in the badBrowser.js file?

The first thing you will see is the badBrowser function. This function checks for the browsers that you want to show the warning on. It uses jQuery’s built-in utilities for browser checking. The function returns true if it’s an unsupported browser and returns false if it’s not.

function badBrowser(){
	if($.browser.msie && parseInt($.browser.version) <= 6)
             {return true;}
	return false;
}

Next we have our functions to Get and Set our cookie. The Set function creates a cookie with the name and value of what you pass it. The Get function returns the value of a cookie based on the name you pass into the function. If there is no cookie with that name, it returns an empty string. I am not going to go into the finer details of these functions, but if you’d like to read more about JavaScript cookies check out: http://www.quirksmode.org/js/cookies.html

The Set Function:

function setBadBrowser(c_name,value,expiredays)
{
	var exdate=new Date();
	exdate.setDate(exdate.getDate()+expiredays);
	document.cookie=c_name+ "=" + escape(value) +
        ((expiredays==null) ? "" : ";expires=" +
        exdate.toGMTString());
}

The Get Function:

function getBadBrowser(c_name)
{
if (document.cookie.length>0){
   c_start=document.cookie.indexOf(c_name + "=");
   if (c_start!=-1){
    c_start=c_start + c_name.length+1;
    c_end=document.cookie.indexOf(";",c_start);
    if (c_end==-1) c_end=document.cookie.length;
    return unescape(document.cookie.substring(c_start,c_end));
    }
}
return "";
}

Now with our helper functions all set up we can do some real work. We’re going to have an if statement that calls the browser check and also checks to see if our cookie has been set.

if(badBrowser() && getBadBrowser('browserWarning')!='seen' ){
 
}

Inside the if statement we are going to pre-pend our warning box to the top of our page and set some CSS for it.

$("You are using an unsupported browser. Please switch to FireFox, Opera, Safari or Internet Explorer 7. Thanks!   [close]
")
      .css({
	backgroundColor: '#fcfdde',
	'width': '100%',
	'border-top': 'solid 1px #000',
        'border-bottom': 'solid 1px #000',
	'text-align': 'center',
	padding:'5px 0px 5px 0px'
      })
	.prependTo("body");

Just one step left. We need to set up our onClick function for our close button. So with the jQuery click function we tell our button to Set our cookie and then hide the warning box.

$('#warningClose').click(function(){
	setBadBrowser('browserWarning','seen');
	$('#browserWarning').slideUp('slow');
	return false;
});

That pretty much covers the whole setup. Feel free to modify this in any way you see fit.

Source Demo (Firefox is also unsupported for the Demo)

Build an Unsupported Browser Warning with jQuery

Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site.

Josh — Wed, 27 Aug 2008 02:32:52 +0000

1. Download jQuery and install Goolge Analytics.

Go to jQuery.com and get the latest version. Then add the script include into the header of your site.

<script type="text/javascript" src="jquery-1.2.6.js">script>

Now go to Google Analytics. Set up an account and follow the directions to get tracking running. Go ahead, do it now, I’ll wait. You should now have some script on your site that looks like:

var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js'
type='text/javascript'%3E%3C/script%3E"));
 
var pageTracker = _gat._getTracker("YOUR ACCOUNT NUMBER HERE"); pageTracker._trackPageview();

2. Add the jQuery to start tracking links.

In the head section of your page, you will need to add a few lines of JavaScript. You will need to setup the jQuery .ready function and add the code to that.

$(document).ready(function(){
 
});

Next use a jQuery selector to select all a tags on the page with a rel=”external”. To do this, pass jQuery the a tag element with the attribute selector option.

$("a[rel*='external']")

with this we add a click function to our jQuery object.

$("a[rel*='external']").click(function(){
 
});

With the last part we put in the function call to the Google Analytics code and we pass it the href that our a tag is pointing to.

pageTracker._trackPageview('/outgoing/'+ $(this).attr('href'));

This code makes the call to Google Analytics and passes a page path of “/outgoing/” and the url of where the click was headed. In your Google Analytics under content, you will see pages that start with “/outgoing/”. These are clicks that took people off your site. See below for how it looks in Google Analytics.

Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site.

Adding Twitter to Your Web Site with JavaScript

Josh — Sat, 16 Aug 2008 04:06:28 +0000

After testing out a few different ones, we finally settled on twitter.js written by Remy Sharp.

Twitter.js seems to have the most flexibility and had the options we were looking for. It also seems to load a lot more consistently than the others (although I think that is more of a network issue at work). Below is a list of all the ones we tried–they were all great. If you are looking to add your Tweets to you web site, below are some great places to start.

Twitter.js by Remy Sharp. Features a simple, clean setup that is easy to use and has a lot of options that can be set.
Tweet! by seaofclouds. This is a Jquery plugin and seemed to work very well. It didn’t do exactly what we were looking for, but since this is a Jquery plugin, it was hard to pass up.
addTweets This is great if you just lwant to add Tweets to you site with no work. You enter your Twitter info and addTweets generates all the code for you. You have up to 10 Tweets on your page with just a copy and a paste.

Adding Twitter to Your Web Site with JavaScript