Bringing AJAX into the game    Getting-started

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

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

Posted in Getting-started 1973 days ago

Version 2.1 released1790 days ago