Polling the server with Ajax

If you’ve been reading the series of articles about the Ajax approach to building Web applications, here’s another! In this article, I’m going to show you how to poll the Web server at regular intervals with the XMLHttpRequest object. In other words, we’ll use an Ajax approach to request information from the server and load it into a Web interface. Then we’ll refresh the data regularly, so you can see updates.

If you haven’t been following the articles, Ajax is a Web 2.0 approach to building Web applications. It allows you to load data from the server asynchronously by using JavaScript and the XMLHttpRequest object. Asynchronous means that the loading takes place in the background so that the user can carry on working with the Web application.

In this tutorial, we’ll load a simple RSS 2.0 feed containing useful links into a Web page. We’ll update the list regularly using the setInterval command in JavaScript. We’ll also address the topic of multi-dimensional arrays in JavaScript. If you want to find out more about the RSS 2.0 specification and the XML tags that are used, check out http://www.rssboard.org/rss-specification.

In a real world application, we’d probably load data from an RSS feed locatedatan external Web site. However, for simplicity we’ll load it from a local XML file. Because of the Ajax security sandbox, you’d need to use a proxy file written in a server-side language to create a local copy of any externally located feeds. That’s a little beyond the scope of today’s article but you can find lots of articles on the Web about this topic.

If we wanted to create a Web 1.0 version of this application, we’d have to rely on a Meta refresh directive to reload the page at regular intervals. If the feed was included in a page along with other information, the user would have to wait until the entire page reloaded to see the other content. For example, if they were filling in a form, they could easily lose their place and have to start again. The Web 2.0 approach allows the user to reload only the area containing the links, without refreshing the remaining page content.

As with all Ajax examples, you’ll need to run the code contained in this article through a Web server. I’ll be using IIS (Internet Information Systems) on a PC but you could use other Web servers. In IIS, all Web sites exist as a folder in C:\Inetpub\wwwroot and I’ll be using the folder DMXZone. When I want to view a page in a Web browser, I have to use http://localhost/DMXZone. I can’t just double click it to make it work correctly.

I tested this example in IE 6, Opera 9 and Firefox 1.5 so my screen shots will show different browsers. You can download the files for the article from the blue Properties box that contains the article PDF. There's a heading titled Code Download and you can click the Details link next to it to get the zip file.

Note: If you have difficulties downloading the source files or PDF, you might have a problem with your cookies. Delete the cookies from your machine and try again. In Internet Explorer, you can do this by choosing Tools > Internet Options… and clicking the Delete Cookies… button on the General tab.

Linked drop down boxes with Ajax

If you haven’t heard about Ajax, you probably come from another planet! Ajax is a Web 2.0 approach to building Web applications that allows you to load data from an external source asynchronously using JavaScript. Asynchronous loading means that the user can carry on interacting with the Web application whilst data loads in the background. For this reason, it’s often said that Ajax makes applications more responsive, like desktop applications.

This tutorial is all about drop down boxes in a form that are populated using an Ajax approach. Ajax most often works with XML documents although it can also deal with text files. We’ll work through an example here where we load a drop down box and, depending on the value we select, we’ll populate a second drop down box with related entries. The example we’ll use is a list of countries. When we select a country, a second drop down box will show the states or provinces in the selected country.

In a Web 1.0 version of this application, we’d probably have to reload the page each time the user selected a country from the first drop down box. They’d have to wait to see the second drop down populated with the list of states. In our Web 2.0 approach, the second drop down will appear to populate almost instantly.

As with all Ajax examples, you’ll need to run the code contained in this article through a Web server. I’ll be using IIS (Internet Information Systems) on a PC but you could use other Web servers. In IIS, all Web sites exist as a folder in C:\Inetpub\wwwroot and I’ll be using the folder DMXZone. When I want to view a page in a Web browser, I have to use http://localhost/DMXZone. I can’t just double click it and make it work correctly.

So you know, this code represents one way to achieve our aim of having linked drop down boxes. I’m sure there are other ways you could have achieved the same thing. I tested the example here in IE 6 and Firefox 1.5 so my screen shots will show both browsers.

You can download the files for the article from the blue Properties box that contains the article PDF. There's a heading titled Code Download and you can click the Details link next to it to get the zip file.

A Semi-Dynamic Sitemap with XML, JavaScript and CSS Part Two

Welcome to part two of the sitemap tutorial.  In part one, we created the XML data store that holds information about all of the pages in the site, and we built the main body of JavaScripts that acts as the mechanics behind the page to dynamically write the content of the page.  In this article, we will be returning to the JavaScript file in order to improve the HTML output.  We will also create an HTML file and a CSS file to control the presentation of the output.  Let's get started with the HTML page.

