Tài liệu Module 7: Posting XML Data from Client to Server docx

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.

Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual
property rights covering subject matter in this document. Except as expressly provided in any
written license agreement from Microsoft, the furnishing of this document does not give you any
license to these patents, trademarks, copyrights, or other intellectual property.

 2000 Microsoft Corporation. All rights reserved.

Microsoft, PowerPoint, Visual InterDev, and Windows are either registered trademarks or
trademarks of Microsoft Corporation in the U.S.A. and/or other countries.

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.

Other product and company names mentioned herein may be the trademarks of their respective
owners.


Program Manager: Steve Merrill
Instructional Designers: Sangeeta Nair (NIIT), Vijayalakshmi Narayanaswamy (NIIT)
Subject Matter Experts: Andy Olsen (QA Training), Andy Longshaw (Content Masters)
Content Lead: Janet Robinson
Graphic Artist: Scott Serna (Creative Assets)
Media Management: David Mahlmann
Media Production: Dean Connolly (Art Source), Timothy Demmon (:timebomb Media)
Editing Manager: Jennifer Linn
Editor: Dennis Rae (Wasser)
Production Manager: Miracle Davis
Print Coordinator: Marlene Lambert (Online Training Solutions, Inc)

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.

!
Convert XML into a server-side DOM tree.
!
Update the back-end database with data from the client.
!
Issue a response from the server to the client.

Materials and Preparation
This section provides you with the required materials and preparation tasks that
you need to teach this module.
Required Materials
To teach this module, you need the following materials:
!
Microsoft PowerPoint
®
file 1905a_07.ppt
!
Module 7, “Posting XML Data from Client to Server”
!
Lab 7.1, “Sending XML Packets to the Server”
!
Lab 7.2, “Processing XML Packets at the Server”

Preparation Tasks
To prepare for this module, you should:
!
Read all of the materials for this module.
!
Complete the labs.
Due to the length of the answers to the labs for this course, we were unable

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

the XML data packet as well.
5. Reexamine the event procedures responseStr_OnClick,
responseHTML_OnClick, and responseXML_OnClick. Each procedure
submits the XML data packet to a different ASP page.

!
Discuss the code in the ASPs
1. In Notepad, open CustOrderStr.asp. This ASP page returns simple text.
2. In Notepad, open CustOrderHTML.asp. This ASP page returns HTML
content.
3. In Notepad, open CustOrderXML.asp. This ASP page creates an
XMLDOM object, loads the XML sent from the browser, and returns the
same XML back to the browser. Note that the Response.ContentType must
be set to “text/xml” first.

!
Add code to ResponseXML.htm to handle ASP responses
1. In Notepad, open ResponseXML.htm.
2. Add code to the event procedures to show the string/HTML/XML response
from the various ASPs:
a. Add the following script to responseStr_OnClick to display the
response from the server:
MsgBox poster.responseText, , "Response from Server"

b. Add the following script to responseHTML_OnClick to display the
response from the server:
MsgBox poster.responseText, , "Response from Server"

c. Add the following script to responseXML_OnClick to display the
response from the server:

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).

!
Lab 7.1: Sending XML Packets to the Server
In this lab, students complete the Go to Checkout functionality in an
HTML file named Checkout.htm. An XML data packet is assembled from
the orders data island, together with information about the customer. An
XMLHTTP object is then created, and the XML data packet is posted to an
ASP page named CustomerOrder.asp. The ASP page doesn’t do much at the
moment — that’s the subject of Lab 7.2.
!
DOM Manipulation on the Server
There are two main points to emphasize here: First, the ASP page receiving
a request that contains XML data creates an XMLDOM object to hold the
XML data from the client; second, this XMLDOM object has the same
DOM programming interface as on the client. Therefore, the same
capabilities exist for server-side XML data manipulation.
Also observe that the server can issue any type of response back to the
client, such as plain text, an HTML page, or more XML data (either a static
XML document or dynamically-generated XML data).
!
Receiving the Response on the Client
This section describes how the client picks up different types of responses
from the server. The demonstration illustrates how to handle a plain text
response, an HTML response, and an XML response.
vi Module 7: Posting XML Data from Client to Server


