Consuming Web Services using AJAX and ASP.NET 3.5

Dave Verschleiser
15y
17k
0
0

Article

Share3

In order to understand about consuming web services using AJAX, we must first bear in mind what AJAX actually is. The acronym AJAX actually stands for "Asynchronous Javascript and XML". Note the emphasis on "Javascript". Since AJAX is essentially a Javascript framework, it is subject to the same limitations as Javascript. The specific limitation we need to be concerned with when consuming web services via AJAX/Javascript is the restriction on cross site scripting.

What Is Cross Site Scripting, and Why Do We Care?

Cross Site Scripting simply refers to the calling of a script or application located in another domain directly from your client script. All modern browsers have restrictions in place that prevent cross site scripting, since it represents a security risk. What this means to us when consuming web services using AJAX is that calling a web service that we ourselves are hosting is going to be done in a completely different way than calling a remote web service. Therefore, I've broken the rest of this article into two sections: "Consuming A Local Web Service", and "Consuming A Remote Web Service".

Consuming A Local Web Service

Requirements:

Let's say your company is in the business of selling laptops. On your web site, you want to allow users to choose any laptop from a list of available laptops to learn more information about that particular laptop, such as description, RAM, disk size, processor speed, and price. You have an existing web service named ProductInfoWS that can retrieve this information. The web service has a method called GetProductInfo, which accepts a ProductID as its sole argument, and returns a string which contains detail information about that particular product. (We'll assume for this example that the string returned by the web service contains HTML that can be displayed as-is directly on our web page. In practice, formatting of the results should be handled by the presentation layer, not the web service.) We will use "Client-side network callbacks" to interact with the web service.

Solution:

From a new or existing project within Visual Studio 2008, add a new AJAX Web Form to the project and name it AJAXWebForm.aspx. (An AJAX Web Form is just like a Web Form, but it adds a ScriptManager component and some skeleton client-side Javascript.) The markup will look something like this:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script type="text/javascript">
    
      function pageLoad() {
      }
    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
    </div>
    </form>
</body>
</html>

Add your web service to the Services collection of the ScriptManager component, specifying the path as follows:

<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/ProductInfoWS.asmx" />
</Services>
</asp:ScriptManager>

Add an HTML control that will trigger the call to the web service. In our case it will be a select control based on the requirements as outlined earlier. (Note that this must be an HTML control. We do not want to use an ASP.NET control in this case since we want this call to come from the client.) At this point, your markup should look something like that shown in the code segment below. I've added "div" tags for formatting, and a particular div (divDisplay) as a place holder for displaying the response from our web service.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script type="text/javascript">
    
      function pageLoad() {
      }
    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
        <asp:ServiceReference Path="~/ProductInfoWS.asmx" />
        </Services>
        </asp:ScriptManager>
    </div>
    <div id="divSelect" style="float:left">
        Choose a laptop from the list below to find out more about it.<br /><br />
        <select id="selProducts" name="selProducts">
                <option value="">Select A Product...</option>
                <option value="Laptop 1">Laptop 1</option>
                <option value="Laptop 2">Laptop 2</option>
                <option value="Laptop 3">Laptop 3</option>
            </select>
    </div>
    <div id="divDisplay" style="float:right">
        
    </div>
    </form>
</body>
</html>

Next we want to handle the select control's onchange event…

<select id="selProducts" name="selProducts" onchange="return selProducts_onchange()" >
                <option value="">Select A Product...</option>
                <option value="Laptop 1">Laptop 1</option>
                <option value="Laptop 2">Laptop 2</option>
                <option value="Laptop 3">Laptop 3</option>
            </select>

…and create the appropriate Javascript function:

function selProducts_onchange() {
   var lsRet = ProductInfoWS.GetProductInfo (document.getElementById("selProducts").value, WSComplete, WSTimeout, WSError);
   return true;
}

function WSComplete(arg) {
   document.getElementById("divDisplay").innerHTML = arg;
}

function WSTimeout(arg) {
   document.getElementById("divDisplay").innerHTML = "***Web Service TIMEOUT*** " + arg;
}

function WSError(arg) {
   document.getElementById("divDisplay").innerHTML = "***Web Service ERROR*** " + arg;
}

