Home / Advanced JavaScript Tutorials / Remote scripting with JavaScript and ASP


 

Partners
Save big on iPage's shared and Wordpress hosting with our March coupons!
iPage March coupons
Save big on iPage's shared and Wordpress hosting with our March coupons!
iPage March coupons
Facebook Fan Page


Testing remote scripting

Now that we've got the installation out of the way, let's jump straight in and create a remote scripting example. The example we're about to create is rather trivial, but never the less it demonstrates the capabilities of remote scripting in both the client and server domains.

Our example will accept a string from the user using JavaScript's prompt() method. Remote scripting is then used to create a server object from a page we will create called rev.asp. Rev.asp will contain a function called reverse, which accepts a string and returns that string reversed, using the VBScript function strreverse. We call this function and then use JavaScript's alert() function to show the result passed back from the ASP script to the client.

Enabling remote scripting on the client side
In order for remote scripting to work properly, it must be "enabled" by both the client (our HTML page) and the server (an ASP page which we will create shortly). Create a new file called client_test.html and save it into the directory above where you installed the remote scripting files. For example, if you installed them to c:\inetpub\wwwroot\_ScirptLibrary then you would save client_test.html to c:\inetpub\wwwroot.

Our client needs to include the JavaScript functions defined in rs.htm, and we can do this by using a script block between the <head> and </head> tags, like this:

<script language="JavaScript" src="_ScriptLibrary/RS.HTM"></script>

As mentioned earlier, rs.htm contains a bunch of JavaScript functions. One of these functions is called RSEnableRemoteScripting, and it uses the JavaScript function document.write to dynamically add an <applet> tag to our HTML page. This applet points to the rsproxy.class file that should reside in the _ScriptLibrary folder.

RSEnableRemoteScripting accepts one optional parameter: the directory on the server where it can find rsproxy.class. If no parameter is specified, then it assume that rsproxy.class exists in the _ScriptLibrary directory. We call RSEnableRemoteScripting between a script block, like this:

<script language="JavaScript">
RSEnableRemoteScripting("/_ScriptLibrary");
</script>


Because RSEnableRemoteScripting adds an applet to our HTML page, it should be called just after the <body> tag. Note however that this applet isn't visible in the output and isn’t shown when you view the pages source in the browser either.

So here's what our client_test.html page looks like so far:

<html>
<head>
<title> Remote Scripting Example </title>
<script language="JavaScript" src="_ScriptLibrary/RS.HTM"></script>

</head>
<body>

<script language="JavaScript">
RSEnableRemoteScripting("/_ScriptLibrary");
</script>

</body>
</html>


Before continuing, copy-paste the code above and save it as client_test.html. Call it up in your browser using the http://localhost syntax, such as http://mypc/client_test.html. If you notice any JavaScript errors, then double check that you've got all of the required files in the _ScriptLibrary directory and that you're using the correct paths in client_test.html.

The next thing we want to do is actually implement remote scripting into our HTML page. Add the following code just before the </head> tag:

<script language="JavaScript">

function reverseString()
{
var strTest = prompt("Enter String To Reverse:");
var objRS = RSGetASPObject("rev.asp");
var objResult = objRS.revStr(strTest);

alert(objResult.return_value);
}

</script>


Also add the following code just before the </body> tag:

<form name="frmTest">
<input type="button" onClick="reverseString()" value="Reverse String >>">
</form>


As you can see, we've added a button to our HTML page. When it is clicked, the JavaScript function reverseString() is called. ReverseString prompts the user to enter a string, creates a new remote scripting object (from the rev.asp page which we will look at shortly), and calls its revStr function.

The RSGetASPObject() JavaScript function comes from including rs.htm into our page and accepts the name of an ASP script. It returns an object that contains each of the functions defined in that ASP script.

Don't worry if you don't understand everything at the moment because it will become clearer as we move on. At this point, all you need to do is have your client_test.html page looking like this:

<html>
<head>
<title> Remote Scripting Example </title>
<script language="JavaScript" src="_ScriptLibrary/RS.HTM"></script>

<script language="JavaScript">

function reverseString()
{
var strTest = prompt("Enter String To Reverse:");
var objRS = RSGetASPObject("rev.asp");
var objResult = objRS.revStr(strTest);

alert(objResult.return_value);
}

</script>
</head>
<body>

<script language="JavaScript">
RSEnableRemoteScripting("/_ScriptLibrary");
</script>

<form name="frmTest">
<input type="button" onClick="reverseString()" value="Reverse String >>">
</form>

</body>
</html>

-Tutorial introduction
-What is remote scripting?
-Testing remote scripting
-Enabling remote scripting on the server side
-Another remote scripting example

Enabling remote scripting on the server side

http://www.javascriptkit.com
Copyright © 1997-2002 JavaScript Kit. NO PART may be reproduced without author's permission.