Proverb Web Service: Creating Xml aware Clients - Part 3
Add Comment<div align="center"> <table width="90%" class="outline"> <tr> <td width="33%" class="outline"><b>Download</b></td> <td width="12%" class="outline"><b>SDK</b></td> </tr> <tr> <td width="33%" class="outline"> <a class="wbox" href="../../file/proverbserviceclient.zip"> proverbserviceclient.zip</a> (11kb)</td> <td width="12%" class="outline">Beta2</td> </tr> </table> </div> <p> <span class=wboxheado>Introduction</span><br> This is the third article in the <b>Proverb Web Service</b> series. For a quick recap, in the <a class="wbox" href="article.aspx?ArticleID=63&&TopicID=7">first article</a> I created the Proverb Web Service itself, and in the <a class="wbox" href="article.aspx?ArticleID=65&&TopicID=7">second article</a> I created the administration page for the Proverb Web Service. In this article I will create some clients which will consume the Proverbs Web Service. This article assumes you have gone through the previous articles and deployed the web service in the Virtual Directory called <b>ProverbService</b>.</p> <p>In this article I will concentrate on creating some clients that don't understand <b>SOAP</b> (the messaging format used by web services) but only have Xml understanding capabilities. This will help you to realize the power of Web Service, that even clients that don't understand SOAP/WSDL etc can easily communicate with Web Services through Xml. One more point you will realize as I go on, is that Microsoft's clever implementation of Web Services URI manipulation is very helpful in such cases.<p><span class=wboxheado>Web Service Url Manipulation</span><br> 1) Start you browser, and call the Proverb Service Page <i>http://localhost/ProverbService/ProverbService.asmx </i>.<br> The page you see in your browser is made automatically created by the .NET runtime so that you can try and test things in your browser (clever use of attributes does this magic for you!).<br> 2) On the above page you will see the two web service methods listed <b>GetProverb</b> and <b>AddProverb</b>. Click on <i>GetProverb</i> link, this should bring up another auto-generated page for you along with the single button called <b>Invoke</b>.<br> 3) Click the <b>Invoke</b> button, a new browser instance will open shows you the Xml formatted result of the method call, which in out case is a string containing a random proverb. You should see a Xml reply like the one given below (Of course your proverb will be different .... unless ... :) )<div align="center"> <table width="75%" class="code" cellpadding="2" cellspacing="1"> <tr> <td><pre><?xml version="1.0" encoding="utf-8" ?> <string xmlns="http://www.mastercsharp.com/WebService"> A buffalo does not feel the weight of his own horns. </string></pre></td> </tr> </table> </div> <br> 4) If you go back to the first page in your browser and choose the <b>AddProverb</b> link, you will see another auto-generated page. But this time the page has <b>one textbox</b> and an <b>Invoke</b> button, this is because the <b>AddProverb</b> method takes one parameter i.e. the string containing the proverb to add to the service. You can add any proverb of your own and click <i>Invoke</i>. This will again bring a new browser instance showing the returned message from the web service.<p>This way you saw how you can manually interact with the web service, but if you would have looked closer you would notice that when you click the <i>Invoke</i> button instead of calling some in-built code, a simple Url is given a call which does the trick! Confused??<br> Try this again..<br> Go to the <i>GetProveb</i> link page and click <i>Invoke</i>. Now notice the Url of the new browser instance that pop's-up. Its something like <b>http://localhost/ProverbService/proverbservice.asmx/GetProverb?</b>. If you observe closely, its the path to the Web Service file followed by a backslash <b>'/'</b> and the method name to call. Just to be sure the <i>Invoke</i> button is not calling some script internally, open a new instance of your browser and enter the above Url to the <i>GetProverb</i> method, what do you see?? The Proverb Xml, right ??<br> Try the same thing with the <b>AddProverb</b> method and you will observe you can directly add a new proverb to the service by just calling the Url <b>http://localhost/ProverbService/proverbservice.asmx/AddProverb?</b> followed by the proverb string you want to add as a query string. eg <b>http://localhost/ProverbService/proverbservice.asmx/AddProverb?userProverb=Your+new+proverb+to+add</b>.</p> <p>This feature might not be viable while dealing complex data types, but for simple data types its an very powerful feature, since to give a method call all you have to do is call a simple Url and the method results will be returned to you!</p> <p><span class=wboxhead>Simple Html Client</span><br> Microsoft has added a new <b>XML</b> element to Internet Explorer since version 5.0 (as far as I can recall ..). This element can be used to load Xml data from a file or Url that can be later easily manipulated via Java Script ( or JScript.... ). But this element is not <i>SOAP</i> aware! One thing to note here is that this is a very tightly coupled way of interacting with web services, since you should know before hand what kind of data the methods return and for a complex web service manual coding might be a bit tedious. But the good aspect of this method is the firstly all the Xml processing takes place on client side and the client does not require to be .NET enabled nor does the web server hosting the Html page require to be .NET enabled!<br> Contrary to this, if you are creating a ASP.NET consumer with a .NET Proxy Class that speaks with the web service, then the Xml processing takes place on the server-side (on the server which hosts the ASP.NET client) and your server hosting the ASP.NET page needs to be .NET Enabled! The only plus point is that the ASP.NET pages can be viewed across all browsers and platforms, since the ASP.NET page gets delivered as a plain Html page!</p> <p><b>Client.htm</b> - The Html Web Service Client<table border="0" width="100%" class="code"> <tr> <td > <pre><html> <head> <script language="Javascript"> var adddoc function GetProverbService() { var xmldoc, proverbNode xmldoc = GetProverb.XMLDocument <font color="#0000CC">//Get the XMLDocument object</font> proverbNode= xmldoc.documentElement <font color="#0000CC">//Go to the Document Element</font> showProverb.innerText=proverbNode.text <font color="#0000CC">//Display the text</font> } function AddProverbService() { adddoc = AddProverb.XMLDocument <font color="#0000CC">//Get the XMLDocument object //Next we load the path of the web service adding the user's input proverb //as and URL encoded query string</font> adddoc.load("http://localhost/proverbService/ proverbservice.asmx/AddProverb?userProverb=" +encodeURI(submitProverb.proverbBox.value)) <font color="#0000CC">//Wire-up the Event</font> adddoc.ondataavailable=DisplayMessage } function DisplayMessage() { <font color="#0000CC">//Show the returned message</font> showMessage.innerText=adddoc.text } </script> </head> <body> <center> <XML id="GetProverb" SRC="http://localhost/proverbService/proverbservice.asmx/GetProverb?"> </XML> <XML id="AddProverb" SRC="http://localhost/proverbService/proverbservice.asmx/AddProverb?"> </XML> <h1> Proverb Service HTML Client</h1> <form id="submitProverb" > <input type="button" Value="Get Proverb" OnClick="GetProverbService()" > <br> <div id="showProverb"></div><br> Add a Proverb: <input type="text" name="proverbBox" id="proverbBox"><br> <input type="button" Value="Add Proverb" OnClick="AddProverbService()" > <div id="showMessage"></div> </form> </center> </body> </html></pre> </td> </tr> </table> <p><span class=wboxhead>Macromedia Flash Client</span><br> One of the best features added to Macromedia Flash from version <b>4.0</b> to <b>5.0</b> was the extension of its scripting capabilities and the inclusion of Xml processing capabilities. The scripting language used for Flash 5.0 is called as <b>ActionScript </b>and is very similar to Java Script.<br> Coming back to our example, Web Services are the ideal source for creating dynamic flash driven web sites. I could give you a huge list of web sites that utilize the dynamic capabilities of Flash to create mind-blowing web sites! And web services fits into this scenario very well, currently developers have to create some hack by which they could generate xml content that can be later consumed by Flash movies, web service takes care of generating xml automatically making a developers job very easy!</p> <p>For my Flash client I have not made anything jazzy, just a plain client with 2 buttons and textboxes. One button is scripted to get a proverb from the web service, while the other button takes the input from the textbox and adds it to the web service.</p> <p><b>Get Button ActionScript</b></p> <table width="100%" class="code"> <tr> <td> <pre>on (release) { myClient = new Xml(); myClient.onLoad = ParseText; myClient.load("http://localhost/ProverbService/ProverbService.asmx/GetProverb?"); function ParseText() { var stringNode = this.firstChild.nextSibling.firstChild; _level0.displayProverb=stringNode.nodeValue; } }</pre> </td> </tr> </table> <p>In the above code snip, I first create a new <b>Xml </b>object and wire-up its <b>onLoad</b> event. Next, I load the web service url to get a random web service. In the event-handling function <b>ParseText</b>, I extract the proverb from the returned xml and display it into the textbox variable <b>displayProverb</b>.</p> <p><b>Add Button ActionScript</b></p> <table width="100%" class="code"> <tr> <td > <pre>on (release) { myClient = new Xml(); myClient.onLoad = ParseText; var initialUrl = "http://localhost/proverbService/proverbservice.asmx/AddProverb?userProverb="; var queryString = escape( _level0.addProverb ); myClient.load(initialUrl add queryString); function ParseText() { var stringNode = this.firstChild.nextSibling.firstChild; _level0.addProverb=stringNode.nodeValue; } }</pre> </td> </tr> </table> <p>In this code snip too, I first create a new <b>Xml </b>object and wire-up the <b>onLoad</b> event. Then I declare the Url to the web service and store the user's proverb into another variable called <b>querryString</b>. Note, I use the <b>escape</b> Action Script function to encode the proverb into URL format. Next, the path along with the query string is loaded and the response received is parsed and displayed in the same textbox variable <b>addProverb</b>.<p><span class=wboxheado>Conclusion</span><br> In this part we saw the benefit of the clever URL manipulation adopted by the .NET designers to help just Xml aware clients to communicate with the Web Services!