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 Demonstration: Preparing XML Data 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. .. load the XML data from the client You will also see how the server can use the data to perform back-end processing, such as updating database tables Module 7: Posting XML Data from Client to Server 25 Loading XML Data on the Server Slide Objective To create an XMLDOM object on the server ! Load the XML data from the Request object ! When the client posts XML data to an ASP at the server, the server must... boilerplate XML document: < ?xml version='1.0'?> 5 The root element of the XML document is You can now add existing XML data into this DOM tree, after the element Module 7: Posting XML Data from Client to Server Populating an XML Data Packet Slide Objective To populate an XML data packet with information from XML data islands.. .Module 7: Posting XML Data from Client to Server 5 Building an XML Data Packet Slide Objective To introduce the tasks required to package the data that is to be sent back to the server ! Create an XMLDOM object Set docSubmit = CreateObject("Microsoft.XMLDOM") Set docSubmit = CreateObject("Microsoft.XMLDOM") Lead-in Let’s consider how the client prepares the XML data to be sent back to the Web server. .. Microsoft.XMLHTTP, which is used as a request object to transport XML data to the Web server 12 Module 7: Posting XML Data from Client to Server Instantiating the XMLHTTP Object 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 Create a Microsoft.XMLHTTP... connection to post data, asynchronously, to the CustomerOrder.asp page: poster.open "POST", "CustomerOrder.asp", False 13 14 Module 7: Posting XML Data from Client to Server Sending Data to the Server Slide Objective To introduce the send method of XMLHTTP Request ! Lead-in Send the XML data $ Once the XMLHTTP object has been created and opened, the next step is to send the data to the server by using... following illustration Module 7: Posting XML Data from Client to Server 21 Exercise 3: Posting the XML Data Packet to the Web Server In this exercise, you will create an XMLHTTP object and use it to post the XML data packet to the Web server You will then create a new ASP page, CustomerOrder.asp, to receive the XML data packet at the Web server and acknowledge receipt of the data with a simple response... 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. .. DOM.” 26 Module 7: Posting XML Data from Client to Server For example, the following ASP script shows how to access the root element of the XML document: Module 7: Posting XML Data from Client to Server 27 Updating the Database Slide Objective To introduce the concept of database access and update Lead-in The client data is now contained in an XMLDOM object... 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 . 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. 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