Note that the GetProductInfo method of the ProductInfoWS web service takes four arguments in this case. The first argument is the ProductID as discussed in our requirements. The next three serve as delegates, or function pointers. The first of these "extra" parameters must specify the name of the function to be called in the event of a successful return by the web service. The second parameter contains the name of the function to be called in the event of a timeout, and the third contains the name of the function to be called in the event that the web service returns on error. Note that all three of these functions accept an argument. The argument will contain the response returned by the web service. Thus, for this example, I've chosen to display the results of the web service call within the"divDisplay" "div" tag regardless of success, failure, or timeout.

	document.getElementById("divDisplay").innerHTML = arg;

The entire thing looks like the listing below. Note that the code-behind file was never touched, since there is no server-side code involved.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript">

        function selProducts_onchange() {
            var lsRet = ProductInfoWS.GetProductInfo(document.getElementById("selProducts").value, WSComplete, WSTimeout, WSError);
            return true;
        }

        function WSComplete(arg) {
            document.getElementById("divDisplay").innerHTML = arg;
        }

        function WSTimeout(arg) {
            document.getElementById("divDisplay").innerHTML = "***Web Service TIMEOUT*** " + arg;
        }

        function WSError(arg) {
            document.getElementById("divDisplay").innerHTML = "***Web Service ERROR*** " + arg;
        }
    
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Services>
            <asp:ServiceReference Path="~/ProductInfoWS.asmx" />
            </Services>
            </asp:ScriptManager>
        </div>
        <div id="divSelect" style="float:left">
            Choose a laptop from the list below to find out more about it.<br /><br />
            <select id="selProducts" name="selProducts" onchange="return selProducts_onchange()">
                    <option value="">Select A Product...</option>
                    <option value="Laptop 1">Laptop 1</option>
                    <option value="Laptop 2">Laptop 2</option>
                    <option value="Laptop 3">Laptop 3</option>
            </select>
        </div>
        <div id="divDisplay" style="float:right">
                
        </div>
    </form>
</body>
</html>

AJAXWebform.aspx

Now that we've successfully consumed a local web service using AJAX, let's see about consuming a remote web service.

Consuming A Remote Web Service

Requirements:

Let's say you want to give visitors to your web site the ability to submit a ticker symbol and receive back a stock quote. Let's also assume that for the sake of this example, you know of a remote web service which does exactly that. In fact, I know of a free one we can use for this example. The URL is http://www.webservicex.net/stockquote.asmx. Since this is a remote web service, we can't do a client-side network callback due to restrictions on cross-site scripting enforced by browsers. We will use server-side ASP.NET controls to interact with the web service.

Solution:

From a new or existing project within Visual Studio 2008, add a new Web Form to the project and name it SSAJAXWebForm.aspx. Then, drag a ScriptManager component from the AJAX Extensions section of the toolbar to anywhere within the "form" tags. Your markup should now look something like this:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
    
    </div>
    </form>
</body>
</html>

Next, add an UpdatePanel component by dragging it onto the form from the AJAX Extensions toolbar section. Within the UpdatePanel, create a ContentTemplate element, into which we will place all of our controls. For this example, we will need one each of the following controls: asp:TextBox, asp:Label, and asp:Button. The asp:TextBox control will be where the user enters the ticker symbol, the asp:Button control will be what the user clicks in order to initiate the activity, and the asp:Label control will be where we place the data returned by the web service. So, switch to Design View and drag them onto your Web Form into the ContentTemplate element, laying them out and formatting them as you like. Your markup should now look something like this:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
  <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div style="float:left">
                Enter stock symbol for quote: 
                <asp:TextBox ID="txtSymbol" runat="server"></asp:TextBox>
                <asp:Button ID="btnGo" runat="server" Text="Go" />
                <br />
                <br />
                <asp:Label ID="labelQuote" runat="server" Text=""></asp:Label>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
  </form>
</body>
</html>

Now it's time to wire up our button control with a server-side event handler. Switch back to design mode and double click on our asp:Button control. This will cause two things to happen: (1) a server-side event handler will be created in your code behind file (SSAJAXWebForm.aspx.cs) called btnGo_Click (assuming you used the name btnGo for the button's name), and (2) the client side html code will have been modified so that the asp:Button control is now wired up to the new event handler:

<asp:Button ID="btnGo" runat="server" onclick="btnGo_Click" Text="Go" />

Hence, your SSAJAXWebForm.aspx file should end up looking like this:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
  <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div style="float:left">
                Enter stock symbol for quote: 
                <asp:TextBox ID="txtSymbol" runat="server"></asp:TextBox>
                <asp:Button ID="btnGo" runat="server" Text="Go" />
                 <br />
                 <br />
                 <asp:Label ID="labelQuote" runat="server" onclick="btnGo_Click" Text="">
                 </asp:Label>
             </div>
        </ContentTemplate>
    </asp:UpdatePanel>
  </form>
</body>
</html>

SSAJAXWebForm.aspx

Next, we will add a Web Reference to our project that points to the remote web service. To do this, simply right-click on your project in the Solution Explorer, and click Add Web Reference from the sub-menu. Once the Add Web Reference dialog is displayed, simply enter the URL to the WSDL file of the remote web service and click "Go". If the wizard finds a valid web service at that url, it will display all of the methods exposed by the web service. Here's what the wizard should look like once you're done:

Once you are satisfied that the web service is valid, click the Add Reference button to add this to your project. Once we have a web reference to the web service, we can instantiate it and refer to it just as we would any other object. This particular web service returns an XML string which needs to be parsed once it's been received. The code snippet below should give you an idea what your event handler should look like. Please note that the resulting HTML string is passed back to the Web Form for display simply by assigning it to the Text property of the asp:Label control we created earlier. Note also that you should replace [Namespace] in the StockQuote instantiation with the name of your namespace.

protected void btnGo_Click(object sender, EventArgs e)
{
    string lsSymbol = null;
    string lsName = null;
    string lsLast = null;
    string lsDate = null;
    string lsTime = null;
    string lsHigh = null;
    string lsLow = null;
    string lsChange = null;

    try
    {
       [Namespace].net.webservicex.www.StockQuote loQuote = new [Namespace].net.webservicex.www.StockQuote();
        System.Xml.XmlDocument loXmlDoc = new XmlDocument();

        loXmlDoc.LoadXml(loQuote.GetQuote(txtSymbol.Text));

        System.Xml.XmlNode lnodemapStockRoot = loXmlDoc.SelectSingleNode("/StockQuotes/Stock");
        foreach (XmlElement lnodeElem in lnodemapStockRoot.ChildNodes)
        {
            switch (lnodeElem.Name)
            {
                case "Symbol":
                    lsSymbol = lnodeElem.InnerText;
                    break;
                case "Name":
                    lsName = lnodeElem.InnerText;
                    break;
                case "Last":
                    lsLast = lnodeElem.InnerText;
                    break;
                case "Date":
                    lsDate = lnodeElem.InnerText;
                    break;
                case "Time":
                    lsTime = lnodeElem.InnerText;
                    break;
                case "High":
                    lsHigh = lnodeElem.InnerText;
                    break;
                case "Low":
                    lsLow = lnodeElem.InnerText;
                    break;
                case "PercentageChange":
                    lsChange = lnodeElem.InnerText;
                    break;
                default:
                    break;
            }

        }

        string lsQuote = "Name: <b>" + lsName + "</b><br>" +
            "Last: <b>" + lsLast + "</b> as of <b>" + lsDate + " " + lsTime + "</b><br>" +
            "High: <b>" + lsHigh + "</b> Low: <b>" + lsLow + "</b><br>" +
                    "Day Change: <b>" + lsChange + "</b>";


        labelQuote.Text = lsQuote;  // Assign html string to asp:Label's text property
    }
    catch (Exception ex)
    {
        labelQuote.Text = "***ERROR: " + ex.ToString();
    }
}

Taken from SSAJAXWebForm.aspx.cs

Hopefully this article makes this topic less confusing, rather than more. You can see implementations of both the client-side and server-side AJAX methods discussed in this article in the Component Demos section of our web site at http://www.murrayhilltech.com .

Dave Verschleiser
Murray Hill Technologies

Up Next

Ebook Download

View all

Learn API Testing

Read by 2.1k people

Download Now!

Learn

View all