Building the ZipCode JavaScript Client
Now that the server-side Web service code is ready, you can create a JavaScript client that accesses the service. Add
ZipCodeConduitClient.aspx by adding a Web form to your ZipCodeRUs using the "Add New Item…", "Web Form" option
In the
ZipCodeConduitClient.aspx code, enable Microsoft Atlas by creating a an instance of Atlas's ScriptManager and adding a reference to the ASP.NET-based Web service
ZipCodeConduitService.asmx file to the
element of the Web page as shown in the code below.
...
<head id="Head1" runat="server">
<title>Zip Code Information Service - Atlas JavaScript Conduit
Client</title>
<atlas:ScriptManager ID="scriptManager" runat="server"
EnableScriptComponents="true">
<Services>
<atlas:ServiceReference
Path="ZipCodeConduitService.asmx" />
</Services>
</atlas:ScriptManager>
<script type="text/xml-script">
<page xmlns:script=
"http://schemas.microsoft.com/xml-script/2005">
<components>
<webRequestManager batchSize="5"
enableBatching="true" batchDelay="3000" />
</components>
</page>
</script>
</head>
...
 | |
| Figure 2. ZipCodeConduitClient.aspx: The figure shows the ZipCodeConduitClient.aspx page in design mode in Visual Studio. |
Interestingly, the preceding code enables batched Web service requests between JavaScript and the Web service. Adding the
webRequestManager element, with the
enableBatching attribute value set to
true causes Atlas to handle all the grunt work of accumulating all the requests and executing them at all at once in a batch. Atlas also keeps track of all the return values and objects from the Web service. The code above batches up to five requests (or waits for three seconds to accumulate additional requests—whichever occurs first) and then executes all the requests at once.
Now you can create visual elements of the web page by adding HTML and ASP elements along the lines a shown below to create a page that looks similar to the one shown in
Figure 2.
...
<form id="ZipCodeConduitClient" runat="server" ></form>
<h4>
Enter ZipCodes: 1> <input id="textZipCode1" />
2> <input id="textZipCode2" />
3> <input id="textZipCode3" />
<input id="buttonZipCode" type="button"
value="Get Information"
onclick="return OnbuttonZipCode_click()" />
</h4>
<table border="1" cellpadding="5" cellspacing="2">
<tr>
<td></td>
<td><asp:Label ID="corelationId1" runat="server"
Text="."/></td>
<td><asp:Label ID="corelationId2" runat="server"
Text="."/></td>
<td><asp:Label ID="corelationId3" runat="server"
Text="."/></td>
</tr>
<tr>
<td>ZipCode</td>
<td><asp:Label ID="zipCode1" runat="server"
Text="."/></td>
<td><asp:Label ID="zipCode2" runat="server"
Text="."/></td>
<td><asp:Label ID="zipCode3" runat="server"
Text="."/></td>
</tr>
...
<tr>
<td></td>
<td><asp:Label id="message1" runat="server"
Text="."/></td>
<td><asp:Label id="message2" runat="server"
Text="."/></td>
<td><asp:Label id="message3" runat="server" Text="."/></td>
</tr>
</table>
<br />
<asp:Label ID="message" runat="server" BorderStyle="Groove"
BackColor="#FF8080" BorderWidth="1px" Font-Bold="True"
ForeColor="White">Ready</asp:Label>
...
Notice that the "Get Information" (named
buttonZipCode in the source code) button is wired to invoke the
OnbuttonZipCode_click() JavaScript function, which runs the code shown below.
<script type="text/javascript" language="JavaScript">
function OnbuttonZipCode_click()
{
document.getElementById('message').innerHTML =
"Retrieving Information...";
if (document.getElementById('textZipCode1').
value.length > 0)
{
service = ZipCodeConduitService.GetZipCodeInfo(
"1", document.getElementById('textZipCode1').value,
OnComplete, //Complete event
OnTimeout, //Timeout event
OnError // Error event
);
}
...
}
return false;
}
...
</script>
In the
OnbuttonZipCode_click function, the ZipCodeConduitService JavaScript proxy object is implicitly made available by Atlas because of the
added to the
element earlier. Notice that the
GetZipCodeInfo() function takes three parameters in addition to the two parameters expected by the
GetZipCodeInfo() function on ZipCodeConduitService Web service. This is because Atlas makes all Web service calls asynchronously; after making a Web service call, the JavaScript client code does not wait for the server's response. When the response arrives, the Atlas framework needs a callback function on the client. The additional parameters to the
GetZipCodeInfo method required from JavaScript code are pointers to these callback functions. The response from server could be successful, return an error message, or the call could timeout without returning a response. The preceding code handles each possible response type with the
OnComplete(),
OnError(), and
OnTimeout() functions respectively.
You can see those functions in the code below. These functions receive a
result parameter, which contains the response returned by the server. In this case, the ZipCodeConduitService returns an instance of the ZipCodeConduitData class to the
OnComplete() function, and returns a ZipCodeConduitException exception to
OnError().
...
function OnComplete(result)
{
document.getElementById('message').innerHTML = "Ready";
if (result.CorelationId == '1')
{
document.getElementById('corelationId1').innerHTML =
result.CorelationId;
...
document.getElementById('message1').innerHTML =
result.Message;
}
else if (result.CorelationId == '2')
{
...
}
else if (result.CorelationId == '3')
{
...
}
}
function OnError(result)
{
displayMessage(result);
}
 | |
| Figure 3. ZipCodeConduitClient In Action: Here's the ZipCodeConduitClient.aspx page running in a Web browser showing the results retrieved for three ZIP codes. |
function OnTimeout(result)
{
document.getElementById('message').innerHTML =
"Request Timeout";
}
function displayMessage(result)
{
if (result.CorelationId == '1')
{
document.getElementById('message1').innerHTML =
result.get_message();
}
...
}
</script>
The Code in Action
With both the server and client code in place, you're ready to enjoy the fruits of your labor. Start
ZipCodeConduitClient.aspx in debug mode in Visual Studio or deploy your application to a Web site and enter three ZIP codes to retrieve details of all three ZIP codes at once as shown in
Figure 3.
AJAX made developing responsive Web applications simpler, and now Microsoft has raised the ante by simplifying the process of calling Web services from AJAX-enabled client applications. As AJAX moves further into mainstream development, you can expect Microsoft to integrate Atlas even more closely into Visual Studio and other Microsoft development platform and products.
Previous Page
