Fetching XML Data from the Server for an AJAX Headlines System - A brief look back at the client-side code
(Page 2 of 4 )
Before I start showing you how to create the proper XML file from which all the headlines will be extracted later on, let me first take a brief look at some of the core modules of the applications that were initially defined in the first part of the series. Doing so, it’ll be much easier to for you to understand how this XML file fits into the overall context of this headlines system.
Given that, here is the complete source code that corresponds to the structural (X)HTML markup and CSS declarations respectively, which in conjunction render the appropriate front end of the application. Please, have a look at the web document below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>AJAX-BASED NEWS SYSTEM</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
background: #fff;
}
p{
text-align: center;
font: bold 24px Arial, Helvetica, sans-serif;
color: #000;
}
p{
font: bold 18px Arial, Helvetica, sans-serif;
color: #009;
text-decoration: none;
}
#headlinescontainer{
text-align: center;
width: 400px;
height: 300px;
margin-left: auto;
margin-right: auto;
background: #eee url(bg1.jpg) top center repeat-x;
border: 1px solid #000;
}
#headlinescontainer img{
border: 1px solid #666;
}
#controlpanel{
text-align: center;
width: 400px;
height: 30px;
padding: 5px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<p>AJAX-BASED NEWS SYSTEM</p>
<div id="headlinescontainer"></div>
<div id="controlpanel">
<img src="backbtn.gif" width="50" height="20" />
<img src="forwardbtn.gif" width="50" height="20" />
</div>
</body>
</html>
As you’ll certainly recall, the source code that corresponds to the above file composes the presentation layer of the application. It obviously displays, on the web document, all the sections required for including the headlines fetched directly from the server, as well as for showing the corresponding navigational buttons.
At this moment, I think that the previous file should be familiar to you, right? Based upon this assumption, let’s go one step further and take a quick look at the full source code of this AJAX-based headlines application, this time including the complete set of JavaScript functions that make up the behavioral layer of the program.
To see how the complete client-side code corresponding to this application looks, I recommend that you click on the link below and keep reading.
Next: Listing the complete client-side code of the application >>
More JavaScript Articles
More By Alejandro Gervasio
