There are many, many ways to pull in XML data, to be shown on a web page.

In
this lesson, we'll take a look at the client-side solution. One that uses the popular
framework, JQuery. In this example, we're going to incorporate XML data to
show four paintings in an online exhibition. You see the final file here. On the
screen the data will include the file names of the images as well as text content
for the painting slides, artists and costs.
So let's look at the XML file that holds that data. This is the data.xml file from
0303. As you can see the root element is paintings. That starts on line two. And
there are four separate painting nodes. This makes up one painting node, from
line three to line eight. In each of those, is the title of the painting, the artist,
which is the same for all four nodes, the image file name, and the price. You may
notice that the file name doesn't contain any path information.
That's to keep the data flexible. Likewise the price has no dollar sign. Again
flexibility is the key reason. Okay let's go over to our HTML file. Which
is index.htm from the same folder, and start adding in our code. Now before we
dive in to the JavaScript, let me show you the HTML. I'll scroll down to around line
40. Around line 40, I have a div with an id of container.
This div will eventually hold our paintings and accompanying details. Right now,
all that's there is another div with a loading gif image. Once our XML data's fully
loaded, we'll hide it. Now, let's scroll up to the head section. I already have my
call to the latest current version of jquery in place. So, let me build out my script
right below that. I'll begin by adding a script tag. And give it a type of text
JavaScript.
Next, let's add the document ready function so we can ensure that the rest of
the page is fully loaded before we begin processing. So, dollar sign, parenthesis,
document

and

after

the

parenthesis

get

ready. Another

set

of

parentheses, function, followed by its own set of parentheses, and then in