The HTML

The HTML page that holds the generated sitemap need not be very complicated; all we need to worry about is ensuring that the document is valid and making the call to the initial function in the JavaScript file.  The following page is all we really need:

The empty <p> element is used to meet validation standards because the <body> tag requires at least one child element, as does the <head> element.  Thisis really all that is needed because the rest of the content is generated by the JavaScript.  Other than this, I don’t think anything else here requires much explanation.  Save the file as sitemap.htm and reopen the JavaScript file to make some additions.

Using Ajax to validate a form

Ajax is one of a number of Web 2.0 approaches: a second wave of Web sites and applications. Using Ajax can allow a Web site to appear more like a desktop application. Because contact with the Web server can be carried out asynchronously, users can carry out activities on the Web site at the same time. This means that a user’s progress through the site is not interrupted by the stop-start nature of the traditional Web.

In this article, I want to show you a simple use for Ajax by validating a form in two different ways. We’ll check that a username is available and that the user has entered the same password twice before allowing them to submit the form. I’ve assumed that you understand the basics of XML as I’m comparing the form entry with an XML document containing the reserved usernames. I’ve also assumed that you understand the basics of the Ajax approach and the XMLHttpRequest object.

In a traditional Web application, the user would enter their details and click the submit button in a Web form. A Web page would then make a request from the Web server and the user would wait for processing to occur. The page would then display the appropriate information or message. The key point is that the user has to stop working to wait for a response from the Web server.

Using Ajax, a Web application can make server requests while the user is filling in the form details. The server request can be initiated by the user tabbing out of a form field. It uses the XMLHttpRequest object and can occur asynchronously, or in the background. The Web page can then display an appropriate message in part of the interface without the need for a full refresh.

Because this article is about Ajax, you’ll need to run the example through a Web server. I have IIS (Internet Information Systems) installed on my PC. I can store my files in a folder within C:\Inetpub\wwwroot. I’ve called my folder DMXZone which means I must view the Web page using the URL http://localhost/DMXZone. You can’t simply double click the page in Windows Explorer.

You can download the files for the article from the blue Properties box that contains the article PDF. There's a heading titled Code Download and you can click the Details link next to it to get the zip file.

A Semi-Dynamic Sitemap with XML, JavaScript & CSS Part One

There are many ways to create a sitemap, beginning with sitting down the good old fashioned way with nothing but notepad and some ideas.  But this method can take time to initially code and can be a real pain to update and maintain.  You could buy a piece of software to do it for you, there are plenty of them out there and some of them can do the job quite competently.  What these applications normally do is locate your websites root directory and then spider all of the pages within them before outputting a pre-configured HTML page. 

XSLT and JavaScript

Web 2.0 describes a new approach to Web applications where the functionality is responsive, similar to desktop applications. Two of the main Web 2.0 approaches to building applications include working with Flash/Flex and Ajax.

The Ajax approach to building Web applications includes many existing technologies:

• XHTML and CSS to describe the interface
• DOM to work with the interface and loaded XML data
• XML and XSLT to store and transform the data
• The XMLHttpRequest object to connect to external data sources, usually XML documents
• JavaScript to bind the technologies together to load data, manipulate the interface and respond to user interactions

In this article, I want to look at using JavaScript to apply an XSLT transformation to an XML document. XSLT (Extensible Stylesheet Language Transformations) allows you to change an XML document into another kind of output. It transforms a source XML tree into a results tree and is often used to generate XHTML from an XML document.

Specifically, in the article I’ll

• provide an overview of XSLT
• show how to apply transformations with JavaScript
• work through a simple example

An XSLT stylesheet is just an XML document so you can use any of the browser scripting techniques that you’ve seen previously. You can load the stylesheet with an XMLHttpRequest object and use DOM scripting techniques to traverse the document. You can also use JavaScript to apply the transformation client-side.

While we could also apply a transformation server-side, applying it on the client-side frees up the server and can make an application seem more responsive. Be careful though - you can’t use client-side transformations on Opera 8 and below, and on Safari.

You can download the reference files for the article from the blue Properties box that contains the article PDF. There's a heading titled Code Download and you can click the Details link next to it to get the zip file.

Let’s start by looking more closely at XSLT.

Using the XMLHttpRequest object

The Ajax approach to building Web 2.0 applications relies heavily on the XMLHttpRequest object. The object is used to load information from an XML document or to query a database via a server-side page. JavaScript creates and manages the object as well as the callbacks that deal with loaded data.

The XMLHttpRequest object was first created by Microsoft in Internet Explorer 5 as an ActiveX object available through the MSXML WML parser. The latest release, IE7, includes it as a native object. Mozilla and Opera both include a native version of this object and Safari introduced the object in version 1.2.

