In-Depth

Consuming Remote Web Services with ASP.NET AJAX

Notice that ScriptManager can't generate a client-side proxy object that can be used to call the remote service? Dan shows you the workaround.

• By Dan Wahlin
• 09/01/2007

If you want to consume remote Web services in your ASP.NET AJAX applications you'll quickly find that the ScriptManager can't generate a client-side proxy object that can be used to call the remote service. This isn't because the ScriptManager is lacking any functionality, it's because the XmlHttpRequest object built-into all major browsers only allows calls back to the same domain from which the page originated (and because ASP.NET AJAX requires JSON messages rather than SOAP messages in order to work cross-browser). This restriction is added for good reason in an attempt to circumvent various forms of cross-site scripting attacks. So what do you do if you need to consume a remote Web Service in your ASP.NET AJAX pages?

Although you can't call a remote Web service directly, you can have the page call a local service on your server which in turn calls the remote service to access data. Going this route slows things down a little since there's a middle-man involved, but it also allows JSON messages to be passed between your page and your service regardless of what remote Web services are called.

To call a remote Web service you'll first need to create a server-side service proxy object using the standard Add Web reference dialog in VS.NET 2005. Alternatively you could use the wsdl.exe command-line tool as well. Once the proxy object is generated, you need to add a new Web service file into your project that your ASP.NET AJAX pages can call. Since you'll be calling the service with ASP.NET AJAX you'll want to mark it with the ScriptService attribute. You'll find additional details about using the ScriptService attribute and other AJAX-related attributes such as ScriptMethod in my previous articles.

Once you've added a Web service into your Web site, add a WebMethod into it that invokes the proxy object and calls the remote Web Service to retrieve data. Your local service is simply acting as a wrapper around the remote service. Listing 1 shows an example of a service that retrieves weather from a remote Java service located at http://live.capeclear.com/ccx/GlobalWeather?wsdl. The local Web Service is decorated with the ASP.NET AJAX ScriptService attribute and acts as a wrapper around the remote GlobalWeather Web Service. This remote service shown in Listing 1 returns weather report information for different airport codes.

Now that you have a local Web Service, reference it using the ScriptManager's Services property as shown next so that a client-side proxy is automatically generated and embedded in the ASP.NET AJAX-enabled page:

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

[Click on image for larger view.]

One the page loads the ScriptManager will automatically create a client-side proxy class that can be used to call the local Web service to retrieve weather information. An example of invoking the client-side proxy and writing out weather data to the page is shown in Listing 2. An example of the output that is generated is shown in Figure 1.

Creating local Web services to call remote Web services may seem like a lot of extra work at first glance. However, doing so ensures that the data returned from the remote Web service can be integrated nicely into ASP.NET AJAX applications through JSON messaging. You can find another example of utilizing this technique to display Amazon.com album information in a Silverlight application on my XML for ASP.NET Developers Web site.