JavaScript/AJAX client with WebORB for .NET

This Quick Start guide contains information pertaining to:

Sample C# Class

The JavaScript/AJAX client performs a method invocation on a C# class deployed into WebORB. The class used in this guide can be found below and has one public method. The method collects basic information about the computer and returns it back. Source code and compiled class files for this Quick Start guide can be found in:

 /wwwroot/weborb/examples/quickstart/javascript-ajax - contains the client side code
 /wwwroot/weborb/examples/quickstart/server-side - contains the server side code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// copyright 2003 - 2004 Midnight Coders, LLC
using System;
using System.Web;
using Weborb.Util;

namespace weborb.examples.quickstart
{
  public class ComputerInfoService
  {
    public ComputerInfo getComputerInfo( String requestId )
    {
      ComputerInfo computerInfo = new ComputerInfo();
      HttpRequest request = ThreadContext.currentRequest()
      computerInfo.serverName = request.ServerVariables[ "SERVER_SOFTWARE" ];
      computerInfo.clrVersion = Environment.Version.ToString();
      computerInfo.clrVendor = "Microsoft";
      computerInfo.os = Environment.OSVersion.Platform.ToString();
      computerInfo.osVersion = Environment.OSVersion.Version.ToString();
      computerInfo.requestId = requestId;
      return computerInfo;
    }
  }
}

The ComputerInfo class is defined as:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// copyright 2003 - 2004 Midnight Coders, LLC
using System;

namespace weborb.examples.quickstart
{
  public class ComputerInfo
  {
    internal string serverName;
    internal string clrVersion;
    internal string clrVendor;
    internal string os;
    internal string osVersion;
    internal string requestId;
  }
}

Deploying Class into WebORB

  1. If WebORB is not installed, download it from http://www.themidnightcoders.com/download.

  2. WebORB distribution includes an assembly with the above class files. Copy the quickstart.dll assembly from /wwwroot/weborb/examples/quickstart/server-side into /wwwroot/weborb/bin. Place the assembly file into the /bin directory of the WebORB ASP.NET application so that the assembly is available in the WebORB's class loading space. When WebORB receives an invocation request for the ComputerInfo class, it locates the class and constructs its instance.

Sample JavaScript/AJAX Client

The core HTML part of the client consists of a table containing dynamic blocks (<DIV>) for each ComputerInfo field received from the server. The JavaScript code dynamically places the data from the server into these fields. There are also two buttons to initiate subsequent invocations.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<table bordercolor="#C0C0C0" cellpadding="3" border="1" cellspacing="0">
<tr>
   <td bgcolor="#FFFFCC" colspan="2">
   <font face="Tahoma" size="2">Server responded:</font></td>
</tr>
<tr>
  <td><p align="left"><font size="2"><b>Server name:</b></font></td>
  <td><p align="center"><DIV ID="serverName"></DIV></td>
</tr>
<tr>
  <td><font size="2"><b>Java version:</b></font></td>
  <td><p align="center"><DIV ID="clrVersion"></DIV></td>
</tr>
<tr>
  <td><font size="2"><b>Java vendor:</b></font></td>
  <td><p align="center"><DIV ID="clrVendor"></DIV></td>
</tr>
<tr>
  <td><font size="2"><b>Operating system:</b></font></td>
  <td><p align="center"><DIV ID="os"></DIV></td>
</tr>
<tr>
  <td><font size="2"><b>Operating system version:</b></font></td>
  <td><p align="center"><DIV ID="osVersion"></DIV></td>
</tr>
<tr>
  <td><font size="2"><b>Request ID:</b></font></td>
  <td><p align="center"><DIV ID="requestID"></DIV></td>
</tr>
</table>
<form method="POST" action="--WEBBOT-SELF--">
  <p align="center">
    <input type="button"
           value="Send Sync Request"
           name="SendRequestButton"
           style="width: 150"
           onClick="invokeServer( true )
"><br>
    <input type="button"
           value="Send Async Request"
           name="SendRequestButton2"
           style="width: 150"
          onClick="invokeServer( false )
">
  </p>
</form>

The client binds to the server class and performs the initial invocation when the page is loaded as a result of the onload() handle in the <body> element. The binding code appear as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script language="javascript" src="WebORB.js"></script>
<script>
var proxy;
var requestID = 1;

function invokeServer( syncMode )
{
  var className = "weborb.examples.quickstart.ComputerInfoService";
 
var webORBURL = "http://localhost/weborb/weborb.aspx";
  proxy = webORB.bind( className, webORBURL );
  var responseObj;

  if( syncMode )
  {
    responseObj = proxy.getComputerInfo( requestID++ );
    handleResponse( responseObj );
  }
  else
  {
    proxy.getComputerInfo( requestID++, new Async( handleResponse ) );
  }
}
</script>

Note that the binding call takes place on line 10. The call accepts two arguments: 1) class name and 2) WeBORB server URL. The invokeServer function supports both synchronous (see line 15) and asynchronous invocation (see line 20) modes (the only difference between the two invocations is the Async parameter in line 20). The parameter contains a reference to the function which handles asynchronous response. It is the same function that eventually handles the synchronous response (line 16) when it becomes available. The handleResponse function implementation is below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function handleResponse( responseObj )
{
  var serverName = document.getElementById( "serverName" );
  serverName.innerHTML = "<b><center>" + responseObj.serverName + "</center></b>";

  var clrVersion = document.getElementById( "clrVersion" );
  clrVersion.innerHTML = "<b><center>" + responseObj.clrVersion + "</center></b>";

  var clrVendor = document.getElementById( "clrVendor" );
  clrVendor.innerHTML = "<b><center>" + responseObj.clrVendor + "</center></b>";

  var os = document.getElementById( "os" );
  os.innerHTML = "<b><center>" + responseObj.os + "</center></b>";

  var osVersion = document.getElementById( "osVersion" );
  osVersion.innerHTML = "<b><center>" + responseObj.osVersion + "</center></b>";

  var reqID = document.getElementById( "requestID" );
  reqID.innerHTML = "<b><center>" + responseObj.requestId + "</center></b>";
}

Deploying Client into WebORB

The complete client application page can be found in  /wwwroot/weborb/examples/quickstart/javascript-ajax. Copy computerinfo.html to /wwwroot/weborb. The weborb folder is the document root for the WebORB ASP.NET application. This folder already contains WebORB.js, the script library of the Rich Client System.

Running the Application

In a web browser, enter http://localhost/weborb/computerinfo.htm.

Web browser loads the client application. The client program binds to the server object, invokes the method and displays data from the response.