<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Elegant Code &#187; WebServices</title>
	<atom:link href="http://elegantcode.com/category/webservices/feed/" rel="self" type="application/rss+xml" />
	<link>http://elegantcode.com</link>
	<description></description>
	<lastBuildDate>Tue, 15 May 2012 10:00:00 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>REST: Resources, URI&#8217;s and Representations</title>
		<link>http://elegantcode.com/2010/03/15/rest-resources-uris-and-representations/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=rest-resources-uris-and-representations</link>
		<comments>http://elegantcode.com/2010/03/15/rest-resources-uris-and-representations/#comments</comments>
		<pubDate>Tue, 16 Mar 2010 04:00:13 +0000</pubDate>
		<dc:creator>cory.isakson</dc:creator>
				<category><![CDATA[Architecture]]></category>
		<category><![CDATA[WebServices]]></category>
		<category><![CDATA[Resources]]></category>
		<category><![CDATA[REST]]></category>

		<guid isPermaLink="false">http://elegantcode.com/2010/03/15/rest-resources-uris-and-representations/</guid>
		<description><![CDATA[In this post I will begin introducing the architectural style known as Representational State Transfer (REST).&#160; REST is viable for both services and applications.&#160; Wrap your mind around this style and you will quickly see how straightforward it is and where it might fit in your solutions. Resources Resources are at the heart of REST.&#160; [...]]]></description>
			<content:encoded><![CDATA[<p>In this post I will begin introducing the architectural style known as Representational State Transfer (REST).&#160; REST is viable for both services and applications.&#160; Wrap your mind around this style and you will quickly see how straightforward it is and where it might fit in your solutions.</p>  <h3>Resources</h3>  <p>Resources are at the heart of REST.&#160; You are already used to resources as a web browsing consumer.&#160; A resource is not something specific to REST, instead it is the first thing you probably want to consider when architecting a RESTful application.&#160; A resource is simply the entity, item, or thing you want to expose.</p>  <p>Perhaps you have approached application architecture using one or many of several modeling and design techniques.&#160; Data First practitioners typically begin with databases and data models.&#160; DDD proponents like to begin by modeling around business entities and interactions, while their cousins in the BDD camp model around business activities.</p>  <p>When you decide to apply REST you will need to think a lot more about data entities and domain objects as resources.&#160; Your existing models may or may not closely map to resources.&#160; The shift in thinking may appear slight, but is very important.&#160; It centers around making things&#160; addressable.&#160; Each resources must by uniquely identifiable as we will see in the next section.&#160; We are used to identity with most data entities, but our domain objects may not always be as easily identifiable.&#160; Likewise, our data entites may have identity, but not map to a resource.&#160; </p>  <p>Consider the classic customer and order scenario for example.&#160; If each customer and each order can be identified then it will be easy to design RESTful systems around them.&#160; However, if the model requires a lot of context then our challenge is a little bit larger.&#160; Perhaps we must first identify a partner, then a year, then a customer, and finally the order.&#160; Yes, that is a design smell in general.&#160; It makes fetching an order very difficult.&#160; Developing RESTfuly would only further expose that difficulty.&#160; Identifying your resources up front will help you reduce the possible impedance mismatches you might end up with between what you want to expose and your data or domain models.</p>  <p>REST is about interacting with Resources!</p>  <h3>URI’s</h3>  <p>REST defines the identity of a resource via URI.&#160; Each resources has a unique address in URL form (ie. using the http protocol).&#160; Interaction with a resource will take place at its URI.&#160; As an example, my twitter status feed resource URI is <a title="http://twitter.com/optionstrict" href="http://twitter.com/optionstrict">http://twitter.com/optionstrict</a>.&#160; That URI is unique to my feed and that is what you expect to find at that URI.&#160; In the Twitter databases or domain models my account may be referred to by the string optionstrict, or perhaps as some random number or guid.</p>  <p>To consume my status history via a service interface twitter provides another URI at <a title="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=optionstrict" href="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=optionstrict">http://api.twitter.com/1/statuses/user_timeline.json?screen_name=optionstrict</a>.&#160; I would actually prefer to have access at the same URI for html, json, and xml formats.&#160; Twitter probably has its reasons for distinguishing API access from HTML rendering, but they have actually complicated their architecture by doing so.&#160; When designing the URI’s for your resources, make them easy for your users to work with.&#160; </p>  <h3>Representation</h3>  <p>Lets continue with the twitter example to describe what is meant by Representation.&#160; Given a URI and a Resource, what will your consumers receive when they issue a GET request to the URI?&#160; Twitter chose a representation of my account and included status history and profile for the response at <a href="http://twitter.com/optionstrict">http://twitter.com/optionstrict</a>.&#160; They decided to put a representation of my profile photo at <a title="http://twitter.com/account/profile_image/optionstrict" href="http://twitter.com/account/profile_image/optionstrict">http://twitter.com/account/profile_image/optionstrict</a>.&#160; In your REST solutions you will need to consider how you want to represent a resource at its URI.&#160; Each representation will have a unique URI.&#160; </p>  <p>Representations are also important for manipulating resources.&#160; You must define the representation required to create and update resources.&#160; Twitter status updates require a text representation with a maximum of 140 characters.&#160; They allow additional values in the status representation, such as latitude and longitude.&#160; Your REST solutions similarly must define representations for Requests and Responses.</p>  <p>I hope that this short introduction has helped you to see that the core essence of REST is simple and fairly obvious.&#160; As you look at your current solutions what are the resources you are exposing?&#160; Could you make those resources identifiable by URI?&#160; What representation would you place at each URI?&#160; What representation would you require for manipulating a given resource?</p>  <p>Also, notice I did not mention much about data formats, Content Type, Mime, etc.&#160; Those details can cloud your design if you try to start with them. If you can’t wait for my post about how REST handles html, json, xml from the same URI, then start googling Content Negotiation, Accept header, and Content-Type header.</p>]]></content:encoded>
			<wfw:commentRss>http://elegantcode.com/2010/03/15/rest-resources-uris-and-representations/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Introducing oEmbed</title>
		<link>http://elegantcode.com/2010/03/05/introducing-oembed/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=introducing-oembed</link>
		<comments>http://elegantcode.com/2010/03/05/introducing-oembed/#comments</comments>
		<pubDate>Fri, 05 Mar 2010 06:12:08 +0000</pubDate>
		<dc:creator>cory.isakson</dc:creator>
				<category><![CDATA[html]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[WebServices]]></category>
		<category><![CDATA[oembed]]></category>

		<guid isPermaLink="false">http://elegantcode.com/?p=3325</guid>
		<description><![CDATA[Gadgets, widgets, flash, ActiveX, Silverlight, json, xml With all of the competing technologies for content embedding and resource sharing on the web it can be difficult to determine which options to use.  Have you ever wished that you could embed YouTube videos and Flickr photos into your site just by knowing the consumer friendly URLi’s [...]]]></description>
			<content:encoded><![CDATA[Gadgets, widgets, flash, ActiveX, Silverlight, json, xml

With all of the competing technologies for content embedding and resource sharing on the web it can be difficult to determine which options to use.  Have you ever wished that you could embed YouTube videos and Flickr photos into your site just by knowing the consumer friendly URLi’s to them?  That is exactly what <a href="http://oembed.com">oEmbed</a> provides.  I would like to introduce you to the basics of the specification.  I hope the simplicity encourages you to support it as a provider and as a consumer when embedding resources from other providers.  Many popular sites already support it!
<blockquote>oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.</blockquote>
Lets take a look at each side of a provider and consumer scenario to illustrate how oEmbed provides and elegant solution for each.
<blockquote>Providers must specify one or more URL scheme and API endpoint pairs. The URL scheme describes which URLs provided by the service may have an embedded representation.</blockquote>
The publisher must determine what scheme(s) they support in very basic format.  Typically the scheme matches URLs that consumers would browse resources at normally.  The YouTube API, for example, supports URLs matching the scheme <a href="http://*.youtube.com/watch">http://*.youtube.com/watch</a>*

The API endpoint is simply an http URL at which consumers request oEmbed representations of the resources you provide.  Most of the current providers offer API endpoints with obvious URL’s like <a title="http://www.youtube.com/oembed" href="http://www.youtube.com/oembed">http://www.youtube.com/oembed</a> and <a title="http://www.flickr.com/services/oembed/" href="http://www.flickr.com/services/oembed/">http://www.flickr.com/services/oembed/</a>.

Once you have the endpoint you just need to host a service there that accepts 4 specific query parameters:

url : The urlencoded url that matches a supported provider defined scheme.
maxwidth : (optional) The maximum width you want for embedding the resource.
maxheight : (optional) The maximum height you want for embedding the resource.
format: (optional) xml or json are the possible values that determine the consumers desired response Content-Type.
<blockquote>Requests sent to the API endpoint must be HTTP GET requests, with all arguments sent as query parameters. All arguments must be urlencoded (as per RFC 1738).</blockquote>
oEmbed consumers make requests for the oEmbed representation of a resource by sending a basic GET request to an API endpoint with url query parameters and any optional parameters they choose.

A request to <a title="http://www.youtube.com/oembed?url=http%3A//www.youtube.com/watch?v%3D6lbDyXu7gUQ" href="http://www.youtube.com/oembed?url=http%3A//www.youtube.com/watch?v%3D6lbDyXu7gUQ">http://www.youtube.com/oembed?url=http%3A//www.youtube.com/watch?v%3D6lbDyXu7gUQ</a> results in a json response:
<pre>{
"provider_url": "http://www.youtube.com/",
"title": "Insert a YouTube Video With oEmbed Wordpress 2.9",
"html": "&lt;object width=\"480\" height=\"295\"&gt;
    &lt;param name=\"movie\" value=\"http://www.youtube.com/v/6lbDyXu7gUQ&amp;fs=1\"&gt;&lt;/param&gt;
    &lt;param name=\"allowFullScreen\" value=\"true\"&gt;&lt;/param&gt;
    &lt;param name=\"allowscriptaccess\" value=\"always\"&gt;&lt;/param&gt;
    &lt;embed src=\"http://www.youtube.com/v/6lbDyXu7gUQ&amp;fs=1\" type=\"application/x-shockwave-flash\"
        width=\"480\" height=\"295\" allowscriptaccess=\"always\" allowfullscreen=\"true\"&gt;&lt;/embed&gt;&lt;/object&gt;",
"author_name": "adriarichards", "height": 295, "width": 480, "version": "1.0",
"author_url": "http://www.youtube.com/user/adriarichards",
"provider_name": "YouTube",
"type": "video"
}</pre>
Note the html property.  It contains everything you need to embed the video.  If this installation of WordPress was running version 2.9 I could paste a YouTube URL here and it would automatically get embeded as described in the video <a href="http://www.youtube.com/watch?v=6lbDyXu7gUQ">Insert a YouTube Video With oEmbed Wordpress 2.9</a>

oEmbed supports 4 result types including video, photo, link and rich.  The rich type allows for just about any html to be returned and thus embedded.
<blockquote>Consumers may wish to load the HTML in an off-domain iframe to avoid XSS vulnerabilities.</blockquote>
To learn more and see a list of some current providers check it out at:

<a title="http://oembed.com/" href="http://oembed.com/">http://oembed.com/</a>

And for a few more implementations check out <a title="http://oohembed.com/" href="http://oohembed.com/">http://oohembed.com/</a>

I look forward to hearing how you end up using oEmbed!]]></content:encoded>
			<wfw:commentRss>http://elegantcode.com/2010/03/05/introducing-oembed/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>JQuery Ajax with Class Arrays</title>
	<atom:link href="http://elegantcode.com/category/webservices/feed/" rel="self" type="application/rss+xml" />
	<link>http://elegantcode.com</link>
	<description></description>
	<lastBuildDate>Tue, 15 May 2012 10:00:00 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Elegant Code &#187; WebServices</title>
	<atom:link href="http://elegantcode.com/category/webservices/feed/" rel="self" type="application/rss+xml" />
	<link>http://elegantcode.com</link>
	<description></description>
	<lastBuildDate>Tue, 15 May 2012 10:00:00 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>REST: Resources, URI&#8217;s and Representations</title>
		<link>http://elegantcode.com/2010/03/15/rest-resources-uris-and-representations/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=rest-resources-uris-and-representations</link>
		<comments>http://elegantcode.com/2010/03/15/rest-resources-uris-and-representations/#comments</comments>
		<pubDate>Tue, 16 Mar 2010 04:00:13 +0000</pubDate>
		<dc:creator>cory.isakson</dc:creator>
				<category><![CDATA[Architecture]]></category>
		<category><![CDATA[WebServices]]></category>
		<category><![CDATA[Resources]]></category>
		<category><![CDATA[REST]]></category>

		<guid isPermaLink="false">http://elegantcode.com/2010/03/15/rest-resources-uris-and-representations/</guid>
		<description><![CDATA[In this post I will begin introducing the architectural style known as Representational State Transfer (REST).&#160; REST is viable for both services and applications.&#160; Wrap your mind around this style and you will quickly see how straightforward it is and where it might fit in your solutions. Resources Resources are at the heart of REST.&#160; [...]]]></description>
			<content:encoded><![CDATA[<p>In this post I will begin introducing the architectural style known as Representational State Transfer (REST).&#160; REST is viable for both services and applications.&#160; Wrap your mind around this style and you will quickly see how straightforward it is and where it might fit in your solutions.</p>  <h3>Resources</h3>  <p>Resources are at the heart of REST.&#160; You are already used to resources as a web browsing consumer.&#160; A resource is not something specific to REST, instead it is the first thing you probably want to consider when architecting a RESTful application.&#160; A resource is simply the entity, item, or thing you want to expose.</p>  <p>Perhaps you have approached application architecture using one or many of several modeling and design techniques.&#160; Data First practitioners typically begin with databases and data models.&#160; DDD proponents like to begin by modeling around business entities and interactions, while their cousins in the BDD camp model around business activities.</p>  <p>When you decide to apply REST you will need to think a lot more about data entities and domain objects as resources.&#160; Your existing models may or may not closely map to resources.&#160; The shift in thinking may appear slight, but is very important.&#160; It centers around making things&#160; addressable.&#160; Each resources must by uniquely identifiable as we will see in the next section.&#160; We are used to identity with most data entities, but our domain objects may not always be as easily identifiable.&#160; Likewise, our data entites may have identity, but not map to a resource.&#160; </p>  <p>Consider the classic customer and order scenario for example.&#160; If each customer and each order can be identified then it will be easy to design RESTful systems around them.&#160; However, if the model requires a lot of context then our challenge is a little bit larger.&#160; Perhaps we must first identify a partner, then a year, then a customer, and finally the order.&#160; Yes, that is a design smell in general.&#160; It makes fetching an order very difficult.&#160; Developing RESTfuly would only further expose that difficulty.&#160; Identifying your resources up front will help you reduce the possible impedance mismatches you might end up with between what you want to expose and your data or domain models.</p>  <p>REST is about interacting with Resources!</p>  <h3>URI’s</h3>  <p>REST defines the identity of a resource via URI.&#160; Each resources has a unique address in URL form (ie. using the http protocol).&#160; Interaction with a resource will take place at its URI.&#160; As an example, my twitter status feed resource URI is <a title="http://twitter.com/optionstrict" href="http://twitter.com/optionstrict">http://twitter.com/optionstrict</a>.&#160; That URI is unique to my feed and that is what you expect to find at that URI.&#160; In the Twitter databases or domain models my account may be referred to by the string optionstrict, or perhaps as some random number or guid.</p>  <p>To consume my status history via a service interface twitter provides another URI at <a title="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=optionstrict" href="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=optionstrict">http://api.twitter.com/1/statuses/user_timeline.json?screen_name=optionstrict</a>.&#160; I would actually prefer to have access at the same URI for html, json, and xml formats.&#160; Twitter probably has its reasons for distinguishing API access from HTML rendering, but they have actually complicated their architecture by doing so.&#160; When designing the URI’s for your resources, make them easy for your users to work with.&#160; </p>  <h3>Representation</h3>  <p>Lets continue with the twitter example to describe what is meant by Representation.&#160; Given a URI and a Resource, what will your consumers receive when they issue a GET request to the URI?&#160; Twitter chose a representation of my account and included status history and profile for the response at <a href="http://twitter.com/optionstrict">http://twitter.com/optionstrict</a>.&#160; They decided to put a representation of my profile photo at <a title="http://twitter.com/account/profile_image/optionstrict" href="http://twitter.com/account/profile_image/optionstrict">http://twitter.com/account/profile_image/optionstrict</a>.&#160; In your REST solutions you will need to consider how you want to represent a resource at its URI.&#160; Each representation will have a unique URI.&#160; </p>  <p>Representations are also important for manipulating resources.&#160; You must define the representation required to create and update resources.&#160; Twitter status updates require a text representation with a maximum of 140 characters.&#160; They allow additional values in the status representation, such as latitude and longitude.&#160; Your REST solutions similarly must define representations for Requests and Responses.</p>  <p>I hope that this short introduction has helped you to see that the core essence of REST is simple and fairly obvious.&#160; As you look at your current solutions what are the resources you are exposing?&#160; Could you make those resources identifiable by URI?&#160; What representation would you place at each URI?&#160; What representation would you require for manipulating a given resource?</p>  <p>Also, notice I did not mention much about data formats, Content Type, Mime, etc.&#160; Those details can cloud your design if you try to start with them. If you can’t wait for my post about how REST handles html, json, xml from the same URI, then start googling Content Negotiation, Accept header, and Content-Type header.</p>]]></content:encoded>
			<wfw:commentRss>http://elegantcode.com/2010/03/15/rest-resources-uris-and-representations/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Introducing oEmbed</title>
		<link>http://elegantcode.com/2010/03/05/introducing-oembed/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=introducing-oembed</link>
		<comments>http://elegantcode.com/2010/03/05/introducing-oembed/#comments</comments>
		<pubDate>Fri, 05 Mar 2010 06:12:08 +0000</pubDate>
		<dc:creator>cory.isakson</dc:creator>
				<category><![CDATA[html]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[WebServices]]></category>
		<category><![CDATA[oembed]]></category>

		<guid isPermaLink="false">http://elegantcode.com/?p=3325</guid>
		<description><![CDATA[Gadgets, widgets, flash, ActiveX, Silverlight, json, xml With all of the competing technologies for content embedding and resource sharing on the web it can be difficult to determine which options to use.  Have you ever wished that you could embed YouTube videos and Flickr photos into your site just by knowing the consumer friendly URLi’s [...]]]></description>
			<content:encoded><![CDATA[Gadgets, widgets, flash, ActiveX, Silverlight, json, xml

With all of the competing technologies for content embedding and resource sharing on the web it can be difficult to determine which options to use.  Have you ever wished that you could embed YouTube videos and Flickr photos into your site just by knowing the consumer friendly URLi’s to them?  That is exactly what <a href="http://oembed.com">oEmbed</a> provides.  I would like to introduce you to the basics of the specification.  I hope the simplicity encourages you to support it as a provider and as a consumer when embedding resources from other providers.  Many popular sites already support it!
<blockquote>oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.</blockquote>
Lets take a look at each side of a provider and consumer scenario to illustrate how oEmbed provides and elegant solution for each.
<blockquote>Providers must specify one or more URL scheme and API endpoint pairs. The URL scheme describes which URLs provided by the service may have an embedded representation.</blockquote>
The publisher must determine what scheme(s) they support in very basic format.  Typically the scheme matches URLs that consumers would browse resources at normally.  The YouTube API, for example, supports URLs matching the scheme <a href="http://*.youtube.com/watch">http://*.youtube.com/watch</a>*

The API endpoint is simply an http URL at which consumers request oEmbed representations of the resources you provide.  Most of the current providers offer API endpoints with obvious URL’s like <a title="http://www.youtube.com/oembed" href="http://www.youtube.com/oembed">http://www.youtube.com/oembed</a> and <a title="http://www.flickr.com/services/oembed/" href="http://www.flickr.com/services/oembed/">http://www.flickr.com/services/oembed/</a>.

Once you have the endpoint you just need to host a service there that accepts 4 specific query parameters:

url : The urlencoded url that matches a supported provider defined scheme.
maxwidth : (optional) The maximum width you want for embedding the resource.
maxheight : (optional) The maximum height you want for embedding the resource.
format: (optional) xml or json are the possible values that determine the consumers desired response Content-Type.
<blockquote>Requests sent to the API endpoint must be HTTP GET requests, with all arguments sent as query parameters. All arguments must be urlencoded (as per RFC 1738).</blockquote>
oEmbed consumers make requests for the oEmbed representation of a resource by sending a basic GET request to an API endpoint with url query parameters and any optional parameters they choose.

A request to <a title="http://www.youtube.com/oembed?url=http%3A//www.youtube.com/watch?v%3D6lbDyXu7gUQ" href="http://www.youtube.com/oembed?url=http%3A//www.youtube.com/watch?v%3D6lbDyXu7gUQ">http://www.youtube.com/oembed?url=http%3A//www.youtube.com/watch?v%3D6lbDyXu7gUQ</a> results in a json response:
<pre>{
"provider_url": "http://www.youtube.com/",
"title": "Insert a YouTube Video With oEmbed Wordpress 2.9",
"html": "&lt;object width=\"480\" height=\"295\"&gt;
    &lt;param name=\"movie\" value=\"http://www.youtube.com/v/6lbDyXu7gUQ&amp;fs=1\"&gt;&lt;/param&gt;
    &lt;param name=\"allowFullScreen\" value=\"true\"&gt;&lt;/param&gt;
    &lt;param name=\"allowscriptaccess\" value=\"always\"&gt;&lt;/param&gt;
    &lt;embed src=\"http://www.youtube.com/v/6lbDyXu7gUQ&amp;fs=1\" type=\"application/x-shockwave-flash\"
        width=\"480\" height=\"295\" allowscriptaccess=\"always\" allowfullscreen=\"true\"&gt;&lt;/embed&gt;&lt;/object&gt;",
"author_name": "adriarichards", "height": 295, "width": 480, "version": "1.0",
"author_url": "http://www.youtube.com/user/adriarichards",
"provider_name": "YouTube",
"type": "video"
}</pre>
Note the html property.  It contains everything you need to embed the video.  If this installation of WordPress was running version 2.9 I could paste a YouTube URL here and it would automatically get embeded as described in the video <a href="http://www.youtube.com/watch?v=6lbDyXu7gUQ">Insert a YouTube Video With oEmbed Wordpress 2.9</a>

oEmbed supports 4 result types including video, photo, link and rich.  The rich type allows for just about any html to be returned and thus embedded.
<blockquote>Consumers may wish to load the HTML in an off-domain iframe to avoid XSS vulnerabilities.</blockquote>
To learn more and see a list of some current providers check it out at:

<a title="http://oembed.com/" href="http://oembed.com/">http://oembed.com/</a>

And for a few more implementations check out <a title="http://oohembed.com/" href="http://oohembed.com/">http://oohembed.com/</a>

I look forward to hearing how you end up using oEmbed!]]></content:encoded>
			<wfw:commentRss>http://elegantcode.com/2010/03/05/introducing-oembed/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>JQuery Ajax with Class Arrays</title>
		<link>http://elegantcode.com/2010/03/15/rest-resources-uris-and-representations/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=rest-resources-uris-and-representations</link>
		<comments>http://elegantcode.com/2010/03/15/rest-resources-uris-and-representations/#comments</comments>
		<pubDate>Tue, 16 Mar 2010 04:00:13 +0000</pubDate>
		<dc:creator>cory.isakson</dc:creator>
				<category><![CDATA[Architecture]]></category>
		<category><![CDATA[WebServices]]></category>
		<category><![CDATA[Resources]]></category>
		<category><![CDATA[REST]]></category>

		<guid isPermaLink="false">http://elegantcode.com/2010/03/15/rest-resources-uris-and-representations/</guid>
		<description><![CDATA[In this post I will begin introducing the architectural style known as Representational State Transfer (REST).&#160; REST is viable for both services and applications.&#160; Wrap your mind around this style and you will quickly see how straightforward it is and where it might fit in your solutions. Resources Resources are at the heart of REST.&#160; [...]]]></description>
			<content:encoded><![CDATA[<p>In this post I will begin introducing the architectural style known as Representational State Transfer (REST).&#160; REST is viable for both services and applications.&#160; Wrap your mind around this style and you will quickly see how straightforward it is and where it might fit in your solutions.</p>  <h3>Resources</h3>  <p>Resources are at the heart of REST.&#160; You are already used to resources as a web browsing consumer.&#160; A resource is not something specific to REST, instead it is the first thing you probably want to consider when architecting a RESTful application.&#160; A resource is simply the entity, item, or thing you want to expose.</p>  <p>Perhaps you have approached application architecture using one or many of several modeling and design techniques.&#160; Data First practitioners typically begin with databases and data models.&#160; DDD proponents like to begin by modeling around business entities and interactions, while their cousins in the BDD camp model around business activities.</p>  <p>When you decide to apply REST you will need to think a lot more about data entities and domain objects as resources.&#160; Your existing models may or may not closely map to resources.&#160; The shift in thinking may appear slight, but is very important.&#160; It centers around making things&#160; addressable.&#160; Each resources must by uniquely identifiable as we will see in the next section.&#160; We are used to identity with most data entities, but our domain objects may not always be as easily identifiable.&#160; Likewise, our data entites may have identity, but not map to a resource.&#160; </p>  <p>Consider the classic customer and order scenario for example.&#160; If each customer and each order can be identified then it will be easy to design RESTful systems around them.&#160; However, if the model requires a lot of context then our challenge is a little bit larger.&#160; Perhaps we must first identify a partner, then a year, then a customer, and finally the order.&#160; Yes, that is a design smell in general.&#160; It makes fetching an order very difficult.&#160; Developing RESTfuly would only further expose that difficulty.&#160; Identifying your resources up front will help you reduce the possible impedance mismatches you might end up with between what you want to expose and your data or domain models.</p>  <p>REST is about interacting with Resources!</p>  <h3>URI’s</h3>  <p>REST defines the identity of a resource via URI.&#160; Each resources has a unique address in URL form (ie. using the http protocol).&#160; Interaction with a resource will take place at its URI.&#160; As an example, my twitter status feed resource URI is <a title="http://twitter.com/optionstrict" href="http://twitter.com/optionstrict">http://twitter.com/optionstrict</a>.&#160; That URI is unique to my feed and that is what you expect to find at that URI.&#160; In the Twitter databases or domain models my account may be referred to by the string optionstrict, or perhaps as some random number or guid.</p>  <p>To consume my status history via a service interface twitter provides another URI at <a title="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=optionstrict" href="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=optionstrict">http://api.twitter.com/1/statuses/user_timeline.json?screen_name=optionstrict</a>.&#160; I would actually prefer to have access at the same URI for html, json, and xml formats.&#160; Twitter probably has its reasons for distinguishing API access from HTML rendering, but they have actually complicated their architecture by doing so.&#160; When designing the URI’s for your resources, make them easy for your users to work with.&#160; </p>  <h3>Representation</h3>  <p>Lets continue with the twitter example to describe what is meant by Representation.&#160; Given a URI and a Resource, what will your consumers receive when they issue a GET request to the URI?&#160; Twitter chose a representation of my account and included status history and profile for the response at <a href="http://twitter.com/optionstrict">http://twitter.com/optionstrict</a>.&#160; They decided to put a representation of my profile photo at <a title="http://twitter.com/account/profile_image/optionstrict" href="http://twitter.com/account/profile_image/optionstrict">http://twitter.com/account/profile_image/optionstrict</a>.&#160; In your REST solutions you will need to consider how you want to represent a resource at its URI.&#160; Each representation will have a unique URI.&#160; </p>  <p>Representations are also important for manipulating resources.&#160; You must define the representation required to create and update resources.&#160; Twitter status updates require a text representation with a maximum of 140 characters.&#160; They allow additional values in the status representation, such as latitude and longitude.&#160; Your REST solutions similarly must define representations for Requests and Responses.</p>  <p>I hope that this short introduction has helped you to see that the core essence of REST is simple and fairly obvious.&#160; As you look at your current solutions what are the resources you are exposing?&#160; Could you make those resources identifiable by URI?&#160; What representation would you place at each URI?&#160; What representation would you require for manipulating a given resource?</p>  <p>Also, notice I did not mention much about data formats, Content Type, Mime, etc.&#160; Those details can cloud your design if you try to start with them. If you can’t wait for my post about how REST handles html, json, xml from the same URI, then start googling Content Negotiation, Accept header, and Content-Type header.</p>]]></content:encoded>
			<wfw:commentRss>http://elegantcode.com/2010/03/15/rest-resources-uris-and-representations/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Elegant Code &#187; WebServices</title>
	<atom:link href="http://elegantcode.com/category/webservices/feed/" rel="self" type="application/rss+xml" />
	<link>http://elegantcode.com</link>
	<description></description>
	<lastBuildDate>Tue, 15 May 2012 10:00:00 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>REST: Resources, URI&#8217;s and Representations</title>
		<link>http://elegantcode.com/2010/03/15/rest-resources-uris-and-representations/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=rest-resources-uris-and-representations</link>
		<comments>http://elegantcode.com/2010/03/15/rest-resources-uris-and-representations/#comments</comments>
		<pubDate>Tue, 16 Mar 2010 04:00:13 +0000</pubDate>
		<dc:creator>cory.isakson</dc:creator>
				<category><![CDATA[Architecture]]></category>
		<category><![CDATA[WebServices]]></category>
		<category><![CDATA[Resources]]></category>
		<category><![CDATA[REST]]></category>

		<guid isPermaLink="false">http://elegantcode.com/2010/03/15/rest-resources-uris-and-representations/</guid>
		<description><![CDATA[In this post I will begin introducing the architectural style known as Representational State Transfer (REST).&#160; REST is viable for both services and applications.&#160; Wrap your mind around this style and you will quickly see how straightforward it is and where it might fit in your solutions. Resources Resources are at the heart of REST.&#160; [...]]]></description>
			<content:encoded><![CDATA[<p>In this post I will begin introducing the architectural style known as Representational State Transfer (REST).&#160; REST is viable for both services and applications.&#160; Wrap your mind around this style and you will quickly see how straightforward it is and where it might fit in your solutions.</p>  <h3>Resources</h3>  <p>Resources are at the heart of REST.&#160; You are already used to resources as a web browsing consumer.&#160; A resource is not something specific to REST, instead it is the first thing you probably want to consider when architecting a RESTful application.&#160; A resource is simply the entity, item, or thing you want to expose.</p>  <p>Perhaps you have approached application architecture using one or many of several modeling and design techniques.&#160; Data First practitioners typically begin with databases and data models.&#160; DDD proponents like to begin by modeling around business entities and interactions, while their cousins in the BDD camp model around business activities.</p>  <p>When you decide to apply REST you will need to think a lot more about data entities and domain objects as resources.&#160; Your existing models may or may not closely map to resources.&#160; The shift in thinking may appear slight, but is very important.&#160; It centers around making things&#160; addressable.&#160; Each resources must by uniquely identifiable as we will see in the next section.&#160; We are used to identity with most data entities, but our domain objects may not always be as easily identifiable.&#160; Likewise, our data entites may have identity, but not map to a resource.&#160; </p>  <p>Consider the classic customer and order scenario for example.&#160; If each customer and each order can be identified then it will be easy to design RESTful systems around them.&#160; However, if the model requires a lot of context then our challenge is a little bit larger.&#160; Perhaps we must first identify a partner, then a year, then a customer, and finally the order.&#160; Yes, that is a design smell in general.&#160; It makes fetching an order very difficult.&#160; Developing RESTfuly would only further expose that difficulty.&#160; Identifying your resources up front will help you reduce the possible impedance mismatches you might end up with between what you want to expose and your data or domain models.</p>  <p>REST is about interacting with Resources!</p>  <h3>URI’s</h3>  <p>REST defines the identity of a resource via URI.&#160; Each resources has a unique address in URL form (ie. using the http protocol).&#160; Interaction with a resource will take place at its URI.&#160; As an example, my twitter status feed resource URI is <a title="http://twitter.com/optionstrict" href="http://twitter.com/optionstrict">http://twitter.com/optionstrict</a>.&#160; That URI is unique to my feed and that is what you expect to find at that URI.&#160; In the Twitter databases or domain models my account may be referred to by the string optionstrict, or perhaps as some random number or guid.</p>  <p>To consume my status history via a service interface twitter provides another URI at <a title="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=optionstrict" href="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=optionstrict">http://api.twitter.com/1/statuses/user_timeline.json?screen_name=optionstrict</a>.&#160; I would actually prefer to have access at the same URI for html, json, and xml formats.&#160; Twitter probably has its reasons for distinguishing API access from HTML rendering, but they have actually complicated their architecture by doing so.&#160; When designing the URI’s for your resources, make them easy for your users to work with.&#160; </p>  <h3>Representation</h3>  <p>Lets continue with the twitter example to describe what is meant by Representation.&#160; Given a URI and a Resource, what will your consumers receive when they issue a GET request to the URI?&#160; Twitter chose a representation of my account and included status history and profile for the response at <a href="http://twitter.com/optionstrict">http://twitter.com/optionstrict</a>.&#160; They decided to put a representation of my profile photo at <a title="http://twitter.com/account/profile_image/optionstrict" href="http://twitter.com/account/profile_image/optionstrict">http://twitter.com/account/profile_image/optionstrict</a>.&#160; In your REST solutions you will need to consider how you want to represent a resource at its URI.&#160; Each representation will have a unique URI.&#160; </p>  <p>Representations are also important for manipulating resources.&#160; You must define the representation required to create and update resources.&#160; Twitter status updates require a text representation with a maximum of 140 characters.&#160; They allow additional values in the status representation, such as latitude and longitude.&#160; Your REST solutions similarly must define representations for Requests and Responses.</p>  <p>I hope that this short introduction has helped you to see that the core essence of REST is simple and fairly obvious.&#160; As you look at your current solutions what are the resources you are exposing?&#160; Could you make those resources identifiable by URI?&#160; What representation would you place at each URI?&#160; What representation would you require for manipulating a given resource?</p>  <p>Also, notice I did not mention much about data formats, Content Type, Mime, etc.&#160; Those details can cloud your design if you try to start with them. If you can’t wait for my post about how REST handles html, json, xml from the same URI, then start googling Content Negotiation, Accept header, and Content-Type header.</p>]]></content:encoded>
			<wfw:commentRss>http://elegantcode.com/2010/03/15/rest-resources-uris-and-representations/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Introducing oEmbed</title>
		<link>http://elegantcode.com/2010/03/05/introducing-oembed/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=introducing-oembed</link>
		<comments>http://elegantcode.com/2010/03/05/introducing-oembed/#comments</comments>
		<pubDate>Fri, 05 Mar 2010 06:12:08 +0000</pubDate>
		<dc:creator>cory.isakson</dc:creator>
				<category><![CDATA[html]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[WebServices]]></category>
		<category><![CDATA[oembed]]></category>

		<guid isPermaLink="false">http://elegantcode.com/?p=3325</guid>
		<description><![CDATA[Gadgets, widgets, flash, ActiveX, Silverlight, json, xml With all of the competing technologies for content embedding and resource sharing on the web it can be difficult to determine which options to use.  Have you ever wished that you could embed YouTube videos and Flickr photos into your site just by knowing the consumer friendly URLi’s [...]]]></description>
			<content:encoded><![CDATA[Gadgets, widgets, flash, ActiveX, Silverlight, json, xml

With all of the competing technologies for content embedding and resource sharing on the web it can be difficult to determine which options to use.  Have you ever wished that you could embed YouTube videos and Flickr photos into your site just by knowing the consumer friendly URLi’s to them?  That is exactly what <a href="http://oembed.com">oEmbed</a> provides.  I would like to introduce you to the basics of the specification.  I hope the simplicity encourages you to support it as a provider and as a consumer when embedding resources from other providers.  Many popular sites already support it!
<blockquote>oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.</blockquote>
Lets take a look at each side of a provider and consumer scenario to illustrate how oEmbed provides and elegant solution for each.
<blockquote>Providers must specify one or more URL scheme and API endpoint pairs. The URL scheme describes which URLs provided by the service may have an embedded representation.</blockquote>
The publisher must determine what scheme(s) they support in very basic format.  Typically the scheme matches URLs that consumers would browse resources at normally.  The YouTube API, for example, supports URLs matching the scheme <a href="http://*.youtube.com/watch">http://*.youtube.com/watch</a>*

The API endpoint is simply an http URL at which consumers request oEmbed representations of the resources you provide.  Most of the current providers offer API endpoints with obvious URL’s like <a title="http://www.youtube.com/oembed" href="http://www.youtube.com/oembed">http://www.youtube.com/oembed</a> and <a title="http://www.flickr.com/services/oembed/" href="http://www.flickr.com/services/oembed/">http://www.flickr.com/services/oembed/</a>.

Once you have the endpoint you just need to host a service there that accepts 4 specific query parameters:

url : The urlencoded url that matches a supported provider defined scheme.
maxwidth : (optional) The maximum width you want for embedding the resource.
maxheight : (optional) The maximum height you want for embedding the resource.
format: (optional) xml or json are the possible values that determine the consumers desired response Content-Type.
<blockquote>Requests sent to the API endpoint must be HTTP GET requests, with all arguments sent as query parameters. All arguments must be urlencoded (as per RFC 1738).</blockquote>
oEmbed consumers make requests for the oEmbed representation of a resource by sending a basic GET request to an API endpoint with url query parameters and any optional parameters they choose.

A request to <a title="http://www.youtube.com/oembed?url=http%3A//www.youtube.com/watch?v%3D6lbDyXu7gUQ" href="http://www.youtube.com/oembed?url=http%3A//www.youtube.com/watch?v%3D6lbDyXu7gUQ">http://www.youtube.com/oembed?url=http%3A//www.youtube.com/watch?v%3D6lbDyXu7gUQ</a> results in a json response:
<pre>{
"provider_url": "http://www.youtube.com/",
"title": "Insert a YouTube Video With oEmbed Wordpress 2.9",
"html": "&lt;object width=\"480\" height=\"295\"&gt;
    &lt;param name=\"movie\" value=\"http://www.youtube.com/v/6lbDyXu7gUQ&amp;fs=1\"&gt;&lt;/param&gt;
    &lt;param name=\"allowFullScreen\" value=\"true\"&gt;&lt;/param&gt;
    &lt;param name=\"allowscriptaccess\" value=\"always\"&gt;&lt;/param&gt;
    &lt;embed src=\"http://www.youtube.com/v/6lbDyXu7gUQ&amp;fs=1\" type=\"application/x-shockwave-flash\"
        width=\"480\" height=\"295\" allowscriptaccess=\"always\" allowfullscreen=\"true\"&gt;&lt;/embed&gt;&lt;/object&gt;",
"author_name": "adriarichards", "height": 295, "width": 480, "version": "1.0",
"author_url": "http://www.youtube.com/user/adriarichards",
"provider_name": "YouTube",
"type": "video"
}</pre>
Note the html property.  It contains everything you need to embed the video.  If this installation of WordPress was running version 2.9 I could paste a YouTube URL here and it would automatically get embeded as described in the video <a href="http://www.youtube.com/watch?v=6lbDyXu7gUQ">Insert a YouTube Video With oEmbed Wordpress 2.9</a>

oEmbed supports 4 result types including video, photo, link and rich.  The rich type allows for just about any html to be returned and thus embedded.
<blockquote>Consumers may wish to load the HTML in an off-domain iframe to avoid XSS vulnerabilities.</blockquote>
To learn more and see a list of some current providers check it out at:

<a title="http://oembed.com/" href="http://oembed.com/">http://oembed.com/</a>

And for a few more implementations check out <a title="http://oohembed.com/" href="http://oohembed.com/">http://oohembed.com/</a>

I look forward to hearing how you end up using oEmbed!]]></content:encoded>
			<wfw:commentRss>http://elegantcode.com/2010/03/05/introducing-oembed/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>JQuery Ajax with Class Arrays</title>
		<link>http://elegantcode.com/2010/03/05/introducing-oembed/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=introducing-oembed</link>
		<comments>http://elegantcode.com/2010/03/05/introducing-oembed/#comments</comments>
		<pubDate>Fri, 05 Mar 2010 06:12:08 +0000</pubDate>
		<dc:creator>cory.isakson</dc:creator>
				<category><![CDATA[html]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[WebServices]]></category>
		<category><![CDATA[oembed]]></category>

		<guid isPermaLink="false">http://elegantcode.com/?p=3325</guid>
		<description><![CDATA[Gadgets, widgets, flash, ActiveX, Silverlight, json, xml With all of the competing technologies for content embedding and resource sharing on the web it can be difficult to determine which options to use.  Have you ever wished that you could embed YouTube videos and Flickr photos into your site just by knowing the consumer friendly URLi’s [...]]]></description>
			<content:encoded><![CDATA[Gadgets, widgets, flash, ActiveX, Silverlight, json, xml

With all of the competing technologies for content embedding and resource sharing on the web it can be difficult to determine which options to use.  Have you ever wished that you could embed YouTube videos and Flickr photos into your site just by knowing the consumer friendly URLi’s to them?  That is exactly what <a href="http://oembed.com">oEmbed</a> provides.  I would like to introduce you to the basics of the specification.  I hope the simplicity encourages you to support it as a provider and as a consumer when embedding resources from other providers.  Many popular sites already support it!
<blockquote>oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.</blockquote>
Lets take a look at each side of a provider and consumer scenario to illustrate how oEmbed provides and elegant solution for each.
<blockquote>Providers must specify one or more URL scheme and API endpoint pairs. The URL scheme describes which URLs provided by the service may have an embedded representation.</blockquote>
The publisher must determine what scheme(s) they support in very basic format.  Typically the scheme matches URLs that consumers would browse resources at normally.  The YouTube API, for example, supports URLs matching the scheme <a href="http://*.youtube.com/watch">http://*.youtube.com/watch</a>*

The API endpoint is simply an http URL at which consumers request oEmbed representations of the resources you provide.  Most of the current providers offer API endpoints with obvious URL’s like <a title="http://www.youtube.com/oembed" href="http://www.youtube.com/oembed">http://www.youtube.com/oembed</a> and <a title="http://www.flickr.com/services/oembed/" href="http://www.flickr.com/services/oembed/">http://www.flickr.com/services/oembed/</a>.

Once you have the endpoint you just need to host a service there that accepts 4 specific query parameters:

url : The urlencoded url that matches a supported provider defined scheme.
maxwidth : (optional) The maximum width you want for embedding the resource.
maxheight : (optional) The maximum height you want for embedding the resource.
format: (optional) xml or json are the possible values that determine the consumers desired response Content-Type.
<blockquote>Requests sent to the API endpoint must be HTTP GET requests, with all arguments sent as query parameters. All arguments must be urlencoded (as per RFC 1738).</blockquote>
oEmbed consumers make requests for the oEmbed representation of a resource by sending a basic GET request to an API endpoint with url query parameters and any optional parameters they choose.

A request to <a title="http://www.youtube.com/oembed?url=http%3A//www.youtube.com/watch?v%3D6lbDyXu7gUQ" href="http://www.youtube.com/oembed?url=http%3A//www.youtube.com/watch?v%3D6lbDyXu7gUQ">http://www.youtube.com/oembed?url=http%3A//www.youtube.com/watch?v%3D6lbDyXu7gUQ</a> results in a json response:
<pre>{
"provider_url": "http://www.youtube.com/",
"title": "Insert a YouTube Video With oEmbed Wordpress 2.9",
"html": "&lt;object width=\"480\" height=\"295\"&gt;
    &lt;param name=\"movie\" value=\"http://www.youtube.com/v/6lbDyXu7gUQ&amp;fs=1\"&gt;&lt;/param&gt;
    &lt;param name=\"allowFullScreen\" value=\"true\"&gt;&lt;/param&gt;
    &lt;param name=\"allowscriptaccess\" value=\"always\"&gt;&lt;/param&gt;
    &lt;embed src=\"http://www.youtube.com/v/6lbDyXu7gUQ&amp;fs=1\" type=\"application/x-shockwave-flash\"
        width=\"480\" height=\"295\" allowscriptaccess=\"always\" allowfullscreen=\"true\"&gt;&lt;/embed&gt;&lt;/object&gt;",
"author_name": "adriarichards", "height": 295, "width": 480, "version": "1.0",
"author_url": "http://www.youtube.com/user/adriarichards",
"provider_name": "YouTube",
"type": "video"
}</pre>
Note the html property.  It contains everything you need to embed the video.  If this installation of WordPress was running version 2.9 I could paste a YouTube URL here and it would automatically get embeded as described in the video <a href="http://www.youtube.com/watch?v=6lbDyXu7gUQ">Insert a YouTube Video With oEmbed Wordpress 2.9</a>

oEmbed supports 4 result types including video, photo, link and rich.  The rich type allows for just about any html to be returned and thus embedded.
<blockquote>Consumers may wish to load the HTML in an off-domain iframe to avoid XSS vulnerabilities.</blockquote>
To learn more and see a list of some current providers check it out at:

<a title="http://oembed.com/" href="http://oembed.com/">http://oembed.com/</a>

And for a few more implementations check out <a title="http://oohembed.com/" href="http://oohembed.com/">http://oohembed.com/</a>

I look forward to hearing how you end up using oEmbed!]]></content:encoded>
			<wfw:commentRss>http://elegantcode.com/2010/03/05/introducing-oembed/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Elegant Code &#187; WebServices</title>
	<atom:link href="http://elegantcode.com/category/webservices/feed/" rel="self" type="application/rss+xml" />
	<link>http://elegantcode.com</link>
	<description></description>
	<lastBuildDate>Tue, 15 May 2012 10:00:00 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>REST: Resources, URI&#8217;s and Representations</title>
		<link>http://elegantcode.com/2010/03/15/rest-resources-uris-and-representations/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=rest-resources-uris-and-representations</link>
		<comments>http://elegantcode.com/2010/03/15/rest-resources-uris-and-representations/#comments</comments>
		<pubDate>Tue, 16 Mar 2010 04:00:13 +0000</pubDate>
		<dc:creator>cory.isakson</dc:creator>
				<category><![CDATA[Architecture]]></category>
		<category><![CDATA[WebServices]]></category>
		<category><![CDATA[Resources]]></category>
		<category><![CDATA[REST]]></category>

		<guid isPermaLink="false">http://elegantcode.com/2010/03/15/rest-resources-uris-and-representations/</guid>
		<description><![CDATA[In this post I will begin introducing the architectural style known as Representational State Transfer (REST).&#160; REST is viable for both services and applications.&#160; Wrap your mind around this style and you will quickly see how straightforward it is and where it might fit in your solutions. Resources Resources are at the heart of REST.&#160; [...]]]></description>
			<content:encoded><![CDATA[<p>In this post I will begin introducing the architectural style known as Representational State Transfer (REST).&#160; REST is viable for both services and applications.&#160; Wrap your mind around this style and you will quickly see how straightforward it is and where it might fit in your solutions.</p>  <h3>Resources</h3>  <p>Resources are at the heart of REST.&#160; You are already used to resources as a web browsing consumer.&#160; A resource is not something specific to REST, instead it is the first thing you probably want to consider when architecting a RESTful application.&#160; A resource is simply the entity, item, or thing you want to expose.</p>  <p>Perhaps you have approached application architecture using one or many of several modeling and design techniques.&#160; Data First practitioners typically begin with databases and data models.&#160; DDD proponents like to begin by modeling around business entities and interactions, while their cousins in the BDD camp model around business activities.</p>  <p>When you decide to apply REST you will need to think a lot more about data entities and domain objects as resources.&#160; Your existing models may or may not closely map to resources.&#160; The shift in thinking may appear slight, but is very important.&#160; It centers around making things&#160; addressable.&#160; Each resources must by uniquely identifiable as we will see in the next section.&#160; We are used to identity with most data entities, but our domain objects may not always be as easily identifiable.&#160; Likewise, our data entites may have identity, but not map to a resource.&#160; </p>  <p>Consider the classic customer and order scenario for example.&#160; If each customer and each order can be identified then it will be easy to design RESTful systems around them.&#160; However, if the model requires a lot of context then our challenge is a little bit larger.&#160; Perhaps we must first identify a partner, then a year, then a customer, and finally the order.&#160; Yes, that is a design smell in general.&#160; It makes fetching an order very difficult.&#160; Developing RESTfuly would only further expose that difficulty.&#160; Identifying your resources up front will help you reduce the possible impedance mismatches you might end up with between what you want to expose and your data or domain models.</p>  <p>REST is about interacting with Resources!</p>  <h3>URI’s</h3>  <p>REST defines the identity of a resource via URI.&#160; Each resources has a unique address in URL form (ie. using the http protocol).&#160; Interaction with a resource will take place at its URI.&#160; As an example, my twitter status feed resource URI is <a title="http://twitter.com/optionstrict" href="http://twitter.com/optionstrict">http://twitter.com/optionstrict</a>.&#160; That URI is unique to my feed and that is what you expect to find at that URI.&#160; In the Twitter databases or domain models my account may be referred to by the string optionstrict, or perhaps as some random number or guid.</p>  <p>To consume my status history via a service interface twitter provides another URI at <a title="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=optionstrict" href="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=optionstrict">http://api.twitter.com/1/statuses/user_timeline.json?screen_name=optionstrict</a>.&#160; I would actually prefer to have access at the same URI for html, json, and xml formats.&#160; Twitter probably has its reasons for distinguishing API access from HTML rendering, but they have actually complicated their architecture by doing so.&#160; When designing the URI’s for your resources, make them easy for your users to work with.&#160; </p>  <h3>Representation</h3>  <p>Lets continue with the twitter example to describe what is meant by Representation.&#160; Given a URI and a Resource, what will your consumers receive when they issue a GET request to the URI?&#160; Twitter chose a representation of my account and included status history and profile for the response at <a href="http://twitter.com/optionstrict">http://twitter.com/optionstrict</a>.&#160; They decided to put a representation of my profile photo at <a title="http://twitter.com/account/profile_image/optionstrict" href="http://twitter.com/account/profile_image/optionstrict">http://twitter.com/account/profile_image/optionstrict</a>.&#160; In your REST solutions you will need to consider how you want to represent a resource at its URI.&#160; Each representation will have a unique URI.&#160; </p>  <p>Representations are also important for manipulating resources.&#160; You must define the representation required to create and update resources.&#160; Twitter status updates require a text representation with a maximum of 140 characters.&#160; They allow additional values in the status representation, such as latitude and longitude.&#160; Your REST solutions similarly must define representations for Requests and Responses.</p>  <p>I hope that this short introduction has helped you to see that the core essence of REST is simple and fairly obvious.&#160; As you look at your current solutions what are the resources you are exposing?&#160; Could you make those resources identifiable by URI?&#160; What representation would you place at each URI?&#160; What representation would you require for manipulating a given resource?</p>  <p>Also, notice I did not mention much about data formats, Content Type, Mime, etc.&#160; Those details can cloud your design if you try to start with them. If you can’t wait for my post about how REST handles html, json, xml from the same URI, then start googling Content Negotiation, Accept header, and Content-Type header.</p>]]></content:encoded>
			<wfw:commentRss>http://elegantcode.com/2010/03/15/rest-resources-uris-and-representations/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Introducing oEmbed</title>
		<link>http://elegantcode.com/2010/03/05/introducing-oembed/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=introducing-oembed</link>
		<comments>http://elegantcode.com/2010/03/05/introducing-oembed/#comments</comments>
		<pubDate>Fri, 05 Mar 2010 06:12:08 +0000</pubDate>
		<dc:creator>cory.isakson</dc:creator>
				<category><![CDATA[html]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[WebServices]]></category>
		<category><![CDATA[oembed]]></category>

		<guid isPermaLink="false">http://elegantcode.com/?p=3325</guid>
		<description><![CDATA[Gadgets, widgets, flash, ActiveX, Silverlight, json, xml With all of the competing technologies for content embedding and resource sharing on the web it can be difficult to determine which options to use.  Have you ever wished that you could embed YouTube videos and Flickr photos into your site just by knowing the consumer friendly URLi’s [...]]]></description>
			<content:encoded><![CDATA[Gadgets, widgets, flash, ActiveX, Silverlight, json, xml

With all of the competing technologies for content embedding and resource sharing on the web it can be difficult to determine which options to use.  Have you ever wished that you could embed YouTube videos and Flickr photos into your site just by knowing the consumer friendly URLi’s to them?  That is exactly what <a href="http://oembed.com">oEmbed</a> provides.  I would like to introduce you to the basics of the specification.  I hope the simplicity encourages you to support it as a provider and as a consumer when embedding resources from other providers.  Many popular sites already support it!
<blockquote>oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.</blockquote>
Lets take a look at each side of a provider and consumer scenario to illustrate how oEmbed provides and elegant solution for each.
<blockquote>Providers must specify one or more URL scheme and API endpoint pairs. The URL scheme describes which URLs provided by the service may have an embedded representation.</blockquote>
The publisher must determine what scheme(s) they support in very basic format.  Typically the scheme matches URLs that consumers would browse resources at normally.  The YouTube API, for example, supports URLs matching the scheme <a href="http://*.youtube.com/watch">http://*.youtube.com/watch</a>*

The API endpoint is simply an http URL at which consumers request oEmbed representations of the resources you provide.  Most of the current providers offer API endpoints with obvious URL’s like <a title="http://www.youtube.com/oembed" href="http://www.youtube.com/oembed">http://www.youtube.com/oembed</a> and <a title="http://www.flickr.com/services/oembed/" href="http://www.flickr.com/services/oembed/">http://www.flickr.com/services/oembed/</a>.

Once you have the endpoint you just need to host a service there that accepts 4 specific query parameters:

url : The urlencoded url that matches a supported provider defined scheme.
maxwidth : (optional) The maximum width you want for embedding the resource.
maxheight : (optional) The maximum height you want for embedding the resource.
format: (optional) xml or json are the possible values that determine the consumers desired response Content-Type.
<blockquote>Requests sent to the API endpoint must be HTTP GET requests, with all arguments sent as query parameters. All arguments must be urlencoded (as per RFC 1738).</blockquote>
oEmbed consumers make requests for the oEmbed representation of a resource by sending a basic GET request to an API endpoint with url query parameters and any optional parameters they choose.

A request to <a title="http://www.youtube.com/oembed?url=http%3A//www.youtube.com/watch?v%3D6lbDyXu7gUQ" href="http://www.youtube.com/oembed?url=http%3A//www.youtube.com/watch?v%3D6lbDyXu7gUQ">http://www.youtube.com/oembed?url=http%3A//www.youtube.com/watch?v%3D6lbDyXu7gUQ</a> results in a json response:
<pre>{
"provider_url": "http://www.youtube.com/",
"title": "Insert a YouTube Video With oEmbed Wordpress 2.9",
"html": "&lt;object width=\"480\" height=\"295\"&gt;
    &lt;param name=\"movie\" value=\"http://www.youtube.com/v/6lbDyXu7gUQ&amp;fs=1\"&gt;&lt;/param&gt;
    &lt;param name=\"allowFullScreen\" value=\"true\"&gt;&lt;/param&gt;
    &lt;param name=\"allowscriptaccess\" value=\"always\"&gt;&lt;/param&gt;
    &lt;embed src=\"http://www.youtube.com/v/6lbDyXu7gUQ&amp;fs=1\" type=\"application/x-shockwave-flash\"
        width=\"480\" height=\"295\" allowscriptaccess=\"always\" allowfullscreen=\"true\"&gt;&lt;/embed&gt;&lt;/object&gt;",
"author_name": "adriarichards", "height": 295, "width": 480, "version": "1.0",
"author_url": "http://www.youtube.com/user/adriarichards",
"provider_name": "YouTube",
"type": "video"
}</pre>
Note the html property.  It contains everything you need to embed the video.  If this installation of WordPress was running version 2.9 I could paste a YouTube URL here and it would automatically get embeded as described in the video <a href="http://www.youtube.com/watch?v=6lbDyXu7gUQ">Insert a YouTube Video With oEmbed Wordpress 2.9</a>

oEmbed supports 4 result types including video, photo, link and rich.  The rich type allows for just about any html to be returned and thus embedded.
<blockquote>Consumers may wish to load the HTML in an off-domain iframe to avoid XSS vulnerabilities.</blockquote>
To learn more and see a list of some current providers check it out at:

<a title="http://oembed.com/" href="http://oembed.com/">http://oembed.com/</a>

And for a few more implementations check out <a title="http://oohembed.com/" href="http://oohembed.com/">http://oohembed.com/</a>

I look forward to hearing how you end up using oEmbed!]]></content:encoded>
			<wfw:commentRss>http://elegantcode.com/2010/03/05/introducing-oembed/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>JQuery Ajax with Class Arrays</title>
		<link>http://elegantcode.com/2009/05/04/jquery-ajax-with-class-arrays/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=jquery-ajax-with-class-arrays</link>
		<comments>http://elegantcode.com/2009/05/04/jquery-ajax-with-class-arrays/#comments</comments>
		<pubDate>Tue, 05 May 2009 04:52:51 +0000</pubDate>
		<dc:creator>Chris Brandsma</dc:creator>
				<category><![CDATA[.Net 3.5]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[JQuery]]></category>
		<category><![CDATA[WebServices]]></category>

		<guid isPermaLink="false">http://elegantcode.com/2009/05/04/jquery-ajax-with-class-arrays/</guid>
		<description><![CDATA[OK, I took some flack from a buddy of mine who is starting JQuery about my AJAX samples.&#160; AJAX with JQuery is all fun and games until you start passing complex data (apparently).&#160; So here is a quick demo of how to call a web method that returns a list of custom objects via JQuery.Ajax [...]]]></description>
			<content:encoded><![CDATA[<p>OK, I took some flack from a buddy of mine who is starting JQuery about my AJAX samples.&#160; AJAX with JQuery is all fun and games until you start passing complex data (apparently).&#160; So here is a quick demo of how to call a web method that returns a list of custom objects via JQuery.Ajax ($.ajax).</p>  <p>Starting off with the class we are going to return:</p>  <div style="border-bottom: gray 1px solid; border-left: gray 1px solid; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin: 20px 0px 10px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; max-height: 200px; font-size: 8pt; overflow: auto; border-top: gray 1px solid; cursor: text; border-right: gray 1px solid; padding-top: 4px">   <div style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">     <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   1:</span> <span style="color: #0000ff">public</span> <span style="color: #0000ff">class</span> Customer</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   2:</span> {</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   3:</span>     <span style="color: #0000ff">public</span> <span style="color: #0000ff">int</span> ID { get; set; }</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   4:</span>     <span style="color: #0000ff">public</span> <span style="color: #0000ff">string</span> Name { get; set; }</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   5:</span>     <span style="color: #0000ff">public</span> <span style="color: #0000ff">string</span> Company { get; set; }</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   6:</span>     <span style="color: #0000ff">public</span> <span style="color: #0000ff">string</span> StartDate { get; set; }</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   7:</span> }</pre>
  </div>
</div>

<p></p>

<p>Now the web method that returns the data:</p>

<div style="border-bottom: gray 1px solid; border-left: gray 1px solid; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin: 20px 0px 10px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; max-height: 200px; font-size: 8pt; overflow: auto; border-top: gray 1px solid; cursor: text; border-right: gray 1px solid; padding-top: 4px">
  <div style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">
    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   1:</span> [System.Web.Script.Services.ScriptService]</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   2:</span> <span style="color: #0000ff">public</span> <span style="color: #0000ff">class</span> CustomerService : System.Web.Services.WebService</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   3:</span> {</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   4:</span>     [WebMethod]</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   5:</span>     <span style="color: #0000ff">public</span> List&lt;Customer&gt; GetCustomers()</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   6:</span>     {</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   7:</span>         var list = <span style="color: #0000ff">new</span> List&lt;Customer&gt;</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   8:</span>                        {</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   9:</span>                            <span style="color: #0000ff">new</span> Customer { ID =1, Name = &quot;Chris Brandsma&quot;, Company=&quot;Company 1&quot;, StartDate = <span style="color: #0000ff">new</span> DateTime(2004, 3, 14).ToShortDateString()},</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  10:</span>                            <span style="color: #0000ff">new</span> Customer { ID =2, Name = &quot;Jason Grundy&quot;, Company=&quot;Company 2&quot;, StartDate = <span style="color: #0000ff">new</span> DateTime(2005, 1, 1).ToShortDateString()},</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  11:</span>                            <span style="color: #0000ff">new</span> Customer { ID =3, Name = &quot;Scott Nickols&quot;, Company=&quot;Company 3&quot;, StartDate = <span style="color: #0000ff">new</span> DateTime(2007, 7, 1).ToShortDateString()},</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  12:</span>                            <span style="color: #0000ff">new</span> Customer { ID =4, Name = &quot;Tony Rasa&quot;, Company=&quot;Company 4&quot;, StartDate = <span style="color: #0000ff">new</span> DateTime(2009, 6, 14).ToShortDateString()},</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  13:</span>                        };</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  14:</span>         <span style="color: #0000ff">return</span> list;</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  15:</span>     }</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  16:</span> }</pre>
  </div>
</div>

<p>So far nothing really special here.&#160; Standard web method.&#160; I uncommented the ScriptService attribute on the class to allow for JSON style results, just like I always do.&#160; And I’m returning data.</p>

<p>Ok, on think you might have noticed: StartDate is a string – not a DateTime.&#160; This is because DateTime gets converted to “DATE(1231231231231)” when passed to the browser.&#160; Now I could parse that out using JavaScript and regular expressions, but I find it is much easier to just convert the date to a string that I want to look at in the first place.&#160; If you think I am wacked, read <a href="http://encosia.com/2009/04/27/how-i-handle-json-dates-returned-by-aspnet-ajax/">Dave Ward</a>.</p>

<p>Next I am going to load the data into a table in the most raw way I know how.&#160; First the table:</p>

<div style="border-bottom: gray 1px solid; border-left: gray 1px solid; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin: 20px 0px 10px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; max-height: 200px; font-size: 8pt; overflow: auto; border-top: gray 1px solid; cursor: text; border-right: gray 1px solid; padding-top: 4px">
  <div style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">
    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   1:</span> <span style="color: #0000ff">&lt;</span><span style="color: #800000">table</span> <span style="color: #ff0000">id</span><span style="color: #0000ff">=&quot;CustomerTable&quot;</span><span style="color: #0000ff">&gt;</span></pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   2:</span>     <span style="color: #0000ff">&lt;</span><span style="color: #800000">thead</span><span style="color: #0000ff">&gt;&lt;</span><span style="color: #800000">tr</span><span style="color: #0000ff">&gt;</span></pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   3:</span>         <span style="color: #0000ff">&lt;</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;</span>ID<span style="color: #0000ff">&lt;/</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;</span></pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   4:</span>         <span style="color: #0000ff">&lt;</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;</span>Name<span style="color: #0000ff">&lt;/</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;</span></pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   5:</span>         <span style="color: #0000ff">&lt;</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;</span>Company<span style="color: #0000ff">&lt;/</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;</span></pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   6:</span>         <span style="color: #0000ff">&lt;</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;</span>Start Date<span style="color: #0000ff">&lt;/</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;</span></pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   7:</span>         <span style="color: #0000ff">&lt;/</span><span style="color: #800000">tr</span><span style="color: #0000ff">&gt;</span></pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   8:</span>      <span style="color: #0000ff">&lt;/</span><span style="color: #800000">thead</span><span style="color: #0000ff">&gt;</span></pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   9:</span>     <span style="color: #0000ff">&lt;</span><span style="color: #800000">tbody</span><span style="color: #0000ff">&gt;</span></pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  10:</span>     <span style="color: #0000ff">&lt;/</span><span style="color: #800000">tbody</span><span style="color: #0000ff">&gt;</span></pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  11:</span> <span style="color: #0000ff">&lt;/</span><span style="color: #800000">table</span><span style="color: #0000ff">&gt;</span></pre>
  </div>
</div>

<p></p>

<p>That table just defines the bare structure of the table for us to load into.&#160;&#160; Now to call the web method and then&#160; load it into the table:</p>

<div style="border-bottom: gray 1px solid; border-left: gray 1px solid; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin: 20px 0px 10px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; max-height: 200px; font-size: 8pt; overflow: auto; border-top: gray 1px solid; cursor: text; border-right: gray 1px solid; padding-top: 4px">
  <div style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">
    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   1:</span> <span style="color: #0000ff">function</span> GetCustomerList() {</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   2:</span>     $.ajax({</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   3:</span>         type: <span style="color: #006080">&quot;POST&quot;</span>,</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   4:</span>         url: <span style="color: #006080">&quot;CustomerService.asmx/GetCustomers&quot;</span>,</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   5:</span>         data: <span style="color: #006080">&quot;{}&quot;</span>,</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   6:</span>         contentType: <span style="color: #006080">&quot;application/json; charset=utf-8&quot;</span>,</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   7:</span>         dataType: <span style="color: #006080">&quot;json&quot;</span>,</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   8:</span>         success: <span style="color: #0000ff">function</span>(data) { LoadCustomers(data.d); },</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   9:</span>         failure: <span style="color: #0000ff">function</span>() { alert(<span style="color: #006080">&quot;Sorry, we were unable to find the customers.&quot;</span>); }</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  10:</span>     });</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  11:</span> }</pre>
  </div>
</div>

<p>The url is the relative url.&#160; So in this case my page is in the same directory as my web service (CustomerService.asmx).&#160; Then, in success, I take the data (data.d because Microsoft AJAX calls wrap everything in d for security purposes) and send the to LoadCustomers:</p>

<div style="border-bottom: gray 1px solid; border-left: gray 1px solid; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin: 20px 0px 10px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; max-height: 200px; font-size: 8pt; overflow: auto; border-top: gray 1px solid; cursor: text; border-right: gray 1px solid; padding-top: 4px">
  <div style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">
    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   1:</span> <span style="color: #0000ff">function</span> LoadCustomers(data) {</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   2:</span>     <span style="color: #0000ff">var</span> tbody = $(<span style="color: #006080">&quot;#CustomerTable &gt; tbody&quot;</span>).html(<span style="color: #006080">&quot;&quot;</span>);</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   3:</span>     </pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   4:</span>     <span style="color: #0000ff">for</span> (<span style="color: #0000ff">var</span> i <span style="color: #0000ff">in</span> data) {</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   5:</span>         <span style="color: #0000ff">var</span> customer = data[i];</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   6:</span>&#160; </pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   7:</span>         <span style="color: #0000ff">var</span> rowText = <span style="color: #006080">&quot;&lt;tr&gt;&lt;td&gt;&quot;</span> + customer.ID + <span style="color: #006080">&quot;&lt;/td&gt;&lt;td&gt;&quot;</span> + customer.Name + <span style="color: #006080">&quot;&lt;/td&gt;&lt;td&gt;&quot;</span> + customer.Company + <span style="color: #006080">&quot;&lt;/td&gt;&lt;td&gt;&quot;</span> + customer.StartDate + <span style="color: #006080">&quot;&lt;/td&gt;&lt;/tr&gt;&quot;</span>;</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   8:</span>         $(rowText).appendTo(tbody);</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   9:</span>     }</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  10:</span> }    </pre>
  </div>
</div>

<p>When I was talking about raw JQuery, I was really talking about the LoadCustomers method.&#160; Here I am creating a table row as a string by hand, handing that to JQuery to load, the appending it to the table’s tbody.</p>

<p>Finally we call the method when the page loads:</p>

<div style="border-bottom: gray 1px solid; border-left: gray 1px solid; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin: 20px 0px 10px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; max-height: 200px; font-size: 8pt; overflow: auto; border-top: gray 1px solid; cursor: text; border-right: gray 1px solid; padding-top: 4px">
  <div style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">
    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   1:</span> $(document).ready(<span style="color: #0000ff">function</span>() {</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   2:</span>     GetCustomerList();</pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   3:</span> });</pre>
  </div>
</div>

<p></p>

<p></p>

<p></p>

<p>Now complete, my table (as defined above) ends up looking like this:</p>

<div style="border-bottom: gray 1px solid; border-left: gray 1px solid; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin: 20px 0px 10px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; max-height: 200px; font-size: 8pt; overflow: auto; border-top: gray 1px solid; cursor: text; border-right: gray 1px solid; padding-top: 4px">
  <div style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">
    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   1:</span> <span style="color: #0000ff">&lt;</span><span style="color: #800000">table</span> <span style="color: #ff0000">id</span><span style="color: #0000ff">=&quot;CustomerTable&quot;</span><span style="color: #0000ff">&gt;</span></pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   2:</span>    <span style="color: #0000ff">&lt;</span><span style="color: #800000">thead</span><span style="color: #0000ff">&gt;&lt;</span><span style="color: #800000">tr</span><span style="color: #0000ff">&gt;</span></pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   3:</span>             <span style="color: #0000ff">&lt;</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;</span>ID<span style="color: #0000ff">&lt;/</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;</span></pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   4:</span>             <span style="color: #0000ff">&lt;</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;</span>Name<span style="color: #0000ff">&lt;/</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;</span></pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   5:</span>             <span style="color: #0000ff">&lt;</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;</span>Company<span style="color: #0000ff">&lt;/</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;</span></pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   6:</span>             <span style="color: #0000ff">&lt;</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;</span>Start Date<span style="color: #0000ff">&lt;/</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;</span></pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   7:</span>             <span style="color: #0000ff">&lt;/</span><span style="color: #800000">tr</span><span style="color: #0000ff">&gt;</span></pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   8:</span>    <span style="color: #0000ff">&lt;/</span><span style="color: #800000">thead</span><span style="color: #0000ff">&gt;</span></pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">   9:</span>    <span style="color: #0000ff">&lt;</span><span style="color: #800000">tbody</span><span style="color: #0000ff">&gt;</span></pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  10:</span>      <span style="color: #0000ff">&lt;</span><span style="color: #800000">tr</span><span style="color: #0000ff">&gt;&lt;</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;</span>1<span style="color: #0000ff">&lt;/</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;&lt;</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;</span>Chris Brandsma<span style="color: #0000ff">&lt;/</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;&lt;</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;</span>Company 1<span style="color: #0000ff">&lt;/</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;&lt;</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;</span>3/14/2004<span style="color: #0000ff">&lt;/</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;&lt;/</span><span style="color: #800000">tr</span><span style="color: #0000ff">&gt;</span></pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  11:</span>      <span style="color: #0000ff">&lt;</span><span style="color: #800000">tr</span><span style="color: #0000ff">&gt;&lt;</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;</span>2<span style="color: #0000ff">&lt;/</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;&lt;</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;</span>Jason Grundy<span style="color: #0000ff">&lt;/</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;&lt;</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;</span>Company 2<span style="color: #0000ff">&lt;/</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;&lt;</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;</span>1/1/2005<span style="color: #0000ff">&lt;/</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;&lt;/</span><span style="color: #800000">tr</span><span style="color: #0000ff">&gt;</span></pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  12:</span>      <span style="color: #0000ff">&lt;</span><span style="color: #800000">tr</span><span style="color: #0000ff">&gt;&lt;</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;</span>3<span style="color: #0000ff">&lt;/</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;&lt;</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;</span>Scott Nickols<span style="color: #0000ff">&lt;/</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;&lt;</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;</span>Company 3<span style="color: #0000ff">&lt;/</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;&lt;</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;</span>7/1/2007<span style="color: #0000ff">&lt;/</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;&lt;/</span><span style="color: #800000">tr</span><span style="color: #0000ff">&gt;</span></pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  13:</span>      <span style="color: #0000ff">&lt;</span><span style="color: #800000">tr</span><span style="color: #0000ff">&gt;&lt;</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;</span>4<span style="color: #0000ff">&lt;/</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;&lt;</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;</span>Tony Rasa<span style="color: #0000ff">&lt;/</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;&lt;</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;</span>Company 4<span style="color: #0000ff">&lt;/</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;&lt;</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;</span>6/14/2009<span style="color: #0000ff">&lt;/</span><span style="color: #800000">td</span><span style="color: #0000ff">&gt;&lt;/</span><span style="color: #800000">tr</span><span style="color: #0000ff">&gt;</span></pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  14:</span>    <span style="color: #0000ff">&lt;/</span><span style="color: #800000">tbody</span><span style="color: #0000ff">&gt;</span></pre>

    <pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060">  15:</span>  <span style="color: #0000ff">&lt;/</span><span style="color: #800000">table</span><span style="color: #0000ff">&gt;</span></pre>
  </div>
</div>

<p></p>
Note: I reformatted the html to look nice.&#160; Otherwise, everything between the tbody tags would have been in one long string.]]></content:encoded>
			<wfw:commentRss>http://elegantcode.com/2009/05/04/jquery-ajax-with-class-arrays/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
	</channel>
</rss>

