Contents
Overview 1
Preparing XML Data on the Client 2
Posting Data to the Server 11
Lab 7.1: Sending XML Packets to the
Server 16
DOM Manipulation on the Server 24
Receiving the Response on the Client 36
Lab 7.2: Processing XML Packets at the
Server 42
Review 54

Module 7: Posting XML
Data from Client to
Server Information in this document is subject to change without notice. The names of companies,
products, people, characters, and/or data mentioned herein are fictitious and are in no way intended
to represent any real individual, company, product, or event, unless otherwise noted. Complying
with all applicable copyright laws is the responsibility of the user. No part of this document may
be reproduced or transmitted in any form or by any means, electronic or mechanical, for any
purpose, without the express written permission of Microsoft Corporation. If, however, your only
means of access is electronic, permission to print one copy is hereby granted.

Build Manager: Julie Challenger
Build Coordinator: Jenny Boe
Test Lead: Eric Myers
Manufacturing Manager: John Williams
Group Product Manager: Steve Elston Module 7: Posting XML Data from Client to Server iii Instructor Notes
Prior to this module we have shown how to deliver XML content from the Web
server to the browser, and how to manipulate XML data on the browser.
This module shows how to submit XML data in the opposite direction, that is,
from browser to Web server. The module describes the benefits of posting
XML data as opposed to any other format of data, and shows how the
XMLHTTP object can be used to achieve this.
The module also shows how the server receives this data and loads it into a
server-side XMLDOM object. This is the first time students have seen that you
can use DOM on the server — all previous examples of DOM have been client-
side. It’s worthwhile to mention that it is the same object model, so you can do
anything at the server that you can do at the browser.
The module concludes by describing how the Web server can send an HTML or
XML response back to the client, and how the client picks up this response.
After completing this module, students will be able to:
!
Describe the issues involved in creating an XML data packet to send to a
server.
!
Use the XMLHTTP object to send data back to the server.

to include them in the Delivery Guide. Please see Appendix A and the
Student CD for the lab answers.

Presentation:
120 Minutes

Lab 7.1
45 Minutes

Lab 7.2
30 Minutes
iv Module 7: Posting XML Data from Client to Server Demonstrations
This section provides demonstration procedures that will not fit in the margin
notes or are not appropriate for the student notes.
Handling responses on the client
!
Discuss the code in ResponseXML.htm
1. In Notepad, open ResponseXML.htm.
2. Move to the end of ResponseXML.htm and point out the three BUTTON
elements. Each button has a different onclick event procedure.
3. Move to the beginning of ResponseXML.htm and briefly show the three
onclick event procedures. Note that each calls the same procedure,
prepareToPost.
4. Examine the prepareToPost procedure in detail.
It begins with some boilerplate XML, and then adds new XML content for
the customer ID (as entered by the user). The code then clones an existing
XML data island (located near the end of the HTM page) and adds this to

MsgBox poster.responseXML.xml, , "Response from Server" Module 7: Posting XML Data from Client to Server v Module Strategy
Use the following strategies to present this module:
!
Preparing XML Data on the Client
In this section, begin by reviewing how XML data is sent from the Web
server to the client, and discuss the benefits of delivering XML rather than
HTML.
Briefly introduce the XMLHTTP object and discuss how it orchestrates the
transmission of XML data from the client to the server. Then describe how
the server loads the XML data into a server-side XMLDOM object in order
to process that data on the server.
It’s worthwhile to describe how the client builds the XML data packet,
ready to send to the server. In particular, describe how the clone method is
used to clone data from another XML document (or data island) and merge
it with the XML document being sent to the server. If you don’t use the
clone method, the XML data will be removed from the original DOM tree
and added into the new one.
!
Posting Data to the Server
This brief section describes how to use the XMLHTTP object to send XML
data from the client to the server. Point out that the data can be sent
synchronously (the client waits for a response from the server before
continuing processing) or asynchronously (the client continues processing
without waiting for a response).

various tables in the LitWare Books database, and then issues an HTML
response back to the client. (One of the optional exercises returns an XML
response instead.)
Note that all the SQL statements required in this lab have already been
provided in starter files, to save time for the students and to focus on XML
issues rather than SQL.

Module 7: Posting XML Data from Client to Server 1 #
##
#

Overview
!
Preparing XML Data on the Client
!
Posting Data to the Server
!
Lab 7.1: Sending XML Packets to the Server
!
DOM Manipulation on the Server
!
Receiving the Response on the Client
!
Lab 7.2: Processing XML Packets at the Server
!
Review

#
##
#

Preparing XML Data on the Client
!
Client/Server XML Application Architecture
!
Sending XML Data from Client to Server
!
Building an XML Data Packet
!
Populating an XML Data Packet
!
Demonstration: Preparing XML Data on the ClientThis section describes the traditional Get/Post feedback techniques used with
Web servers. It also explains why XML and related technologies are used
instead of the common practice of using ADO on the server, RDS on the client,
and feedback via forms, and so on.
Slide Objective
To provide an overview of
the topics in this section.
Lead-in
Conventional client-to-Web
server data transfer uses
Post/Get HTTP methods.

example, a list of items in a shopping basket. A traditional Web application
might send small updates to the server as each individual item is added to the
shopping basket. This method is rather inefficient in its use of network and
server resources.
It would be far more efficient to cache all the information on the client and then
send it to the server in a single batch. In this way, additions and alterations to
the pending updates would occur only on the client, without involving the
network or server. Using XML data to transfer information enables you to
cache all data on the client and send only the updates to the server.
The preceding illustration shows a typical interaction between a Web server and
a client, using XML data to relay information in both directions:
1. The Web server reads information from a data source, for example, a
catalog of books in a bookstore database.
2. The Web server builds an XML document from this data and sends the
XML to the client.
3. The client builds an XML data packet, for example, a list of books the user
would like to order from the catalog.
4. The client sends the XML data packet to the Web server when required.
5. The Web server receives the XML data packet from the client and processes
the data appropriately. For example, the Web server might update the
OrderItems table in the bookstore database.

Slide Objective
To revisit the architecture of
an XML client/server
application.
Lead-in
In previous modules, we
discussed topics and
concepts that have pieced

updates being sent to the
data source.
4 Module 7: Posting XML Data from Client to Server Sending XML Data from Client to Server
!
Client creates an XML data packet and posts it to
the server
Client Web server
XML
DOM
tree
1
XMLHTTP
object
2
XMLDOM
object
4
XML
DOM
tree
6
3
5The preceding illustration shows the steps involved in building an XML data
packet on the client and then posting it to the Web server. The illustration also

Delivery Tip
The slide is animated so
that it shows only the Client
and Web server boxes
initially. Click the slide to
reveal the following
additional parts of the
illustration:
1. Shows the arrow and
label “1” for creating the
XML data packet.
2. Shows the arrow and
label “2” for creating the
XMLHTTP object.
3. Shows the arrow and
label “3” for posting the XML
data packet to the server.
4. Shows label “4” for
creating the XMLDOM
object on the server.
5. Shows the arrow and
label “5” for loading the XML
data packet into the
XMLDOM object on the
server.
6. Shows the arrow and
label “6” for performing
appropriate server-side
processing based on the
contents of the XML data

packet at the client. The XML data packet can be any XML document, or a part
of a document. For example, the XML data packet could contain data from any
of the following sources:
!
An XML data island at the client
!
A stand-alone XML document
!
A dynamically generated XML document containing a mixture of
boilerplate XML definitions, data from XML data islands, and data created
from user input at the client

Example of building an XML data packet
For example, if you send data about a customer’s order from the client to the
server, you need to wrap the order XML data with the customer’s ID.
The following script creates an XMLDOM object and loads a boilerplate XML
document into it that contains the customer’s ID as entered in a textbox on the
page:
Set docSubmit = CreateObject("Microsoft.XMLDOM")
docSubmit.async = False
docSubmit.loadXML "<?xml version='1.0'?>" & _
"<customerorder>" & _
" <customer>" & txtCustomerID.Value & _
" </customer>" & _
"</customerorder>"

Slide Objective
To introduce the tasks
required to package the
data that is to be sent back

Set docOrder = dsoOrder.XMLDocument
Set nodeOrder = docOrder.documentElement
docSubmit.documentElement.appendChild _
nodeOrder.cloneNode(True)Once you have created a boilerplate XML document, the next step is to
populate the document with the data you wish to send to the Web server.
Typically, the XML data packet includes a mixture of content:
!
XML data created from user input
!
XML data retrieved from XML data islands or XML documents

Creating XML data from user input
Frequently you will have user input that you need to merge into the XML data
before sending the XML to the server. You can do this either by building the
XML from a string with the loadXML method, or by using DOM to locate the
element or attribute and change its value.
For more information on using DOM to change XML data, see Module 6,
“Manipulating XML Data on the Client Using DOM.”
Retrieving data from XML data islands and documents
In addition to creating new content from user input, XML data packets can also
contain a copy of the existing data held in XML data islands and/or XML
documents.
Slide Objective
To populate an XML data
packet with information from
XML data islands and user
input.

The <order> element you just obtained is part of an existing DOM tree (that
is, the dsoOrder XML data island). To add the element to a different DOM
tree (for example, the XML data packet), you must first make a copy of the
<order> element and all its child elements. This is because the method
appendChild will remove the node from the tree it is currently in before
adding it to the new DOM tree.
The cloneNode method achieves this effect. The method takes a single
parameter that indicates whether child elements should be included in the
copy:
Set nodeOrderToSend = nodeOrder.cloneNode(True)

3. Add the copied data to the XML data packet.
The following script adds the copied data to the XML data packet:
docSubmit.documentElement.appendChild nodeOrderToSend

After executing this script, the XML data packet appears as follows:
<?xml version="1.0"?>
<customerorder>
<customer>5</customer>
<order>
<orderitem title="Sushi, Anyone?" isbn="72-80081-025">
<price>14.99</price>
<quantity>2</quantity>
</orderitem>
</order>
</customerorder>

Module 7: Posting XML Data from Client to Server 9
1. In Notepad, open the file
AppendXML.htm from the
folder
\InetPub\WWWRoot\1905\D
emoCode\Mod07.
2. Notice the XML data
island. Also notice the
HTML text field and button.
3. Show the code for the
button’s onclick event
procedure.
4. Launch Internet
Explorer 5, and open
AppendXML.htm. Enter a
number such as “123” in the
text field and click the
button. A message box
displays the XML in the data
packet.
10 Module 7: Posting XML Data from Client to Server The demonstration uses the following code:
Sub cmdSubmit_OnClick()
'Create XMLDOM object and load in customer information
Set docSubmit = CreateObject("Microsoft.XMLDOM")
docSubmit.async = False
docSubmit.loadXML "<?xml version='1.0'?>" & _
"<customerorder>" & _
" <customer>" & txtCustomerID.Value & _

as a request object to transport XML data to the Web server.
Slide Objective
To provide an overview of
the topics in this section.
Lead-in
Now that the required XML
data has been prepared and
packaged on the client, it
must be transported back to
the server.
Delivery Tip
Tell students that Internet
Explorer 5.0 does not
support https.
12 Module 7: Posting XML Data from Client to Server Instantiating the XMLHTTP Object
!
Create a Microsoft.XMLHTTP object
!
Open the request, specifying:
$
Delivery method, url, async flag
$
UserID and password (if necessary)
Set poster = CreateObject("Microsoft.XMLHTTP")
Set poster = CreateObject("Microsoft.XMLHTTP")
poster.open "POST", "CustomerOrder.asp", False
poster.open "POST", "CustomerOrder.asp", False

password The password, if required for authentication at the Web server.

Slide Objective
To create and use an
XMLHTTP object.
Lead-in
To post XML data to the
Web server, you must first
create a COM object named
XMLHTTP that provides
methods and properties for
sending the data.
Syntax
Module 7: Posting XML Data from Client to Server 13 For example, the following code opens the HTTP connection to post data,
asynchronously, to the CustomerOrder.asp page:
poster.open "POST", "CustomerOrder.asp", False

