XML Auction Demo

January 13, 1998

This demo presents an Web-based auction where you can make a bid on items being auctioned and see live bids that are being made by other people. The purpose of this demo is to show how XML can be used to create interesting Web-based applications (weblications) that have a lot of client-side functionality without needing round trips to the server or complicated server session state.

Installation Instructions
What You See
How It Works

Installation Instructions

System Requirements:

Internet Explorer 4.0 -- The demo requires Internet Explorer 4.0, which you can download from http://www.microsoft.com/ie/ie40/download/ .
Web Server -- You must have Active Server Pages (ASP) running on your server to run the Auction demo. You can use Internet Information Server 3.0 or later, or Personal Web Server .
Database -- The demo will work with either a Microsoft Access or a SQL Server database. No special setup is required to use the Microsoft Access version (although you must have Microsoft Access 97 installed on your system). (Note that Microsoft Access is not required if you download the latest version of Personal Web Server , which includes the Jet database engine that reads from MDB files.)
Parser -- Before you can run this demo, you must install the XML Parser in Java package on your machine.

Downloading the demo:

Download the Auction demo (934K). After downloading, please run the .exe and follow the installation instructions.

Important notes:

For Personal Web Server, you must enable "Execute" permissions in the directory containing the demo. Do this by checking the "Execute" check box in the properties pane under PWS Administration, as explained below.
It is important that you access the demo from the server (using an http:// URL) as opposed to directly viewing the page from the file location (using a local file:// URL). The ASP pages used by components in the demo will not run successfully if referenced from a file URL.

What You See

Once you have the demo up and running, the items that are being auctioned show up in the list on the left-hand side. You can select any item in the list to get more information about it and see the most recent bids as well as the opening price for that item. You can place a bid by typing in your name and the bid amount, and pressing the Bid Now button. Your bid will then show up in the list of recent bids, and your bids will be highlighted in yellow. Other people's bids will automatically show up on your page.

The network activity display at the bottom left shows that we are pinging the server for updates periodically. When you make a bid, you should see an animation showing data going to the server and an update coming back from the server.

How It Works

The Auction demo was built using Dynamic HTML, JavaScript, data binding, and ASP scripts that talk to SQL Server. The demo is made up of HTML pages containing JavaScript, and XML data is downloaded separately using the XML DSO Java applet. XML is the Extensible Markup Language which we are working with the world wide web consortium to standardize.

If you already have the demo running, click the page icon next to CURRENT ITEMS to see what this XML looks like. As you can see, we have defined our own set of XML tags just for this demo. These tags contain information about the items; for example, TITLE and ARTIST. Within each item you see the list of bids and the opening price. You will also notice some timestamps in this data; these are used to get minimal updates from the server.

All of the XML is parsed and the resulting objects are stored in memory. When you select an item, the XML element representing that item is handed over to the other frame.

Click the page icon under the Title of the item in the right frame to see what the XML for the single item looks like. Notice that it is exactly one item from the XML that you saw in the main list.

To place a bid, type in your name in the edit field under the Bidder column and the amount you would like to bid (greater than the current bid) under the Price column.

Then click the BID NOW button. In the animated network activity frame, you will see the bid going to the server and an update coming back from the server.

You will now see that your bid shows up in the list. The main list is color-coded to show that you own the most recent bid for this item.

Place another bid and notice how smooth the user interface updating is. This is because the minimal user interface refresh is achieved when we merge in the update that is received from the server.

Let's go back to the timestamps. The server stores timestamps in the database, allowing us to request minimal updates to the XML data. This is what we did after making the bid.

Click the page icon next to the NETWORK ACTIVITY title to see what the last update looks like. The UPDATE-ACTION attribute tells us to insert a new bid into the matching item and also to replace the timestamp for that item. The timestamp is then used in the next update request.

Notice that we are pinging the server every few seconds to get updates. If no update is available, we get an empty response. If multiple people use the demo, we would see lots of updates (in fact, there is another little weblication that simulates this).

Click the RANDOM BIDDER button to start the random bidder. The random bidder will place bids under four random names, and you will see that the main window updates automatically each time the random bidder pings the server. Again, the updates we are getting are exactly in the same format as the ones you got when you were making bids. If the main window falls behind, the server will simply send multiple updates in the one response.