!
Lab 7.2: Processing XML Packets at the Server
This lab modifies CustomerOrder.asp to perform intelligent processing
when it receives an XML data packet from the client. The ASP page updates

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

In this module, you will learn how to post XML data from the client to the
server. You will also learn how the server picks up the XML data and sends a
suitable response back to the client.
After completing this module, you 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.
!
Convert XML into a server-side DOM tree.
!
Update the back-end database with data from the client.
!
Issue a response from the server to the client.

Slide Objective
To provide an overview of
the module topics and
objectives.
Lead-in
In this module, you will learn
about the process of
sending updated XML data
back to the server. You will
also learn how the server
responds when receiving
the data.
2 Module 7: Posting XML Data from Client to Server

#
##
#

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 Client


This 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.

This section introduces
techniques specific to
posting XML data from the
client to the server.
Module 7: Posting XML Data from Client to Server 3


Client/Server XML Application Architecture
!
Use XML to communicate between client and server
$
Server sends XML to the client
$
Client sends XML back to the server
Client Data sourceWeb server
Order info XML
Catalog XML Read catalog
Update
database
Build XML
data packet
12
4 5
3


Thus far, all of the data flow we have discussed has been from the Web server
to the client. We have examined how XML data can be used to represent the
information sent from the server to the client.
It is also possible for the client to send XML information back to the server, for

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

together an architecture for
a client/server XML
application. Now we will
discuss how to post XML
data back to the server.
Delivery Tip
The slide is animated so
that it shows only the Client,
Web server, and Data
source boxes initially. Click
the slide to reveal the
following additional parts of
the illustration:
1. Shows the arrow, text,
and label “1” for data being
read from the data source to
the Web server.
2. Shows the arrow, text,
and label “2” for XML data
being sent to the client.
3. Shows the arrow, text,
and label “3” for the XML
data packet being built at
the client.
4. Shows the arrow, text,
and label “4” for the XML
data packet being sent to
the server.
5. Shows the arrow, text,
and label “5” for database

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
5


The 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

shows how to pick up the XML data packet at the Web server and perform
appropriate server-side processing based on the contents of the data.
Let’s consider each of the following steps:
1. The client populates an XMLDOM object with XML data to send to the
Web server.
2. The client creates an XMLHTTP object. This object has various methods
and properties that are used to send the XML data to an application (for
example, an ASP page) at the Web server and receive a response.
3. The client loads the XML data packet into the XMLHTTP object, and then
sends the data to the ASP page at the Web server.
4. The Web server executes the ASP page. The ASP creates a server-side
XMLDOM object that is ready to receive the XML data from the client.
5. The ASP loads the XML data packet into the XMLDOM object at the
server.
6. The ASP processes the XML data appropriately. For example, it stores the
data in the database.

Slide Objective
To illustrate the steps
involved in building an XML
data packet at the client and
posting it to the server.
Lead-in
Let’s consider the steps
involved in building an XML
data packet at the client,
posting it to the server, and
then processing the data
when it is received at the
server.

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.
Module 7: Posting XML Data from Client to Server 5


Building an XML Data Packet
!
Create an XMLDOM object
!
Load the XMLDOM object with XML
docSubmit.async = False
docSubmit.loadXML "<?xml version='1.0'?>" & _
"<customerorder>" & _
" <customer>" & _
txtCustomerID.Value & _
" </customer>" & _
"</customerorder>"
docSubmit.async = False
docSubmit.loadXML "<?xml version='1.0'?>" & _
"<customerorder>" & _
" <customer>" & _
txtCustomerID.Value & _
" </customer>" & _
"</customerorder>"
Set docSubmit = CreateObject("Microsoft.XMLDOM")
Set docSubmit = CreateObject("Microsoft.XMLDOM")


Let’s examine how to build an XML data packet at the client that is ready to be
sent to the Web server.
The first step is to create an XMLDOM object that will hold 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

to the server.
Lead-in
Let’s consider how the client
prepares the XML data to be
sent back to the Web
server.
6 Module 7: Posting XML Data from Client to Server


If the user enters “5” as their customer ID, this script builds the following
boilerplate XML document:
<?xml version='1.0'?>
<customerorder>
<customer>5</customer>
</customerorder>

The root element of the XML document is <customerorder>. You can now add
existing XML data into this DOM tree, after the <customer> element.
Module 7: Posting XML Data from Client to Server 7


