Microformats Wiki - User contributions [en]

rest/ahah

2005-11-27T22:18:54Z

2ni: /* Executing Javascript */

= AHAH: Asychronous HTML and HTTP =

AHAH is a very simple technique for dynamically updating web pages using [http://en.wikipedia.org/wiki/JavaScript JavaScript]. It involves using [http://en.wikipedia.org/wiki/XMLHTTP XMLHTTPRequest] to retrieve [http://en.wikipedia.org/wiki/HTML (X)HTML] fragments which are then inserted directly into the web page, whence they can be styled using [http://en.wikipedia.org/wiki/Cascading_Style_Sheets CSS].

== Contributors ==
* [http://www.loudthinking.com/ David Hansson]
* [http://epeus.blogspot.com/ Kevin Marks]
* [http://www.opendarwin.org/~drernie/ Ernest Prabhakar]

== Relation to AJAX ==

AHAH is intended to be a much simpler way to do [http://en.wikipedia.org/wiki/Web_development web development] than [http://en.wikipedia.org/wiki/Ajax_%28programming%29 AJAX]: "Asynchronous JavaScript and XML." Strictly speaking, AHAH can be considered a subset of AJAX, since (X)HTML is just a special kind of XML. However, it is a subset with some very specific and useful properties:
# The lack of custom XML schemas dramatically reduces design time
# AHAH can trivially reuse existing HTML pages, avoiding the need for a custom web service
# All data transport is done via browser-friend HTML, easing debugging and testing
# The HTML is designed to be directly embedded in the page's DOM, eliminating the need for parsing
# As HTML, designers can format it using CSS, rather than programmers having to do XSLT transforms
# Processing is all done on the server, so the client-side programming is essentiall nil (moving opaque bits)

In fact, for any content that is destined to be viewed by the browser, it is virtually impossible to imagine any advantage to sending it as custom XML rather than structurally-correct HTML (with appropriate CSS-friendly class names, of course).

That said, many applications of AJAX are (at least in theory) targeteable at custom JavaScript code or desktop GUIs rather than mere browsers. For those cases, the advantages of HTML over custom XML are somewhat less. However, even here, it may well make sense to encode data using [[xoxo]] -- aka XHTML Property Lists -- which can be losslessly converted back and forth from standard data structures (lists and dictionaries) without the need for custom parsers.

== Source Code ==
Unlike the various libraries (e.g., [http://en.wikipedia.org/wiki/JSON JSON], [http://mochikit.com/ MochiKit]) important for AJAX, all of AHAH is contained in a single JavaScript file (also available as [http://www.opendarwin.org/~drernie/src/ahah.js ahah.js] and [http://homepage.mac.com/kevinmarks/jah.js jah.js]). In fact, this is little more than the canonical XMLHttpRequest example, and is simple enough for any modern web designer to embed within their existing web pages.

=== Send AHAH Request ===

function ahah(url,target) {
// native XMLHttpRequest object
document.getElementById(target).innerHTML = 'sending...';
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = function() {ahahDone(target);};
req.open("GET", url, true);
req.send(null);
// IE/Windows ActiveX version
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = function() {ahahDone(target);};
req.open("GET", url, true);
req.send();
}
}
}

Note the workaround needed for IE's ActiveX implementation. The current version hard-codes GET; there may be value in adding an extra parameter to allow POST, PUT, and DELETE.

=== Receive AHAH Request ===

function ahahDone(target) {
// only if req is "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
results = req.responseText;
document.getElementById(target).innerHTML = results;
} else {
document.getElementById(target).innerHTML="ahah error:\n" +
req.statusText;
}
}
}

Other than error checking, the only real work done is:

document.getElementById(target).innerHTML = results;

Everything else (e.g., CSS-styling) is merely inherited from the parent webpage.

=== Executing Javascript ===

Since the browser won't execute <script> tags when changing innerHTML, you may want to apply the following function call on document.getElementById(target):

var bSaf = (navigator.userAgent.indexOf('Safari') != -1);
var bMoz = (navigator.appName == 'Netscape');
function execJS(node) {
var st = node.getElementsByTagName('script');
var strExec;
for(var i=0;i<st.length; i++) {
if (bSaf) {
strExec = st[i].innerHTML;
}
else if (bMoz) {
strExec = st[i].textContent;
}
else {
strExec = st[i].text;
}
try {
eval(strExec);
} catch(e) {
alert(e);
}
}
}

== History ==

"AHAH" as a formal technique appears to have been introduced by Kevin Marks on May 12, 2005 under the name [http://epeus.blogspot.com/2005_05_01_epeus_archive.html#111588374981985824 JAH]: "Just Asynchronous HTML", where it was also used in a [http://homepage.mac.com/kevinmarks/staticjah.html simple example]. The term "AHAH" was proposed by Ernest Prabhakar during the 2005 [http://www.web2con.com/ Web 2.0] conference, and later adopted as part of the REST-Enabled XHTML ([http://www.opendarwin.org/~drernie/C395201355/E20051019175947/index.html REX]) microformat for web services.

David Hansson had independently discovered the exact same concept, and in fact had already submitted an abstract about it for O'Reilly's 2006 [http://conferences.oreillynet.com/etech/ E-Tech] conference when he encountered the work done by Marks and Prabhakar. He had not however named the technique, and quickly agreed to adopt the AHAH moniker. The same concept has no doubt been independently discovered by others, but these three appear to be the first to make a sustained attempt to promote it as a formal technique.

== Implementations ==
* Sample [http://www.opendarwin.org/~drernie/src/ahah.js JavaScript code] available from Ernie Prabhakar, extending work by Kevin Marks.
* There is some talk of directly supporting AHAH in [http://www.rubyonrails.com/ Ruby on Rails] using [http://wiki.rubyonrails.com/rails/pages/UnderstandingPartials partials].

rest/ahah

2005-11-27T04:03:32Z

2ni: /* Executing Javascript */

= AHAH: Asychronous HTML and HTTP =

AHAH is a very simple technique for dynamically updating web pages using [http://en.wikipedia.org/wiki/JavaScript JavaScript]. It involves using [http://en.wikipedia.org/wiki/XMLHTTP XMLHTTPRequest] to retrieve [http://en.wikipedia.org/wiki/HTML (X)HTML] fragments which are then inserted directly into the web page, whence they can be styled using [http://en.wikipedia.org/wiki/Cascading_Style_Sheets CSS].

== Contributors ==
* [http://www.loudthinking.com/ David Hansson]
* [http://epeus.blogspot.com/ Kevin Marks]
* [http://www.opendarwin.org/~drernie/ Ernest Prabhakar]

== Relation to AJAX ==

AHAH is intended to be a much simpler way to do [http://en.wikipedia.org/wiki/Web_development web development] than [http://en.wikipedia.org/wiki/Ajax_%28programming%29 AJAX]: "Asynchronous JavaScript and XML." Strictly speaking, AHAH can be considered a subset of AJAX, since (X)HTML is just a special kind of XML. However, it is a subset with some very specific and useful properties:
# The lack of custom XML schemas dramatically reduces design time
# AHAH can trivially reuse existing HTML pages, avoiding the need for a custom web service
# All data transport is done via browser-friend HTML, easing debugging and testing
# The HTML is designed to be directly embedded in the page's DOM, eliminating the need for parsing
# As HTML, designers can format it using CSS, rather than programmers having to do XSLT transforms
# Processing is all done on the server, so the client-side programming is essentiall nil (moving opaque bits)

In fact, for any content that is destined to be viewed by the browser, it is virtually impossible to imagine any advantage to sending it as custom XML rather than structurally-correct HTML (with appropriate CSS-friendly class names, of course).

That said, many applications of AJAX are (at least in theory) targeteable at custom JavaScript code or desktop GUIs rather than mere browsers. For those cases, the advantages of HTML over custom XML are somewhat less. However, even here, it may well make sense to encode data using [[xoxo]] -- aka XHTML Property Lists -- which can be losslessly converted back and forth from standard data structures (lists and dictionaries) without the need for custom parsers.

== Source Code ==
Unlike the various libraries (e.g., [http://en.wikipedia.org/wiki/JSON JSON], [http://mochikit.com/ MochiKit]) important for AJAX, all of AHAH is contained in a single JavaScript file (also available as [http://www.opendarwin.org/~drernie/src/ahah.js ahah.js] and [http://homepage.mac.com/kevinmarks/jah.js jah.js]). In fact, this is little more than the canonical XMLHttpRequest example, and is simple enough for any modern web designer to embed within their existing web pages.

=== Send AHAH Request ===

function ahah(url,target) {
// native XMLHttpRequest object
document.getElementById(target).innerHTML = 'sending...';
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = function() {ahahDone(target);};
req.open("GET", url, true);
req.send(null);
// IE/Windows ActiveX version
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = function() {ahahDone(target);};
req.open("GET", url, true);
req.send();
}
}
}

Note the workaround needed for IE's ActiveX implementation. The current version hard-codes GET; there may be value in adding an extra parameter to allow POST, PUT, and DELETE.

=== Receive AHAH Request ===

function ahahDone(target) {
// only if req is "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
results = req.responseText;
document.getElementById(target).innerHTML = results;
} else {
document.getElementById(target).innerHTML="ahah error:\n" +
req.statusText;
}
}
}

Other than error checking, the only real work done is:

document.getElementById(target).innerHTML = results;

Everything else (e.g., CSS-styling) is merely inherited from the parent webpage.

=== Executing Javascript ===

Since the browser won't execute <script> tags when changing innerHTML, you may want to apply the following function call on document.getElementById(target):

var bSaf = (navigator.userAgent.indexOf('Safari') != -1);
var bMoz = (navigator.appName == 'Netscape');
function execJS(node) {
var st = node.getElementsByTagName('script');
for(var i=0;i<st.length; i++) {
if (bSaf) {
eval(st[i].innerHTML);
}
else if (bMoz) {
eval(st[i].textContent);
}
else {
eval(st[i].text);
}
}
}

== History ==

"AHAH" as a formal technique appears to have been introduced by Kevin Marks on May 12, 2005 under the name [http://epeus.blogspot.com/2005_05_01_epeus_archive.html#111588374981985824 JAH]: "Just Asynchronous HTML", where it was also used in a [http://homepage.mac.com/kevinmarks/staticjah.html simple example]. The term "AHAH" was proposed by Ernest Prabhakar during the 2005 [http://www.web2con.com/ Web 2.0] conference, and later adopted as part of the REST-Enabled XHTML ([http://www.opendarwin.org/~drernie/C395201355/E20051019175947/index.html REX]) microformat for web services.

David Hansson had independently discovered the exact same concept, and in fact had already submitted an abstract about it for O'Reilly's 2006 [http://conferences.oreillynet.com/etech/ E-Tech] conference when he encountered the work done by Marks and Prabhakar. He had not however named the technique, and quickly agreed to adopt the AHAH moniker. The same concept has no doubt been independently discovered by others, but these three appear to be the first to make a sustained attempt to promote it as a formal technique.

== Implementations ==
* Sample [http://www.opendarwin.org/~drernie/src/ahah.js JavaScript code] available from Ernie Prabhakar, extending work by Kevin Marks.
* There is some talk of directly supporting AHAH in [http://www.rubyonrails.com/ Ruby on Rails] using [http://wiki.rubyonrails.com/rails/pages/UnderstandingPartials partials].

rest/ahah

2005-11-27T01:24:13Z

2ni: /* Receive AHAH Request */

= AHAH: Asychronous HTML and HTTP =

AHAH is a very simple technique for dynamically updating web pages using [http://en.wikipedia.org/wiki/JavaScript JavaScript]. It involves using [http://en.wikipedia.org/wiki/XMLHTTP XMLHTTPRequest] to retrieve [http://en.wikipedia.org/wiki/HTML (X)HTML] fragments which are then inserted directly into the web page, whence they can be styled using [http://en.wikipedia.org/wiki/Cascading_Style_Sheets CSS].

== Contributors ==
* [http://www.loudthinking.com/ David Hansson]
* [http://epeus.blogspot.com/ Kevin Marks]
* [http://www.opendarwin.org/~drernie/ Ernest Prabhakar]

== Relation to AJAX ==

AHAH is intended to be a much simpler way to do [http://en.wikipedia.org/wiki/Web_development web development] than [http://en.wikipedia.org/wiki/Ajax_%28programming%29 AJAX]: "Asynchronous JavaScript and XML." Strictly speaking, AHAH can be considered a subset of AJAX, since (X)HTML is just a special kind of XML. However, it is a subset with some very specific and useful properties:
# The lack of custom XML schemas dramatically reduces design time
# AHAH can trivially reuse existing HTML pages, avoiding the need for a custom web service
# All data transport is done via browser-friend HTML, easing debugging and testing
# The HTML is designed to be directly embedded in the page's DOM, eliminating the need for parsing
# As HTML, designers can format it using CSS, rather than programmers having to do XSLT transforms
# Processing is all done on the server, so the client-side programming is essentiall nil (moving opaque bits)

In fact, for any content that is destined to be viewed by the browser, it is virtually impossible to imagine any advantage to sending it as custom XML rather than structurally-correct HTML (with appropriate CSS-friendly class names, of course).

That said, many applications of AJAX are (at least in theory) targeteable at custom JavaScript code or desktop GUIs rather than mere browsers. For those cases, the advantages of HTML over custom XML are somewhat less. However, even here, it may well make sense to encode data using [[xoxo]] -- aka XHTML Property Lists -- which can be losslessly converted back and forth from standard data structures (lists and dictionaries) without the need for custom parsers.

== Source Code ==
Unlike the various libraries (e.g., [http://en.wikipedia.org/wiki/JSON JSON], [http://mochikit.com/ MochiKit]) important for AJAX, all of AHAH is contained in a single JavaScript file (also available as [http://www.opendarwin.org/~drernie/src/ahah.js ahah.js] and [http://homepage.mac.com/kevinmarks/jah.js jah.js]). In fact, this is little more than the canonical XMLHttpRequest example, and is simple enough for any modern web designer to embed within their existing web pages.

=== Send AHAH Request ===

function ahah(url,target) {
// native XMLHttpRequest object
document.getElementById(target).innerHTML = 'sending...';
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = function() {ahahDone(target);};
req.open("GET", url, true);
req.send(null);
// IE/Windows ActiveX version
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = function() {ahahDone(target);};
req.open("GET", url, true);
req.send();
}
}
}

Note the workaround needed for IE's ActiveX implementation. The current version hard-codes GET; there may be value in adding an extra parameter to allow POST, PUT, and DELETE.

=== Receive AHAH Request ===

function ahahDone(target) {
// only if req is "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
results = req.responseText;
document.getElementById(target).innerHTML = results;
} else {
document.getElementById(target).innerHTML="ahah error:\n" +
req.statusText;
}
}
}

Other than error checking, the only real work done is:

document.getElementById(target).innerHTML = results;

Everything else (e.g., CSS-styling) is merely inherited from the parent webpage.

=== Executing Javascript ===

Since the browser won't execute <script> when changing innerHTML, you may want to apply the following function call on document.getElementById(target):

var bSaf = (navigator.userAgent.indexOf('Safari') != -1);
var bMoz = (navigator.appName == 'Netscape');
function execJS(node) {
var st = node.getElementsByTagName('script');
for(var i=0;i<st.length; i++) {
if (bSaf) {
eval(st[i].innerHTML);
}
else if (bMoz) {
eval(st[i].textContent);
}
else {
eval(st[i].text);
}
}
}

== History ==

"AHAH" as a formal technique appears to have been introduced by Kevin Marks on May 12, 2005 under the name [http://epeus.blogspot.com/2005_05_01_epeus_archive.html#111588374981985824 JAH]: "Just Asynchronous HTML", where it was also used in a [http://homepage.mac.com/kevinmarks/staticjah.html simple example]. The term "AHAH" was proposed by Ernest Prabhakar during the 2005 [http://www.web2con.com/ Web 2.0] conference, and later adopted as part of the REST-Enabled XHTML ([http://www.opendarwin.org/~drernie/C395201355/E20051019175947/index.html REX]) microformat for web services.

David Hansson had independently discovered the exact same concept, and in fact had already submitted an abstract about it for O'Reilly's 2006 [http://conferences.oreillynet.com/etech/ E-Tech] conference when he encountered the work done by Marks and Prabhakar. He had not however named the technique, and quickly agreed to adopt the AHAH moniker. The same concept has no doubt been independently discovered by others, but these three appear to be the first to make a sustained attempt to promote it as a formal technique.

== Implementations ==
* Sample [http://www.opendarwin.org/~drernie/src/ahah.js JavaScript code] available from Ernie Prabhakar, extending work by Kevin Marks.
* There is some talk of directly supporting AHAH in [http://www.rubyonrails.com/ Ruby on Rails] using [http://wiki.rubyonrails.com/rails/pages/UnderstandingPartials partials].