Suggestion: aax - Ajax Without Javascript

Hello, this is my suggestion for a new html global attribute which would
enable asynchronous xml without the need for Javascript.




*Introduction - The problem*

Currently, in order to create dynamic HTML pages, one must use AJAX (
Asynchronous Javascript and XML), however, AJAX requires javascript and
that often makes trivial tasks complex, this has led people to avoid
Javascript's built in XMLHttpRequest and resort to third party libraries
such as Jquery in an attempt to simplify AJAX. As a result, simple tasks
( Such as fetching weather data every 10 sec) have become complex to
implement and dependent on external bulky libraries.




*The solution*

aax (Pronounced axe) is a proposed AJAX alternative. it adds a single
HTML global attribute called "aax".
The solution is fully backward compatible, clients that don't recognize
the attribute would simply ignore it.
Below are the benefits of the proposal, followed by some quick examples,
followed by a thorough explanation of the proposal, Followed by a
complete example.




*Benefits in comparison to AJAX*

-Simpler to work with: trivial asynchronous requests should not require
external libraries and/or complex code.
-A standardized way to do asynchronous requests - Yes, XMLHttpRequest is
standardized but people seldom use it directly and everyone uses
external wrappers, so in practice this isn't a standard.
-Much more readable.
-No dependency on Javascript.

In a nutshell: AAX is to AJAX as the video tag is to
Flash/Silverlight/activex videos.




*Examples*

 - Fetch weather data every 10 seconds and put it inside a div.
  <div id="weather" aax="10; /weather.aax">

 - Fetch weather data on page load, and then every 10 seconds:
   <div id="weather" aax="10; /weather.aax; now">

   Approximate jquery equivalent:
   setInterval(function(){$.get("/weather.aax",function(data,status)
   {document.getElementById("weather").innerHTML=data;});},10000);

 - Fetch weather data on page load, and whenever
   the div is clicked:
   <div id="weather" aax="click; /weather.aax; now">

 - Fetch new chat messages as fast as possible
   (Throttled by server side long polling):
   <div id="chat" aax="0; /weather.aax; append">

   Approximate jquery equavilant:
   setInterval(function(){$.get(URL,function(data,status)
   {document.getElementById("weather").innerHTML+=data;});},1);

 - Fetch a new content when a menu button is clicked:
   <a href="/menuLink1.html" aax="click; /menuLink1.aax;">
   The href is for backward-compatibility.




*Explanation*

Terminology:
The "current document" is simply the HTML document.
The "fetched document" is the document fetched from the URL specified in
the aax attribute.

The attribute format is as follows:
aax="[interval or click]; [url]; <optional> now; <optional> append;
<optional> prepend"

This fetches an http document from [url] every [interval] seconds (The
fetched document) and uses it to manipulate the current document.
[interval] can optionally be replaced with "click", in this case, the
request occurs when the element is clicked.

The fetched document is an XML page with the following format:
<tag1 id="id1">.....</div>
<tag2 id="id2">.....</div>
<tag3 id="id3">.....</div>
...
tagx is an arbitrary html tag.

Every element id in the fetched document must match an element id in the
current document.
Then, each element in the current document is replaced with its
corresponding element from the fetched document.

Optional modifiers:

now - Additionally fetches the http document when the page loads.

append - Instead of replacing the current document's elements with the
replacement elements specified at the fetched document, we append each
fetched document element's inner HTML to the corresponding current
document element's inner HTML.

prepend - Same as above, except that we prepend.




*A complete example - Dynamically loading an article*

Bob opens example.com, bob receives the following html page:
<html><body>
<div id="menu">...</div>
<span id="content">...</div>
<div id="footer">...</div>
</body></html>

Bob clicks an article of interest, the element bob clicked is:
<a href="/article14.html" aax="click;/article14.aax">
An interesting article</a>

Bob doesn't have an aax-compatible browser, so Bob simply loads
/article14.html and enjoys the article.

Alice does have an aax-compatible browser. So Alice's browser fetches
/article4.aax

article4.aax's content is:
<span id="content"> Today we'd like to announce that...</span>

Alice's browser processes the fetched document and now her document
looks like this:
<html><body>
<div id="menu">...</div>
<span id="content"> Today we'd like to announce that.../div>
<div id="footer">...</div>
</body></html>

Received on Saturday, 27 September 2014 20:55:45 UTC