As you’ll see shortly, the implementation is a little different across browsers so you need to be careful when writing code. In case you’re interested, the World Wide Web consortium (W3C) is implementing similar functionality in the Document Object Model (DOM) Level 3 Load and Save specification.

In this article, I’ll show you how to use JavaScript to work with the XMLHttpRequest object. We’ll explore the code that you need for a cross-browser approach and I’ll show you how to hook into the results with JavaScript. After I’ve shown you some of the theory, we’ll work through a simple example.

You can download the reference files for the tutorial from the blue Properties box that contains the article PDF. There's a heading titled Code Download and you can click the Details link next to it to get the zip file. The download includes the examples covered here.

We’ll start by looking at how the create the XMLHttpRequest object.

Neat Form Tricks

Introduction

If you have ever used rich web applications like Microsoft CRM or QuickBase you have probably seen a neat trick or two you would like to be able to use in your own application, but just don’t know how.
Text fields with icons and active links, form fields changing their background color after the value has been changed, length restricted text area boxes – those are things which (if used properly!) will  impress your boss and make you application more slick, robust and user-friendly.
Neat web form tricks - this will be the topic of today’s article.

Ajax DOM Scripting Techniques

Ajax DOM Scripting Techniques

The Ajax approach to developing Web applications relies heavily on JavaScript. JavaScript is used to:

• Make server requests with the XMLHttpRequest object
• Process the server response
• Manipulate and update the interface by scripting the DOM
• Respond to user events in the browser

In this article, I want to look at the third of these areas – DOM scripting. The DOM (Document Object Model) provides a way for Web developers to traverse an XHTML document. The DOM specification was developed by the World Wide Web Consortium (W3C) and it creates a tree-like structure from XML documents.

I’ll cover some of the useful scripting techniques that you’ll need for working with Ajax-style applications including:

• Finding elements by their tag name or id
• Locating specific elements, text and attributes
• Creating content
• Dynamically styling elements

I’ll also show you the DOM Inspector in Firefox.

You can download the source files for the tutorial from the blue Properties box that contains the article PDF. There's a heading titled Code Download and you can click the Details link next to it to get the zip file. The download includes the examples referred to in this article.

Note: If you have difficulties downloading the source files or PDF, you might have a problem with your cookies. Delete the cookies from your machine and try again. In Internet Explorer, you can do this by choosing Tools > Internet Options… and clicking the Delete Cookies… button on the General tab.

Five Star rating system. Part II

Introduction

This is the second, final part of the series on creating Five Star rating system. You will need to complete the first part in order to follow this article.

Deconstructing Ajax!

The Web 2.0 movement is a new approach to building Web applications that are more responsive and user-centric. You can think of it as a second generation or second wave of Web applications. One of the main differences is that users don’t have to click and wait while using a Web application. Instead, updates and changes can happen in the background while the user does something else.

One of the most common approaches to building Web 2.0 applications is something called Ajax. The term Ajax doesn’t describe a technology. Instead, it refers to a collection of existing technologies and the way that they work together to build Web 2.0 applications.

Ajax-style applications use the following technologies:

• XHTML and CSS to describe the interface
• DOM to locate and manipulate different parts of the interface and the data source
• XML and XSLT to describe and transform data for the application
• XMLHttpRequest object to request and load external data
• JavaScript to bind the other technologies together

In this article, I’ll explain a bit more about the role that each technology plays. Let’s start by looking at how the Ajax technologies react together.

Choosing Between Ajax and Flash

Web 2.0 describes a new approach to creating and structuring Web applications. One of the aims is to increase responsiveness so that Web applications operate in a similar manner to their desktop cousins. Two of the approaches to creating Web 2.0 applications include Ajax and Flash/Flex.

In this article, I want to compare and contrast these two approaches. I will discuss the advantages and disadvantages of each approach and show you what to consider when choosing between the two. I’ll finish by introducing a process that might help you to make your decision!

This article isn’t trying to explore which is the BETTER of the two approaches. Both have their merits and uses. Instead, I’m trying to help you decide whether Ajax or Flash/Flex will suit you better, given the circumstances of your Web application.

Don’t forget that an alternative to using either Ajax or Flash/Flex is to stick with a Web 1.0 approach using XHTML and CSS. If you don’t need to create a complex interface, you’re not loading large amounts of external data and you don’t have a requirement to include multimedia, a simple XHTML interface may suffice. Creating a Web 1.0 application that adheres to Web standards can make it easier to distribute the application to a range of browsers and operating systems. It can also improve accessibility for people with disabilities.

I want to start by looking at Ajax and examining its advantages and disadvantages.