HomeASP.NET Using XML Web Services in Traditional ASP
Using XML Web Services in Traditional ASP
There are a lot of services out on the web now (such as Flickr and Digg) that allow developers access to their data over an API and web service. Most of this data is available to everyone as long as they have registered with the service and have a valid API key. This article will explain how to put this data to use in your own applications.
Contributed by Luke Niland Rating: / 7 August 07, 2007
The data that the services offer is normally XML, sent over an HTTP connection. This means that by using your web-based applications, you can leverage the power of these services into your own applications, or create one that does a job the service does not currently offer.
This is very good for both the company providing the service and the end user. The company gets lots of good press for opening up their services and attracts people to use them for different purposes. Users can take an existing, reliable service and mold there own applications around the existing framework.
In the article we are going to access data from Flickr.com, the photo sharing web site. We are going to create a web picture gallery based on data that Flickr.com provides users with. The script is going to be written in traditional ASP, but the main focus of the article will be formatting the data from Flickr using an XSL file.
Getting Started
Before starting, you will first need to have an account on Flickr.com with some pictures in a set. You will also need an API key. To apply for a key, go to http://www.flickr.com/services/api/keys/apply/ and fill in the form; they will then email you details. Once you have your key, we are ready to start.
Once you have your key, you should be able to get Flickr to give you an XML file back of data for which you ask. You can just browse to this data in your web browser and it will display the XML on the page.
In this example I am going to ask for all the photos in one of my sets. The URL you need to connect to is this one:
method = This indicates the data you are after. In our case we want all the photos in a specific set, but there are many methods you can call; they are all well documented with examples and error codes at http://www.flickr.com/services/api/.
api_key = The API key which Flickr provided to you.
photoset_id = The ID number of the photoset you want to work with. To get the ID of the set, edit or organize the set from your Flickr home page, in the URL you should see a long number, this is the set ID.
Open up your browser, put in this URL and you should get something like the results below.
There is not much point in using this information in its raw form on your web page; it means nothing to the average person looking at your website. What we need to do is format it in a presentable way. To do that we need to create an XSL (Extensible Style Language) file.
The XSL file will take the data out of the XML we are given by Flickr and format it in HTML to however we want it to look. It does not matter about new data or different data in the XML we are given, the XSL file will dynamically format whatever data we have.
We will create our XSL file in notepad (or your favorite text editor), so create a new blank document and save it as flickr-sets.xsl. Into it put the following:
The first three lines are just the start of the file, telling anything using it what version of XML/XSL it is. The fourth line tells the calling application what the XSL is going to return, in our case HTML to go back into the browser.
Next we start our template (you can have more than one in your file), and tell it to return to us all results from the XML, by using the match="*" attribute. Next we are going to start looping through our data, using a for-each loop. Using the SELECT attribute, we are navigating to the first photoset/photo node. This is the point we want to start from in the XML file.
In a style sheet, you can put in valid literal HTML tags (if you are outputting HTML). This just outputs straight HTML to the browser and has nothing to do with the data in the XML file. On line eight we are creating a new TD and opening a hyperlink tag into which we will put data from our XML input file.
Now, we want to access something in the XML file, so line 10 starts with a "<xsl:attribute name=href>" tag. The start of this tag is the URL to the root of where your photos are on flickr, in my case it's http://flickr.com/photos/beakersoft/, but yours will be different. After the root URL, we use the <xsl:value-of select="@id" /> section to get the id of the picture.
The important part here is the select="@id" section of the tag. This tells the XSL to get the 'id' tag of the current record from the XML file, and write it out here. This forms the HREF tag of the HTML, so we can now click on a link that will take us to the picture on Flickr.
Next we are going to display the thumbnail picture from Flickr on our page. We start off by writing a normal <img> start tag out. Then we are going to use four fields from the XML file to build the actual source path to the image we are going to display. Start off by opening the scr tag, and hard code in the start of the URL (in this case it's http://farm), then extract the server farm out of the XML file using the <xsl:value-of select="@farm"/> part. As before when we got the id of the photo to build the link, this is getting the farm information off the current record.
We build the rest of the image source in a similar fashion, by getting the server, id and secret information off the field. Around this we hard code in the rest of the source, including _t.jpg that is going to give us the thumbnail version of the picture Flickr is holding. Before closing the image tag, we make the image have no border by setting its border property to 0, and using the title field from the XML, we set the name tag of the picture. The title field contains the name you gave the picture in Flickr.
When creating the image source, we have hard coded in the source to be the thumbnail image by putting in _t.jpg. When you upload to Flickr it resizes your picture to give you lots of different sizes. To use a bigger or smaller picture here change this to _m.jpg for medium size, _s.jpg for small, and so on.
After that we can then close the image tag and the HREF tag. We are now going to put the image's name underneath the picture. So we put in an HTML line break, and using the id and title fields of the current record in our XML file we create a link with the name of our picture. We then close the HREF and the table data tag.
Because we only want a certain number of photos showing per table row, we then have a small chunk of logic in the XSL. This is the line containing the <xsl:if test="position() mod 7 = 0"> line. This is opening up an if block, which checks to see if the current possession in the XML file is divisible by 7. If it is, we close the current table row tag, and open a new one, then write a </xsl:if> tag to close the if statement. This is like the end if in normal programming.
We then close the for/each tag we started at the top of the file (so it will loop to the next record at this point), and then finally close our XSL template tag.
Now we should have all the building blocks we need to actually output the contents of the XML file via the XSL to the browser. We will do this in a very simple traditional ASP function, using the MSXML component library. Make sure the web server you are running the code from has the MSXML component installed.
The Function
This is the actual function you need to put in your ASP page.
<%
Function getFlickrXML(flickrUrl, xslSheet)
dim styleFile
dim source1, style
styleFile = Server.MapPath(xslSheet)
dim xmlhttp
set xmlhttp = Server.CreateObject("Microsoft.XMLHTTP")
xmlhttp.Open "GET", flickrUrl, false
xmlhttp.Send
set source1 = Server.CreateObject("Microsoft.XMLDOM")
source1.async = false
source1.loadxml(xmlhttp.ResponseText)
set style = Server.CreateObject("Microsoft.XMLDOM")
style.async = false
style.load(styleFile)
Response.Write source1.transformNode(style)
set source1 = nothing
set style = nothing
set xmlhttp = nothing
End Function
%>
This function should be very open ended, and work with any service, not just Flickr as we are passing it both the URL from which to get the information, and the style sheet to use.
All it does is create an XMLHTTP object and get the data from the URL you passed into the function. It then loads the XSL style file you send it into a XMLDOM object.
Then, using response.write and the transformNode function, it writes out the content of the XML file in a format based on what's in the XSL file.
To call the function, pass it the URL and the name of the XSL. In our example your actual code would look something like this.
Save your ASP and XSL file onto your web server in the same folder, browse to the ASP file and if all has worked, you should see all the photos from your set, in a table 7 columns across, all with clickable links to the photo's page on Flickr.com
/ 7 
Dynamic Sitemap and Navigation in ASP.Net
