1. Send your images to their service (existing image via URL or encoded as multi-part)
2. Then the user modifies the picture (size, colors, rotation, special effects...)
3. Picnik sends you the picture back to your server (either an URL where you can download it or directly as multi-part image)

Here comes an example I have built for demonstration...Click on the picture below to edit it.

Everything realized by using a link to this URL:

Pretty cool isn't it? Thats the basic example but you can customize a lot more (see their API). Also I didn't progress the picture back on my server.

If you want to get started i recommend to start with their tutorials. They are nicely written and done in 10 minutes.

(i've used code sections to create more sections.)

At first sight you can see that the calculation is done on server side ("add" function) and there is no classical XHR and not much JavaScript. The calculation is invoked through the button and therefore the button includes a JavaScript call which defines the "gateway" to the server side. Before I explain how the execution works, it is necessary to look at the page structure. The structure of an ajaxed page (as shown in the example) is the following:

1. Loading ajaxed.asp (include)
2. Create an instance of the AjaxedPage class and execute draw()
3. Provide 3 methods:
   1. init(): executed on every request (before main() or callback())
   2. main(): executed when the page is ordinary called by a user
   3. callback(): executed when the page calls itself again and requests a server side method (action)

The execution flow results as followed:

1. init()
2. main() or callback()

The whole trick here is that the page is able to make a request to itself. It has two states. One for the ordinary request of the user - which normally displays the user interface with (X)HTML. The other state is when the page requests itself again - which results in a JSON response. Ok lets forget the underlying technical details now...

The entry point in the example is the draw() method which draws the page and cares about everything for you. As already mentioned you need to provide the procedures init(), main() and a callback(action) in your page. Whereas init() is executed on every request the main() and callback() are never executed togehter. All the presentation should be put in the main() - you see the form in the example is in the main(). All security checks, preperations, initializations, etc should be put into the init() which is always executed before the main() and callback(action). When is the callback called? It is called if the ajaxed.callback JavaScript function is executed - which in this case is in the onclick event of the button. The ajaxed.callback requires an action (which is used as input for the server side callback function) and a JavaScript callback function which will be called after the server side process has been finished. This callback function (added) gets then the return of the server side function call. In this case with page.return(). The nice thing is that the page handles all conversions from the VBScript datatypes into the JavaScript equivalents (see Generate JSON from ASP datatypes if you are interested in the details). The page posts all form variables by default to the callback which means that the form fields are accessible via request.form within the callback. The AjaxedPage class offers several convenient utility methods to access the request collection. If you dont want to post the whole form or use your own parameters for the callback, you can use the third parameter of the ajaxed.callback function (with JSON). E.g.

With this technique its now possible to call all your server side procedures and then change the DOM according to the return value(s) from the server side. There is no need to care about any XHR or e.g. loading indication. Everything is handled. Another example?

Populating dropdown from the database

Lets assume we have a table called "table" which holds two columns named "id" and "name". We want to fill a dropdown with those values. id as the value and name as the displayed text. I have created a form which holds dropdown and a button. The button invokes the database call on server side. The callback then returns an ADODB.recordset which is automatically converted into an equivalent JavaScript data structure. The "got" JavaScript function can directly access the recordsets data. (Note: the "getRecordset" function does not exist and is just for demonstration)

Returning more values with returnValue()

The following example demonstrates that it is also possible to return more values on the callback. returnValue() allows to return more values by specifying each value with a name. return() in comparision can only return one value.

Run the example

(It expects some value in the textbox. if no value is given then a "valid" flag is set to false and returned from server side. If some input is provided then an array additionally to the valid flag is returned. This example make not much sense but demonstrates the usage of more return values)

The concept makes use of Prototype JavaScript Library and the JSON utility class.
The ajaxed library includes those and therefore they can be used when working with ajaxed e.g. all features of Prototype. Furthermore it offers other convenient built-in features to ease the work with ASP pages (e.g. RFHas() method in the example above - it checks if agiven field from the request.form collection exists). Some other features of the Ajaxed page ...

• AjaxedPage.isPostback() - equivalent to asp.net postback
• AjaxedPage.throwError() - generates an ASP user error
• AjaxedPage.RFT() - gets a field from the request collection already trimmed
• AjaxedPage.RFE() - gets a field from the request collection HTMLEncoded
• AjaxedPage.loadJSFile() - ensures that JavaScript file is loaded only once
• AjaxedPage.iif() - an VBScript inline if
• AjaxedPage.getLocation() - gets the location of the page in several formats

Download ajaxed 0.1
ajaxed 0.1 class reference

Installation

Download the zip archive and copy the whole "ajaxed" folder into your web root. Access the demo at http://yourserver.com/ajaxed/demo/index.asp and check if everything works fine. There is a config.asp which provides some configurations.

Tell me what you think about it. I will come up with some more sophisticated examples in the future. cheeers...

Problem: IE7 displays a blank page after doing some refresh's.
Environment: classic ASP application, WIN XP Pro, IIS 5.1
Reproduction: create the following page and refresh it a couple times:

Solution: There are two points I've found out...

• check if you have any scripts (script src=".."/> loaded within the -tag. If yes then you'll have to move them to the body and everything should work. As far as I remember the W3C says "This element may appear any number of times in the HEAD or BODY of an HTML document." [W3C Script element] Anyway
• if you are using classic ASP you also need to assure that you don't flush the response at the end of your page. Remove the response.flush() line and your apps should work fine.

Okay now lets move on to the details. I was searching the web and there are hardly any resources for this bug yet. I found a post about it in the MSDN forums (IE 7 display blank page on refresh when viewing session enabled PHP pages served from IIS 6!!) where a guy experienced the same in his PHP apps and I've found a post by a guy called Kerry D. Wong who blogged about a similar issue (Meta Refresh Bug in IE7?) but in my case it did not solved the problem but i came closer.

I have a dozen of apps written in classic ASP and all of them display a blank page from time to time now. Moving the javascript references to the body (solution of the PHP problem above) did not solved the problem in my case but when I removed them completely then everything worked fine. So the bahavior is similar somehow. I played around and finally discovered that it has to do with the response.flush(). When I got rid of that line everything was fine and like in the old days... buuut MS should pay for the time I have spent on this.

Ahm, where should I send the invoice?

As there aren't almost any resources about this bug on the web yet I cannot really tell you the detailed reasons for it but I am sure they will pop up soon. I guess it has something to do with the keep-alive requests. There is a remark about the response.flush() method in the MSDN documentation which says: "If the Flush method is called on an ASP page, the server does not honor Keep-Alive requests for that page.".