14 Module 7: Posting XML Data from Client to Server Sending Data to the Server
!
Send the XML data
$
An XML string, an XMLDOM object, or a stream
!
The readyState property of the Document indicates

Lead-in
Once the XMLHTTP object
has been created and
opened, the next step is to
send the data to the server
by using this object.
Syntax
Module 7: Posting XML Data from Client to Server 15 The XMLHTTP object has a readyState property that indicates whether
the server has completed building the response object for the client. The
following table list the values for the readyState property.
value Description

0 The Response object has been created, but loading has not yet
commenced.
1 The document is being loaded.
2 The document has been completely loaded, and parsing is underway.
3 Some of the document has been parsed, and the data is partially available
to the client.
4 The document has been completely parsed and is fully available to the
client.

For example, the following script sets up an event handler for the
onreadystatechange event of the XMLDOM object, and uses the readyState
property to determine when the document is completely loaded into memory:
<SCRIPT LANGUAGE=vbscript>
Dim xmldoc
Sub cmdLoad_onclick()

Later in this module you will learn how to retrieve the response from the server
after it has finished processing the data. The XMLHTTP object has various
properties, such as responseText and responseXML, which allow the response
to be handled in different ways at the client.
Delivery Tip
This code is in the file
\InetPub\WWWRoot\1905\D
emoCode\Mod07\readystate
.htm. To demonstrate, enter
the URL of a well-formed
XML document in the URL
text box and click LOAD,
then enter the name of an
invalid XML document and
click LOAD again.
Note: Don’t spend a lot of
time on this code. It is
advanced.
16 Module 7: Posting XML Data from Client to Server Lab 7.1: Sending XML Packets to the Server Objectives
After completing this lab, you will be able to:
!
Create an XML data packet to send to the server.
!
Send the XML data packet to the server.

island to the LitWare Books
Web server.
Explain the lab objectives.
Module 7: Posting XML Data from Client to Server 17 Exercise 1:
Creating the XML Data Packet
In this exercise, you will add Checkout.htm to the LitWare Books Web site and
link it to the LitWare Books navigation bar.
You will then write client-side script in Checkout.htm to create an XML data
packet representing a customer order. Upon completion of this exercise, the
XML data packet will contain only the customer ID as follows:
<?xml version='1.0'?>
<customerorder>
<customer>customer id</customer>
</customerorder>

!
Link Checkout.htm to the LitWare Books Web site
1. Copy the file Checkout.htm from the folder <install
folder>\Labs\Lab07.1\Starter to the folder \InetPub\WWWRoot\LitWare.
2. Edit NavigateSite.htm on the LitWare Web site.
3. Edit the GotoCheckout_OnClick event procedure and replace the “Not
implemented yet” message box with script that populates the main frame
with Checkout.htm. Use the script in Home_OnClick as a guide.
To see an example of what the script should look like, see Appendix A or
the Student CD-ROM.
4. Save your changes to NavigateSite.htm.
5. Test your changes:

4. Save your changes to Checkout.htm.
5. Test your changes:
a. Go to the home page of the LitWare Books Web site and refresh the
view.
b. Click Go to Checkout on the navigation bar.
c. Enter a customer ID. The valid customer IDs in the LitWare Books
database are 1 to 35.
d. Click Submit Order. A message box should be displayed as follows,
showing the XML data packet with the customer ID.
Module 7: Posting XML Data from Client to Server 19 Exercise 2:
Adding the Order Details to the XML Data Packet
In this exercise, you will clone the <order> element in the shopping basket data
island, and add order details to the XML data packet.
Upon completion of this exercise, the XML data packet will contain all the
details necessary to describe the customer order, as shown in the following
example:
<?xml version='1.0'?>
<customerorder>
<customer>customer id</customer>
<order>
<orderitem title="a title" isbn="an isbn">
<price>a price</price>
<quantity>a quantity</quantity>
</orderitem>

5. Test your changes:
a. Go to the home page of the LitWare Books Web site and refresh the
view.