Populating an XML Data Packet
!
Retrieving data from XML data islands or documents
$
Use cloneNode method to copy DOM tree
Set docOrder = dsoOrder.XMLDocument
Set nodeOrder = docOrder.documentElement
docSubmit.documentElement.appendChild _
nodeOrder.cloneNode(True)

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.

Lead-in
Now that we have a
boilerplate XML document,
the next step is to populate
it with the data we wish to
send to the Web server.
8 Module 7: Posting XML Data from Client to Server


For example, if you have a data island at the client for keeping a list of all
books ordered by the user, the XML data island might look like the following:
<xml id="dsoOrder">
<?xml version="1.0"?>
<order>
<orderitem title="Sushi, Anyone?" isbn="72-80081-025">
<price>14.99</price>
<quantity>2</quantity>
</orderitem>
</order>
</xml>

!
To add existing XML into the DOM tree
1. Access the XML data island.
The following script provides access to the <order> element in the XML
data island.
Set docOrder = dsoOrder.XMLDocument
Set nodeOrder = docOrder.selectSingleNode("//order")

2. Create a copy of the required XML data.

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

Demonstration: Preparing XML Data on the Client


In this demonstration, you will learn how to prepare an XML data packet at the
client that is ready to be sent to the Web server. The XML data packet will
include XML data from the following three sources:
!
Boilerplate XML elements, which define the overall structure of the XML
document that will be sent to the Web server
!
Additional XML data, which is created from the information entered at the
client by the user
!
XML data that is retrieved from existing data islands on the client

Slide Objective
To demonstrate how to
create an XML data packet
that is ready to be sent to a
Web server.
Lead-in
In this demonstration, you
will learn how to create an
XMLDOM object on the
client and populate it with a
mixture of boilerplate XML
data, XML data from a data
island, and XML data based
on user input.
Delivery Tip

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 & _

" </customer>" & _
"</customerorder>"

'Get the <order> element in the XML data island
Set docOrder = dsoOrder.XMLDocument
Set nodeOrder = docOrder.selectSingleNode("//order")

'Clone <order> element and add to XML data packet
docSubmit.documentElement.appendChild _
nodeOrder.cloneNode(True)

'Display XML data packet in a message box
MsgBox docSubmit.xml
End Sub

Module 7: Posting XML Data from Client to Server 11


#
##
#

Posting Data to the Server
!
Instantiating the XMLHTTP Object
!
Sending Data to the Server


This section introduces the COM object Microsoft.XMLHTTP, which is used

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

Once the XML data packet has been built, it can be sent to the Web server by
using the HTTP Request object.
The XML data packet must be transformed into a string of bytes and placed into
either the header or body of the Request object. Microsoft
®
provides a wrapper
COM object named Microsoft.XMLHTTP for this purpose. The object has
methods and properties for building a Request object from an XML data packet
and sending it to the Web server.
Creating the XMLHTTP object
The following script shows how to create an XMLHTTP object:
Set poster = CreateObject("Microsoft.XMLHTTP")

The XMLHTTP object has an open method that initializes the Request object.
The syntax for the open method is as follows:
poster.open http-method, url, async, userID, password

The open method takes the following five parameters.
Parameter Definition

http-method The HTTP method, for example, GET or POST.
url The URL that will receive the XML data at the Web server.
Typically, this URL specifies an ASP page or a CGI program.
async A Boolean flag that indicates whether the request is
asynchronous. If so, the client will not wait for a response from
the server when sending the data. If the request is synchronous,
the client will wait for the server’s response before continuing.
userID The user ID, if required for authentication at the Web server.

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

whether the server has built the Response object
$
Values of the readyState property: 0, 1, 2, 3, and 4
poster.send docSubmit
poster.send docSubmit


You can send the request to the Web server by using the send method of the
XMLHTTP object as follows:
poster.send XML-data

