AJAX is the new buzz word. AJAX sells! Maybe that's why ajaxed is called like that ;) Or maybe because we have a unique technique which makes using AJAX easier. A lot easier. Lets see and make your own opinion.
First of all you should know that ajaxed is using
prototypejs as its internal JavaScript library. It performs all the XHR calls and offers a lot of convenient functions for our JavaScript work. It is strongly recommended to know its basics when working with ajaxed. As prototype is already very popular we guess you know the basics already ;) Then kick it off.
If you haven't seen a demonstration of ajaxed capabilities yet then
click here.
ajaxed allows you to call server side code directly from client side. There a two ways:
- Page parts: calling a server side procedure and updating an element with its content. Scenario: You have several tabs on a page and want to load different contents into your page when the user clicks each of the tab
- Callback: calling a server side function and returning its values directly to the client side. Scenario: You want to call your business logic to calculate some values and display its result on the page.
Page parts
Lets assume we have two buttons and every button should show different content when clicking it. The content should be loaded from server side and displayed without refreshing the whole page (thats AJAX!):
<!--#include virtual="/ajaxed/ajaxed.asp"-->
<%
set page = new AjaxedPage
page.draw()
sub main() %>
<button type="button" onclick="ajaxed.callback('one', 'content')">content 1</button>
<button type="button" onclick="ajaxed.callback('two', 'content')">content 2</button>
<div id="content"></div>
<% end sub %>
<% sub pagepart_one() %>
the first content
<% end sub %>
<% sub pagepart_two() %>
some other content from server side
<% end sub %>
Run this code — pageparts.asp
Works like a charm. That was easy, wasn't it? Do you see the loading indicator in the top right of the screen? ajaxed takes care of everything.
The thing you need to learn here is the
ajaxed.callback() JavaScript function. This is the main (and currently only one) AJAX function within ajaxed. Please remember it, its the most important function for the use of AJAX.
What we did? We created a simple page and hooked up the buttons
click event with the
ajaxed.callback() function. The first argument holds the name of the page part (
one and
two) and the second refers to the target element (which will receive the content). On the server side we created two procedures. One for each page part:
pagepart_one and
pagepart_two. Thats all! As you see the only thing you need to do on server side is to prefix your page part procedure with
pagepart_.
Callback
The other way is to call server side functions directly and return its values to the client side. Just think of the following: Grabbing whole recordsets from the database and using them within our JavaScript. That would be great! No Problem at all. But for the beginning we have to start with something simple. Lets return some primitive stuff from server side and display it to the user:
<!--#include virtual="/ajaxed/ajaxed.asp"-->
<%
set page = new AjaxedPage
page.draw()
sub callback(action)
if action = "returnChar" then
page.return "A"
elseif action = "returnFloat" then
page.return 2.5
end if
end sub
sub main() %>
<script>
function returned(result) {
$('result').update(result);
}
</script>
<button type="button"
onclick="ajaxed.callback('returnChar', returned)">
return A
</button>
<button type="button"
onclick="ajaxed.callback('returnFloat', returned)">
return 2.5
</button>
<div id="result"></div>
<% end sub %>
Run this code — callback.asp
Do you like it, do you see the benefit already? We click a button and the server side responds to the click without a refreshing the whole page.
How does it work? As already mentioned it is important to know that the
ajaxed.callback() function is our go-to-guy. We used it again :) This time the first parameter tells the server which function (also called action) needs to be executed. The second parameter holds a JavaScript callback function which receives the return values from the server side (in this case we named it
returned). Whatever you return on server side this function will get it.
The last important fact here is that we need a
callback() procedure on server side to handle our client requests. This procedure requires one parameter which holds the actual action. You can see it in the example:
sub callback(action). Within the callback procedure we use
page.return() to return the value to the client side. This method can return (almost) everything which is available within VBScript. E.g. You can even return an array:
page.return array(1, 2, 3) and it can be used as an array within your JavaScript. For more details about the different datatypes please read the documentation of
AjaxedPage.return() method or a more technically detailed version at
Generate JSON from asp datatypes.
As this page is just for "getting started" you need to browse our page for other articles to get more examples of AJAX usage.
Check the AJAX section.
When to use what?
Simple rule: Whenever you need to return whole XHTML fragments use page parts. In all other cases use callbacks.
Read this article if you need another beginners tutorial
Version 2.1.1 Released
—
4176 days ago
