AJAX

Asynchronous JavaScript and XML is a term describing a web development technique for creating interactive web applications using a combination of HTML, Style Sheets, DOM, JavaScript and XML. A web page that is already loaded can request additional content dynamically from the server. This is done with XMLHttpRequest object to interchange and manipulate data asynchronously with the web server.

• Entry on Wikipedia: http://en.wikipedia.org/wiki/AJAX
• Using AJAX from Perl: http://www.perl.com/pub/a/2006/03/02/ajax_and_perl.html?page=1
• Cool sample web site using this technology: http://local.google.com/
• List of good AJAX tutorials: http://www.maxkiesler.com/index.php/weblog/comments/42_recent_ajax_tutorials/

TWiki AJAX development:

• TWikiAjaxFramework
• UsingAJAXTechnology
• GoogleAjaxSearchDevelopment

-- Contributors: PeterThoeny, ArthurClemens - 22 May 2005

Discussions

a wiki http://lesserwiki.org/ already applied the tech. of AJAX...check it out

-- KingstonFung - 06 Aug 2005

Is anyone currently working to implement the AJAX model within a TWikiSkin if so, I would be interested to see any progress being made.

-- TravisBarker - 26 Aug 2005

I won't commit to doing it. First, because I can't design a good looking web page (let alone skin) to save my life, and second because life has a funny way of getting busy (my boss wants to launch our website next month).

On the other hand, I have been getting some experience with AJAX methodologies, so I'm pretty sure I could put together some interesting widgets that can be placed into existing skins, if someone wants to express interest in their idea of interesting widgets. (widgets that can either degrade, or not appear without affecting the usability of the page).

For example, I definitely plan on contributing to the WysiwygPlugin as it really needs a better way to do freeform links (to other webs, for example). Degrading isn't crutial here, as Kupu already requires a modern web browser.

-- EricSchwertfeger - 26 Aug 2005

Has anyone run into a problem using CGI::Ajax where the exported functions just don't execute in Safari or IE on a MAC, but work everywhere else (including FireFox on a MAC)?

-- EtanWeintraub - 15 Nov 2005

I just saw a demo of a AJAX based TWiki application: VinodKulkarni of Persistent Systems built a simple database like application where one can type a few characters of a name in form field on a TWiki topic. As a result you get a list of all maching records at the lower left; you click on a record to you see & change the record details on the right. All without a page reload. Very cool.

What we need is a solid TWikiAjaxFramework where application builders can easily build AJAX-based TWiki applications.

-- PeterThoeny - 28 Feb 2006

There is an article at O'Reilly on how to use CGI:Ajax

http://www.perl.com/pub/a/2006/03/02/ajax_and_perl.html?page=1

-- RafaelAlvarez - 03 Mar 2006

see JSPopupPlugin for the first in a series of AJAX and related works - this one allows you define a POPUP variable either with TML contents or a URL (to the same server) - like raw/more/attach without leaving the view screen.

-- SvenDowideit - 07 May 2006

Here's a demo of AJAX Timelines of SVN commits - drag the middle bar to July 14th to see some commits. There's also a Use Perl blog entry about this, which is based on a generic timeline gizmo.

-- RichardDonkin - 18 Jul 2006

Here is the AJAX generic timeline: http://simile.mit.edu/timeline/

-- ArthurClemens - 19 Jul 2006

Hijax: Progressive Enhancent with Ajax

snippet:

JavaScript pseudo-protocol - Awful!

<a href="javascript:window.open('help.html')">contextual help</a>

<a href="#" onclick="window.open('help.html'); return false;">contextual help</a>

<a href="help.html"
onclick="window.open(this.getAttribute('href')); return false;">contextual help</a>

<a href="help.html" class="help">contextual help</a>

function doPopups() {
  if (document.getElementsByTagName) {
    var links = document.getElementsByTagName("a");
    for (var i=0; i < links.length; i++) {
      if (links[i].className.match("help")) {
        links[i].onclick = function() {
          window.open(this.getAttribute("href"));
          return false;
        };
      }
    }
  }
}

The Hijax approach:

• Begin by creating a website using traditional page refreshes.
• Data is sent to the server via links and form submissions: the server returns updated pages.
• Intercept (hijack) those links and forms using (unobtrusive) JavaScript.
• Send that data to XMLHttpRequest instead of the server.
• The server returns just the information that's required instead of an entire page.

The paradox:

• Plan for Ajax from the start
• Implement Ajax at the end

Benefits of Hijax:

• No need to spend time and resources building a non-Ajax version.
• No duplication of logic (e.g. form validation).
• Keeps your application logic on the server.
• Keeps your JavaScript file size down.
• Links are spiderable and potentially bookmarkable.

I would say the downside of getElementsByTagName is the slowness of lookup. An averag twiki page can have a lot of links to sift through. But at least on paper this looks like the way to go.

-- ArthurClemens - 19 Jul 2006

I ran across HIJAX as well and really like it as an approach for TWiki. Not sure if performance is really an issue, as I would think the doPopups code here runs at page load time, after the page is already visible and presumably the user is looking at it. By the time they click on a link, the doPopups code should be done - not sure if there's a race condition there, or if the page setup code can somehow stop links being clicked until it's done.

-- RichardDonkin - 20 Jul 2006

Old TwistyPlugin (this version is still on twiki.org) also looked up lots of links, and it caused a hickup between onload and final rendering.

-- ArthurClemens - 20 Jul 2006

http://swik.net/Ajax/Places+To+Use+Ajax

-- MartinCleaver - 23 Jul 2006

AJAX seems to have some I18N challenges - would be interested to know if anyone's already encountered this with international characters in AJAX apps or with TWiki specifically.

TWiki already has code to convert from UTF-8 to the non-UTF-8 {Site}{Charset}, so it would not be hard to convert the other way, which is the solution recommended in the linked article.

For general I18N tips, see I18N for basic links and InternationalisationGuidelines for current coding guidelines. We don't yet have UnicodeSupport, which would make support of AJAX UTF-8 a bit simpler.

-- RichardDonkin - 15 Mar 2007