The send method takes one parameter — the XML data to be sent to the server.
The parameter is a Variant data type and can contain a string, a reference to a
DOM tree, or a reference to a stream. The send method places the XML data in
the HTTP Request object, and then sends the data to the Web server.
The send method can be synchronous or asynchronous, depending on the value
of the async parameter in the XMLHTTP open method.
!
Sending data synchronously
If the async parameter is False, the send method is synchronous. The send
method blocks until the server finishes processing the request and returns a
response to the client.
!
Sending data asynchronously
If the async parameter is True, the send method is asynchronous. The send
method returns immediately, without waiting for a response from the server.
Slide Objective
To introduce the send
method of XMLHTTP
Request.

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()

'Get XMLDOM object, set up onreadystatechange event handler
Set xmldoc = CreateObject("Microsoft.XMLDOM")
xmldoc.onreadystatechange = GetRef("CheckState")

'Load XML document from user-entered URL
xmldoc.load txtURL.value
End Sub

'onreadystatechange event handler
Function CheckState()
state = xmldoc.readyState
results.innerHTML = results.innerHTML & "readyState = " & _
state & "<BR>"
If state = 4 Then
If xmldoc.parseError.errorCode <> 0 Then
results.innerHTML = results.innerHTML & _
xmldoc.parseError.reason & "<BR>"
Else
results.innerHTML = results.innerHTML & _
"success" & "<BR>"
End If
End If
End Function

</SCRIPT>

URL: <input type=text size=60 id=txtURL>
<input type=button value=LOAD id=cmdLoad>
<div id=results style="color:red;font-weight:bold;"></div>

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.

Prerequisites
Before working on this lab, you must have:
!
Basic knowledge of client-side scripting with Microsoft VBScript.
!
Familiarity with using object models in VBScript.
!
Awareness of HTTP request and response mechanisms.

Scenario
In this lab, you will write client-side VBScript in a new HTML document
named Checkout.htm, to allow the user to submit the order in the shopping
basket data island to the LitWare Books Web server.
The script will create an XML data packet containing the order details from the
shopping basket, and post the data packet to the Web server.
Starter and solution files
There are starter and solution files associated with this lab. The starter files are
in the folder <install folder>\Labs\Lab07.1\Starter and the solution files for this
lab are in the folder <install folder>\Labs\Lab07.1\Solution.
Estimated time to complete this lab: 45 minutes
Slide Objective
To introduce the lab.
Lead-in
In this lab, you will write
client-side VBScript in a new
HTML document named
Checkout.htm, to allow the
user to submit the order in
the shopping basket data

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:

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.
Checkout.htm will be displayed in the main frame of the browser as
shown in the following illustration.


18 Module 7: Posting XML Data from Client to Server


!
Create an XML data packet
1. Open Checkout.htm and familiarize yourself with its contents. The
document contains a text field where the user can enter a customer ID, and a
button for submitting the order to the Web server.
2. In the Submit_OnClick event procedure, locate the comment Create
XMLDOM object and load XML string.
a. Create an XMLDOM object and set its async property to False.
b. Get the customer ID from the txtCustomerID text field and use this
value to build the following XML string:
<?xml version='1.0'?>
<customerorder>
<customer>customer id</customer>
</customerorder>

c. Load the XML string into the XMLDOM object.
3. Use a message box to verify that the XML data packet was loaded
successfully, and that it contains the customer ID as entered in the text field.
To see an example of what the script should look like, see Appendix A or
the Student CD-ROM.

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>

<orderitem title="another title" isbn="another isbn">
<price>another price</price>
<quantity>another quantity</quantity>
</orderitem>
</order>
</customerorder>

!
Clone the <order> element in the shopping basket data island
1. Open Checkout.htm, and in the Submit_OnClick event procedure locate
the comment Clone <order> element in shopping basket data island.
2. Define a variable named docOrder and set it to the shopping basket data
island in Default.htm. You can access this data island by using
top.dsoOrder.XMLDocument.
3. Select the <order> element in this data island and clone it (and its
descendent elements) by using the cloneNode method.
To see an example of what the script should look like, see Appendix A or
the Student CD-ROM.

!
Add the cloned <order> element to the <customerorder>
1. In the Submit_OnClick event procedure, locate the comment Add <order>
element to <customerorder>.
2. Select the <customerorder> element in the XML data packet and append the
cloned <order> as a child element by using the appendChild method.
3. Use the MsgBox function to verify that the XML data packet contains the
<order> details.
To see an example of what the script should look like, see Appendix A or
the Student CD-ROM.
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.