- Getting and Installing the Atlas Framework
- Creating a New Atlas Project
- Creating a Web Service
- Making an AJAX Request
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Making an AJAX Request
In order to make AJAX requests, we’ll be using the Default.aspx file that was created by default in the project. Replace all of the code in this file with the code in Listing 2.
Listing 2 The UI for making the request (Default.aspx).
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<atlas:ScriptManager runat="server" ID="scriptManager">
<services>
<atlas:servicereference path="~/MyAtlasWebService.asmx" />
</services>
</atlas:ScriptManager>
<title>My Atlas Web Site</title>
<script type="text/javascript" src="js/Request.js"></script>
</head>
<body>
<form id="MyAtlasForm" runat="server">
Enter your name and click the button to get the current time:
<input id="username" type="text" />
<input id="timeButton" type="button" value="Get Time" onclick="Request.GetTime()" />
</form>
<hr />
<div id="response"></div>
</body>
</html>
The new code in our Default.aspx file includes the atlas:ScriptManager tag, which will automatically add the required JavaScript files to our application, as well as an atlas:servicereference tag to add a reference to the web service that we created. Now that we have the necessary Atlas JavaScript, let’s add our own custom JavaScript object called Request.js (see Listing 3).
Listing 3 The JavaScript request object (Request.js).
Request = new Object();
Request.GetTime = function()
{
var nameElem = document.getElementById("username");
MyAtlasWebService.GetTime(nameElem.value, Request.OnResponse);
}
Request.OnResponse = function(result)
{
var responseElem = document.getElementById("response");
responseElem.innerHTML = result;
}
This object has two methods: GetTime and OnResponse. The GetTime method retrieves the value of an input element that has an ID of username. It makes a direct call to the MyAtlasWebService.GetTime method and passes the username value along with a callback method, which will be our new Request.OnResponse method. Atlas has made it possible to call our web service as if it were a JavaScript object—even if we had a namespace for this class, we would be able to call it by simply using dot syntax as we would in our C# classes!
Once the OnResponse method is called, we simply take the result and pass it to the innerHTML property of a div element that’s in the HTML, called response. Figure 2 shows the Solution Explorer with the final files.
)
Figure 2 The final Atlas project.
Run the application to see it in action. Now you should be able to create any AJAX request on your own, simply by adding new methods to the web service. Alternatively, you could create another .aspx file that takes requests and dynamically stores, removes, or updates information in a database. I’ll leave that part to you for now. Enjoy.