between the two closing parentheses. Put a set of curly braces and open it
up. Now lets go ahead and put our closing semicolon at the end of that function.
The first thing we're going to do is use one of the primary AJAX methods in J
query to asynchronously load our XML file. This method will take a number of
perimeters, so $.ajax ({, and let's enter our first parameter which is type, so
type. And then, in GET and traditionally, we'll keep that as all upper case. This is
a series of parameters, so you need commas after each one.
URL is the next one, and this is the name of our data file, which is called
data.xml. Comma, now the data type, with an upper-case T. Also in quotes,
xml. Last comma and if the file loads successfully, success, we want to call the
XML parser function, which we were just about to write. Let's put a closing
semicolon after that curly brace and parentheses.
And now we're ready to define the XML parser function that we just
referenced. Thus code block will go below the document ready function. We'll just
create a little space there, and let's scroll down the page a tad, alright that should
do it. The function is not terribly long, but it's key that you understand how this
works, so let's enter the code one bit at a time. I'm going to start with the basic
function name, function XML parser and in parenthesis what we're passing to
it, which is XML, and then an open and closing curly brace.
Now in the middle of that we'll start to put our code. Because this function would
only have been called if the XML file was successfully loaded, we can get rid of
our loading gif. So lets just fade that out. So I'll enter dollar sign, parenthesis,
single quotes, and then pound load to target that div, then .fadeOut. A lovely
jQuery function, follow that with parenthesis and a semicolon. Alright, now we
come to the meat of the routine.

We need to loop through the XML data and locate all the painting nodes. So
we'll use a for each loop and the J query find function. What are we looking
in? We're looking in XML. So $(xml) within that. This is the XML that was passed
to our XML parser function.find. What are we looking for, in parenthesis? We are
looking for the node painting, make sure you don't put paintings.
And then after the parenthesis dot each. Parenthesis function, parenthesis, and
then after that set of parenthesis, before the closing, then a curly brace. And give
us a little space, finish it off with a semicolon and that chunks done. So what do
we want to do when we find a painting node? We want to write out the code to
display what we want. This is done by appending a combination of HTML and
JavaScript to the container div, you'll remember the container div, "online 40".
Now because we have to concatenate Jquery code with the HTML it can get
a bit complex.But we'll take it one element at a time. So let's start with
dollar sign parenthesis and the node that we're going to append to which
as I said was pound container. And then after that, append and I'm going to
start this with a pair of single quotes and go within that, so now the first
part is create a div with a class of painting.
Now, you want to make sure that you use double quotes within the single quotes
that we're creating here. All the attributes should have double quotes. Okay,
my div tag is now complete.Within that div, I want first, to put in my image. So
we'll start off an image tag, img. And give it the source attribute equals double
quotes now my code editor when I type in one double quote gives me a pair
because normally that's what you need.
But I want to delete the second one now because I'm going to be closing this off
before we get to the end. Now I want the path to where my images are, which is
in a folder called images, and then a forward slash. Now that's all we need so far
with the HTML. We're going to concatenate a little JavaScript here, so I'll

put in a plus sign, and as we're looping through each of the painting nodes,
we'll use the this construct In parenthesis.
We'll look within that and we'll find the node, image. And then once we find that,
we'll get its text value. So what we're doing, and I'm going to switch back to
data XML for one quick second is we're looking for this image here, and then
we'll get this text value within that. And that's the basis for all the data that we're
going to be inserting. OK, that's all we need from the JavaScript, so let's head
back to our HTML, by concatenating again.
We'll add a plus sign and then we need again, a pair of single quotes and all of
our HTML will go within that. Now you'll recall that when last we left our HTML,
we were in the middle of declaring our source tag. So we had an open double
quotes here. So now I'm going to close that off. Now again Aptana has put in a
pair of quotes and I want to get rid of that it just makesit a little easier for me to
think as I'm writing this because I do have to put in other attribute. In fact we'll put
another one in now.
Add a space after that double quote width equals a 200 value. (INAUDIBLE) And
the next attribute we'll bring in, is the Alt tag. And we'll set that equal to, and here
we'll put in a single ".And again, we're going to stop there, and then bring in my
JavaScript. Here I'll pick up the title and drop that in.
Now, I could type this all out again, but let's just copy all of that code, that is
basically the JavaScript code. We'll paste it in and we'll change image to
title. Now that's all of the image tag, and all I need to do now is to close it off. So
after the plus sign, we'll now concatenate another string, and that's in single
quotes starting with a double quote, and again aptanainsists on putting in that
double quote pair for me, but I only want one.

And then we'll do a forward slash and closing bracket, okay. That actually, from
here, all the way to here, is our simple image tag. Sometimes it's helpful if you put
the code in with dummy values, just as you would normally, and then replace the
data with your JavaScript code. If you find this a little confusing, that might be an
alternative approach for you. Now we are still continuing our string, with a little
bit more HTML code, I'm going to put in a BR tag, for a line break, and then
another div with a class of Title.
And again the attributes are in double quotes close off my div tag and now we're
ready for our JavaScript again. This time we're going to use the exact same one
that we wrote before which is, the one that finds the title information and I'll copy
that and paste that in. We're almost done hang in there. And now we're ready to
put in another small bit of HTML. This is another line break, br tag. This will be
the price but I'm not going to have any words before.I'm just going to have a
dollar sign.
Okay, let's close off that string and we'll bring in our price. Now, again, I'm just
going to copy my JavaScript so I don't have to rewrite all that. I copied the space
there too, that looks pretty good. Now I do want to make sure to change title to
price. And now let's go back and concatenate in our final bit of HTML. And that's
going to be closing off the various div tags here. There are two of them.
And that's all done, and at the end, we'll put a glorious semicolon. Phew! That's a
piece of work isn't it? Alright. The last line of code we need fades into
paintings. Because it's J query, we can do this sort of stuff. So I'll identify the
class of painting, and the J query function fade in. Give it a duration for the fade
in of 1,000 semicolon at the end.
Alright that's a done deal, I'll save the file and lets go take a look in the
browser. Okay, so here is that file prior to refreshing and as you can see I have
my loading gif cranking right away here because I haven't hit refresh to bring in

my XML data. So I'll do that now. Click refresh, and after a very brief pause,
there's our four paintings complete with titles and prices.Sweet! As I mentioned at
the beginning of the lesson, this J query technique is just one of the many ways
you can integrate XML data into your webpages.
There are numerous others for other frameworks, as well as servers side
processing language, like php and .net