One of the beauties of Ajax-enabled web applications is their simplicity. This can also be seen as a downfall: Search engines cannot locate content that is dynamically added to the page because it does not appear in the source code. This should definitely be a concern in certain situations but, when building a web application, you are not always looking for high-ranking search results within the application itself. Rather, you are typically looking at ranking the home page or other such pages that are not on the inside of the application. Most web applications, such as the sample we are building in this book, do not require search engine rankings. Most of the time, these applications contain personal and secure information, and so it naturally becomes easier for us to keep the source code hidden.
If you are used to creating nested table layouts in your HTML, it might be a strange transition when you begin using div tags. Although it might be odd at first, you will find that div tags are extremely easy to use, the browser can render them faster, and they require a lot less source code than unruly nested tables. The best part is that they are much easier to manipulate when using DHTML coupled with Ajax data requests, and your styles and content are much more separated, which makes updates far easier. I look at div tags as containers for storing data. These containers provide ways of referencing them through the id and name attributes so that we can target them to manipulate their contents, their position or, for that matter, any of their associated styles.
We can easily identify what elements we need to create by taking a look at the response we are receiving. As you might remember from Chapter 3, "The Response", the XML and JSON files we created consisted of different items that would appear in an email. In this section, we will be creating HTML elements in which to display the data from these files. The first set of data that these files contained was categories. Each of these categories will ultimately be the section header for the items in the item collections. Therefore, we will need to create a grid-like structure to represent this data and format it into identifiable sections of corresponding data. When we are able to identify the contents of our page and separate it into distinct sections, we will then be able to create HTML elements to contain and structure the data.
In Chapter 3, we created two methods in the ajax.js fileone called onXMLResponse and the other called onJSONResponse. These methods rendered the response by pushing the data to the body div in our index HTML page. In this section, we are going to rewrite these methods to create div elements that will encapsulate this data, and then we will append them to the body div. This will allow us to later associate styles with elements via CSS. First, we will strip all the unnecessary code we added to visually separate the categories and the items because the styles will do this for us in a much more subtle way. For now, we will simply add a placeholder div element for an icon header, plus numerous others div elements in which we will assign an id value of header and populate with the data from each of the categories from both the XML and JSON responses. Later in the book we will learn how to create HTML elements dynamically via the DOM, but for now we will keep it simple and add content to previously created div elements.
As you can see, we are simply encapsulating the icon and category data into these div tags. These div tags will later be stylized with CSS and separated from the item data that we will associate with these categories. In other words, we will basically be creating a grid of corresponding data from the response. Now that we have the header div elements created, we will add div elements to the item data and associate the action and icon for each. Each item div tag will simply get an id value of item. The action will be associated with each of the item div tags by simply adding an onclick event to each and appending the action variable. When adding the icons, we do not want to add them to each div; rather, we only want to add them as the first item in each group of items. The following code represents the addition of the div tags to the item code for both the XML and JSON response.
Now that we have the XHTML writing to the page, it is time to add the styles that will render the final layout. We will do this by associating CSS with the elements.