|
Implementing Remote Calling Without Using AJAX
By Rajesh Toleti |
Rating: 3.0 out of 5
Rate this article
|
email this article to a colleague
suggest an article
|
download source code
Introduction
Right now the latest buzzword around town is AJAX. AJAX is an acronym for Asynchronous JavaScript and XML
and is a method used to implement remote calling. "Remote calling" is the exchange of information between
client and server without page reloading/refreshing. When you use remote calling, there is no
postback to the server and the page is not redelivered to the client browser.
Why Do We Need Remote Calling?
So why do we need remote calling? Assume you are writing a web page that will display a large page with a
lot of data - including some images and you're not using some version of remote calling.
To begin with, this page must be created on the server and sent to the client.
For example, let's say that somewhere on the page you want to show the capital of a country when
a user selects the country name from a dropdown list. When user selects the country, the name of
the country needs to be sent back to the server, the capital of that country queried from the
database, and the result sent back to the client. The problem is that even though the only thing that we're
changing is the name of the capital, we'd have to recreate entire page and send the whole thing
back to the client who would then re-render the whole page and reload all the images. A terribly inefficient
prospect whenall we want to change is a small piece of text!
With AJAX, only the new data is transmitted. This saves us a lot of resources that would otherwise be wasted.
These include web server CPU time (since the page being returned is smaller), network traffic (especially
important when using slow modem connections or mobile phones/GPRS), and even client-side CPU cycles (since the HTML
doesn't need to be reloaded and rendered from scratch). The response will be faster because of it and it gives
a richer user experience.
The Catch
So from the sound of things remote calling is great... so what's the big deal?
Well, in the Microsoft-centric world, remote calling is only implemented in ASP.NET 2.0.
If you do a web search you can find loads of articles about how to implement AJAX with ASP.NET 2.0, but
if you are using earlier version, you can't easily implement AJAX.
Voila! Here is the alternative.
This article will show you one way to implement remote calling without using AJAX and without using the XMLHttpRequest object.
The technique outlined can even be used from classic ASP and is sufficient for most remote calling needs.
Before we delve into the actual code, I warn you, this procedure is neither a complete replacement for AJAX
nor does it work with ASP.NET server controls.
The Code
In order to understand the sample code you'll need at least some basic knowledge of HTML, JavaScript, CSS, and ASP.NET.
Imagine a small application, which displays a list of countries in a Dropdown List.
When you select a country and press the Submit button, it would go to server and
query the database to give you details about the country.
I will demonstrate a similar application only I'll be using asynchronous (remote)
calling and just to keep things simple I'll be returning only the country's capital.
I'm also going to hard code the capitals into the script so as not to confuse readers
with a lot of database access code.
Listing 1: NoAjax1.aspx
<html>
<head>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<script language="JavaScript">
function callServer()
{
serverData.innerHTML = '<IFRAME src="NoAjax2.aspx?ID='
+ document.form1.s1.value
+ '" width="200" height="50" frameborder="0"></IFRAME>';
}
</script>
</head>
<body>
<form id="form1" name="form1" runat="server">
<table height="100" border="0">
<tr>
<td valign="middle">
<select name="s1" onchange="callServer()">
<option value="0" selected>Select</option>
<option value="1">USA</option>
<option value="2">UK</option>
<option value="3">INDIA</option>
</select>
</td>
<td valign="middle">
<div id="serverData"></div>
</td>
</tr>
</table>
</form>
</body>
</html>
In the listing above, you can see that we have a DropDown List with name S1.
It has 3 countries (namely USA, UK, INDIA) and I have attached an OnChange event to the DropDown List.
Whenever you select an option this event will be fired.
The event calls the client-side JavaScript function "callserver".
This implementaion causes the page to update whenever the selected item in the
DropDown List is changed. If you prefer, you can just as easily
add a normal submit button and an "OnSubmit" event handler to only
cause the function to fire when the user clicks the button.
Tip: You can name this function anything you like.
This function assigns an IFRAME to the division "serverData".
The key part is the src attribute of IFRAME. We are assigning server page
"NoAjax2.aspx" to this attribute and we are sending a parameter
as the query string. This parameter is the value of selected option of the dropdown list S1.
You can specify the width and height values of the IFRAME based on your needs.
It's best to keep the value of the frameborder attribute at 0 unless you want show
the visitors that the result is in a frame.
Tip: You can just as easily use a Textbox, Radio Button, etc.
instead of a Dropdown List depending on your requirements.
Here is the code listing for the file that provides the data to the IFRAME.
There are two listings but they are for the same file. I've included both
a VB.NET and a C# version so you can choose whichever language you prefer.
Listing 2: NoAjax2.aspx
<%@ Page Language="VB" %>
<script runat="server">
Sub Page_Load()
Dim ID as String
Dim var1 as String
ID = Request.QueryString("ID")
Select Case ID
Case "1"
var1 = "Washington DC"
Case "2"
var1 = "London"
Case "3"
var1 = "New Delhi"
End Select
lbl1.Text = var1
End Sub
</script>
<form runat="server">
<asp:label id="lbl1" runat="server" />
</form>
Listing 3: NoAjax2CS.aspx
<%@ Page Language="C#" %>
<script runat="server">
String ID;
String var1;
void Page_load(){
ID=Request.QueryString["ID"];
switch (ID) {
case "1":
var1="Washington DC";
break;
case "2":
var1="London";
break;
case "3":
var1="New Delhi";
break;
}
lbl1.Text=var1;
}
</script>
<form runat=server>
<asp:label id="lbl1" runat="server" />
</form>
In "NoAjax2.aspx" we collect the value of ID.
Then, depending on the ID value we assign the capital of the country to the label control "lbl1".
We display that label in the body of same file. For simplification I just used a switch/select statement
to assign capital to the variable.
Instead of the switch/select you would most likely want to query
a database to get the corresponding capitals.
Conclusion
That's all there is to it. With some relatively simple JavaScript and CSS we can implement
this easy remote calling method even on platforms where AJAX isn't available. The scripts listed
abaove are also available in a zip file which you can download from here. I
hope you find them helpful and easy to use.
Related Articles
|
|
|
|
|
Supporting Products/Tools
|
|
Stonebroom.ASP2XML
|
|
Stonebroom.ASP2XML(c) is an interface component designed to make building
applications that transport data in XML format much easier. It can be used
to automatically pass updates back to the original data source.
|
[Top]
|
|
|
|
Other Articles
|
|
|
|
|
|
|
Aug 3, 2005 - SQL Server 2005 XQuery and XML-DML - Part 1
|
|
|
Microsoft SQL Server 2005 now offers great support for and close integration with XML as a data persistence format. In the first article of his series examining this new support, Alex Homer offers an overview of how SQL Server 2005 stores XML documents and schemas, examines how it supports querying and manipulating XML documents, and provides a simple test application that allows you to experiment with XQuery.
[Read This Article] [Top]
|
|
|
|
|
|
|
|
|
|
Jun 15, 2005 - Reading and Writing XML in .NET Version 2.0 - Part 2
|
|
|
Alex Homer continues his series on reading and writing XML in .NET 2.0. In part one, we focused on the reading side of things, examining the XmlReader and XmlReaderSettings classes. In this article, we move on to look at the XmlWriter and XmlWriterSettings classes, and how they can be used to write XML documents and fragments more easily and more efficiently than in version 1.x of .NET.
[Read This Article] [Top]
|
|
|
|
|
|
|
|
May 26, 2005 - Implementing AJAX Using ASP.NET 1.1
|
|
|
AJAX is an acronym that stands for Asynchronous JavaScript and XML. AJAX's strong point is that it allows data on a page to be dynamically updated without the browser having to reload the page. This article offers a brief introduction and description of AJAX and then provides some sample code illustrating its usage.
[Read This Article] [Top]
|
|
|
Mailing List
Want to receive email when the next article is published? Just Click Here to sign up.
|
|
