In part 2 of 3 of this tutorial we will learn how to work with complex types, create and use JavaScript proxies, handle errors and XML data returned from ASP.NET AJAX Web Services.
Learn How to Work with Complex Types

As shown previously the Student class returns a complex type named Student from a Web service. The Student class defines different simple types like fName and lName. Complex types on the other hand are used as an input parameter or return type in an AJAX-enabled Web method are automatically serialized into JSON before being sent to the client side. Although, nested complex types are not available to the client as standalone objects by default. Instead, they are defined internally within another type.

Below is an example of a StudentDetails class that contains two nested complex types.

Above the Address and Gender objects defined with the StudentDetails class will not automatically be made available for use on the client side. They will not be made available on the client side via JavaScript because they are nested types. In this case, the GenerateScriptType, can be added multiple times where different nested complex types are returned from a service. They can be applied directly to the Web service class or above the Web Methods.

Here is an example of using the GenerateScriptService attribute in order to define nested types that should be available to the client.

The Address and Gender types are automatically available for use by client side ASP.NET AJAX JavaScript code when applying the GenerateScriptType attribute to the Web service.

Here is an example code of nested types made available to an ASP.NET AJAX page:

Now let’s see how to create and use Javascript proxies so that data can be retrieved or sent to Web Services.

Learn How to Create JavaScript Proxies

In the creation of JavaScript proxies, you can call Web services by using the ScriptManager’s Services property. Then essentially you can define one or more services that an ASP.NET AJAX page can call asynchronously to send or retrieve data without requiring postbacks. To define a service, you can use ASP.NET AJAX ServiceReference control and assign the Web service URL to the control’s path property.

Here is an example of referencing a service named StudentsService.asmx:

A JavaScript proxy can dynamically generate and reference a page by adding a reference to the StudentsService.asmx through the ScriptManager control. The proxy is embedded by usng the <script> tag and dynamically load by calling the StudentsService.asmx file and appending /js at the end of it.

Here is a good example that shows how the JavaScript proxy embedded in the page in the web.config when debugging is disabled:

When debugging is enabled in a web.config then a debug version of the JavaScript proxy will be embedded like this:

The proxy created by the ScriptManager can be embedded directly into a page instead of using the <script> tag’s src attribute. We can do this by simply make the ServiceReference control’s InlineScript property set to true instead of the default, false. Do to the fact that when the InlineScript property is set to true, the proxy script will not be cached by the browser, so unless you need to that it is recommended that the default value is left alone and remains false, because the proxy might be used by many applications.

Here is a good example displaying the InlineScript property:

How to Use JavaScript Proxies

After a Web service is referenced by an ASP.NET AJAX page using the ScriptManager control, a call can be made to the Web service and the returned data can be handled using callback functions. A Web service is called by referencing its namespace, class name and Web method name. Therefore, any parameters that are passed to the Web service can be defined along with a callback function that handles the returned data.

This call references the InterfaceTraining namespace, StudentsService class and GetStudentsByUnivsersity Web method defined in the service. It obtains a university value obtained from a textbox and passes it and a callback function named OnWSRequestComplete that should be invoked when the asynchronous Web service call returns. What OnWsRequestComplete does is it handles an array of Student objects returned from the service and converts them into a table that is displayed on the page. The output of the call should be generated like this:

Learn How to Handle Errors Using ASP.NET AJAX Web Services

Web services can encounter different types of errors with asynchronous callbacks like a Web service being down or network failure. However, JavaScript proxy objects generated by the ScriptManager allow multiple callbacks to define errors and failures and also with the success callback.

An error callback function can be defined immediately after the standard callback function in the call to the Web method like this:

The OnWSRequestFailed() callback function is triggered when the Web service is called when any errors occur, which then accepts an object representing the error as a parameter. Then the error function determines the cause of the error whether or not the call timed out. Here is an example of using different error functions and the output generated by those functions.

Learn How to Handle XML Data Returned from a Web Service

A Web method could return raw XML data by simply using the ScriptMethod attribute along with its Response Format property. When the ResponseFormat is set to ResponseFormat.xml, the data returned from the Web service is not serialized as XML, not JSON.

Here is an example of a Web method named GetRssFeed() that returns an XmlElement object and accepts a single parameter representing the URL for the RSS feed to retrieve:

Let’s take a look and see what’s going on above. The OnWSRequestComplete() function is passed a URL to an RSS feed and then processes the returned XML data. The function first checks to see if the browser to see if its IE and whether or not the MSXML parser is available. If available, an XPath statement is used to locate all <item> tags within the RSS feed. For there, each item is iterated through and the correct associated <title> and <link> tags are located and processed to display each item’s data.

This is what an ASP.NET AJAX call through a JavaScript proxy to the GetRssFeed() WebMethod output looks like: