Microformats Wiki - User contributions [en]

rest/ahah

2013-08-20T06:36:16Z

Domtheo:

= AHAH: Asynchronous HTML and HTTP =

AHAH is a very simple technique for dynamically updating web pages using fragments which are then inserted directly into the web page, whence they can be styled using

== Contributors ==
* [http://subconscious-therapy.com/hipnoterapi-surabaya Hipnoterapi surabaya]
* [http://www.tiraimodern.com/product/vertical-blind Vertical blind]
* [http://www.detikauto.com Variasi mobil]

== Questions ==
* Has anyone considered working with browser vendors to have them support client-side includes? This way, markup like <div src="hello-world.txt" /> would just work. This avoids the need for client side script and ensures the browser can correctly manage connections, caching, authentication, etc. For backwards compatibility, you could create a little javascript utility to scan for all occurrences of tags like this, queue up the requests and let the content flow in after the page was loaded. I have a little csi.js utility that does this and it's pretty handy. || Yes, Div Includes is a good concept (fraught with all the usual security issues), but the real power of includes is when they are used dynamically in response to user interaction. For purely static pages it is much more efficient to have the server create them using something like shtml or php. The ability to create/update a Div include via JS is where this proposed technique would be a fantastic improvement on the mess that we have now.

* Okay, maybe this is a dumb question, but I don't understand why this is called AHAH instead of AJAH. AHAH still uses the same XMLHttpRequest JavaScript functionality as AJAX, so why drop the J? AJAX uses the same HTTP functionality as AHAH, so why add the H? Have I misunderstood what is actually happening? (You are right of course, but Ahah! == Eureka!!! and AJah = ?)

== Relation to AJAX ==

AHAH is intended to be a much simpler way to do "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-friendly 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 essentially 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 important for AJAX, all of AHAH is contained in a single JavaScript file (also available. 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.

NOTE: The example ahah.js mentioned here has the unfortunate requirement (if the delay argument is not undefined) that url,target,delay must be global variables (which makes one wonder why they are passed as parameters....). If you don't want to use globals, and want this to actually work, use something like: setTimeout( 'ahah( "' + url + '", "' + target + '", ' + delay + ')', delay ); Fair warning.

=== Send AHAH Request ===

function ahah(url,target) {
document.getElementById(target).innerHTML = 'loading data...';
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = function() {ahahDone(target);};
req.open("GET", url, true);
req.send(null);
} 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 || req.status == 304) {
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 bOpera = (navigator.userAgent.indexOf('Opera') != -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 (bOpera) {
strExec = st[i].text;
}
else if (bMoz) {
strExec = st[i].textContent;
}
else {
strExec = st[i].text;
}
try {
eval(strExec.split("").join(""));
} catch(e) {
alert(e);
}
}
}

==== JavaScript Notes: ====
* IE always returns tags in UPPER CASE, so you must search for SCRIPT and not script. Keep your SCRIPT tags in upper case for Firefox compatibility.
* Do not use // comments, use /* */ instead. The eval executes all your javascript as though it was on one line, so you must end each statement with a semicolon (;).
* Any functions declared in your JavaScript will go out of scope once the eval statement completes. It is possible to keep them in scope by attaching them as a method to a function that was defined at the document level.

== Indexing ==

Another advantage of AHAH is that the dynamic XHTML content can be easily indexed by search engines; this avoids the need to inline all the dynamic content as hidden divs, which would increase page load times.

The current best practice for doing this is to:
* included <link> tags in <head> of the parent page, to reference the various URLs retrieved by AHAH
* include <redirects> in the outer HTML of the AHAH page, so that search hits go to an appropriate anchor on the parent page

It is possible that some crawlers will automatically index the URLs in the JavaScript calls, if recognized as such (e.g., due to the "html" extension, or if it is an absolute URL), though it is not clear how well this would work.

== Meta tags ==

One odd characteristic of <tt>responseText</tt> is that it appears to preserve 'meta' and 'link' tags (though apparently not 'head' itself). This would potentially pollute the browser with illegal HTML, though since they're empty tags it shouldn't affect rendering, and any real-world browsers can be counted on to safely ignore it. One might want to add JavaScript to strip out the extra data, but that would likely be more overhead than it is worth (unless there is sensitive data in there you don't want curious source-viewers to see).

On the flip side, though, the preservation of meta tags allows the sending of additional key-value pairs, a la True, it doesn't support more complex data structures, but in many cases it will suffice, and it avoids the security concerns. For more complex metadata, it is probably better to use [[xoxo]] (perhaps with JSON conventions).

== History ==

"AHAH" as a formal technique appears to have been introduced by Kevin Marks on May 12, 2005 under the name: "Just Asynchronous HTML", where it was also used in. The term "AHAH" was proposed by Ernest Prabhakar during the 2005 conference, and later adopted as part of the REST-Enabled XHTML 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 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 available from Ernie Prabhakar, extending work by Kevin Marks.
* There is some talk of directly supporting AHAH in
* has implemented
* has performed AHAH original function
* published an article about his AHAH/Hijax framework "OutPost" on October 6, 2005 at.
* has modified the code to support multiple simultaneous outstanding AHAH requests.

hatom-examples

2013-08-20T03:16:05Z

Domtheo:

<h1>hAtom examples</h1>

Examples of [[hatom]] - '''Work in progress!'''

= Contributors =
* [http://www.propertykita.com/rumah.html Rumah dijual]
* [http://www.detikauto.com Aksesoris mobil]
* [http://subconscious-therapy.com/hipnoterapi-surabaya Hipnoterapi surabaya]
* [http://www.tiraimodern.com/product/vertical-blind Vertical blind]
* [http://www.raywhitesemarang.com Properti semarang]

= Transformation 1 =

A well behaved weblog.

Original:

<pre><nowiki>
<body>
<div id="wrap">
<div id="content">
...
<div class="entry">
<h3 id="post-60">
<a href="http://www.microformats.org/blog/..." rel="bookmark" title="...">Wiki Attack</a>
</h3>
<p>We had a bit of trouble with ...</p>
<p>We’ve restored the wiki and ...</p>
<p>If anyone is working to combat said spammers ...</p>

<h4 class="tags">Technorati Tags:</h4>
<ul class="tags">
<li><a href="http://technorati.com/tag/mediawiki" rel="tag">mediawiki</a></li>
<li><a href="http://technorati.com/tag/microformats" rel="tag">microformats</a></li>
<li><a href="http://technorati.com/tag/spam" rel="tag">spam</a></li>
</ul>

<ul class="post-info">
<li>
<a href="http://www.microformats.org/blog/..." rel="bookmark" title="...">October 10th, 2005</a>
</li>
<li>
<address class="vcard"><a class="url fn" href="http://theryanking.com">Ryan King</a></address>
</li>
<li>
<a href="http://www.microformats.org/blog/...">4 Comments</a>
</li>
</ul>
</div>

<div class="entry">
....
</div>
...
</div>
</div>
</body>
</nowiki></pre>

Transformed to hAtom compliant:

<body>
<div id="wrap">
<div <span class="added">class="hfeed"</span> id="content">
...
<div class="<span class="added">hentry</span> entry" <span class="change">id</span>="post-60">
<h3 class="<span class="added">entry-title</span>">
<a href="<nowiki>http://</nowiki>www.microformats.org/blog/..." rel="bookmark" title="...">Wiki Attack</a>
</h3>
<span class="added"><div class="entry-content"></span>
<p>We had a bit of trouble with ...</p>
<p>We’ve restored the wiki and ...</p>
<p>If anyone is working to combat said spammers ...</p>
<span class="added"></div></span>

<h4 class="tags">Technorati Tags:</h4>
<ul class="tags">
<li><a href="<nowiki>http://</nowiki>technorati.com/tag/mediawiki" rel="tag">mediawiki</a></li>
<li><a href="<nowiki>http://</nowiki>technorati.com/tag/microformats" rel="tag">microformats</a></li>
<li><a href="<nowiki>http://</nowiki>technorati.com/tag/spam" rel="tag">spam</a></li>
</ul>

<ul class="post-info">
<li>
<a href="<nowiki>http://</nowiki>www.microformats.org/blog/..." rel="bookmark"
title="..."><span class="added"><abbr class="published" title="2005-10-10T14:07:00-07:00"></span>October 10th, 2005<span class="added"></abbr></span></a>
</li>
<li>
<address class="vcard <span class="added">author</span>"><a class="url fn" href="<nowiki>http://</nowiki>theryanking.com">Ryan King</a></address>
</li>
<li>
<a href="<nowiki>http://</nowiki>www.microformats.org/blog/...">4 Comments</a>
</li>
</ul>
</div>

<div class="<span class="added">hentry</span> entry" <span class="change">id</span>="post-59">
....
</div>
...
</div>
</div>
</body>

Changes:
* Added <code>class="hfeed"</code> to Feed
* Added <code>class="hentry"</code> to Entry
* Added <code>class="entry-title"</code> to Entry Title
* Moved <code>id="###"</code> from <code><h3></code> to Entry
* Added <code><div class="entry-content"></code>...<code></div></code> around the Entry Content
* Added <code><abbr class="published" title="YYYY-MM-DDThh:mm:ss+ZZ:ZZ"></code>...<code></abbr></code> around the Entry Datetime
* Added <code>class="author"</code> to <address>

Also note:
* We did not need to add a <code><address></code> element
* We did not need to add a <code><h#></code> element
* We did not need to add a <code>rel="bookmark"</code> to Entry Permalinks

= Transformation 2 =

A not-so well behaved weblog (an older blogspot weblog)

Original:

<pre><nowiki>
<body bgcolor="...">

<div class="posts">
<a name="112993192128302715"> </a><br>
<div style="clear:both;"></div><strong>Nelson's final prayer</strong>
written on the night before Trafalgar:<blockquote>May the Great God, ... heart.
<div style="clear:both; padding-bottom: 0.25em;"></div>
<br>
<span class="byline">
posted by Natalie at
<a href="2005_10_16_nataliesolent_archive.html#112993192128302715">9:49 PM</a>
</span>
</div>

<div class="posts">
<a name="112993022840118939"> </a>
<br>
<div style="clear:both;"></div><strong>I really, truly </strong>didn't go ... view.
<div style="clear:both; padding-bottom: 0.25em;"></div>
<br>
<span class="byline">
posted by Natalie at
<a href="2005_10_16_nataliesolent_archive.html#112993022840118939">9:28 PM</a>
</span>
</div>
...

</body>
</nowiki></pre>

Transformed to hAtom compliant:

<body bgcolor="...">

<<span class="added">div class="hfeed"></span>
<div class="<span class="added">hentry</span> posts" <span class="added">id="112993192128302715"</span>>
<strong <span class="added">class="entry-title entry-content"</span>>
Nelson's final prayer
</strong>
<<span class="added">span class="entry-content"></span>
written on the night before Trafalgar:<blockquote>May the Great God, ... heart.
<span class="added"></span></span>
<div>
<span class="byline">posted by <span class="added"><span class="author vcard"><span class="fn"></span>Natalie<span class="added"></span></span></span> at
<a <span class="added">rel="bookmark"</span> href="2005_10_16_nataliesolent_archive.html#112993192128302715">
<span class="added"><abbr class="published" title="2005-10-24t09:49:00-00:00"></span>9:49 PM<span class="added"></abbr></span></a>
</span>
</div>
</div>

<div class="<span class="added">hentry</span> posts" <span class="added">id="112993022840118939"</span>>
<strong <span class="added">class="heading content</span>>"I really, truly </strong>
<span class="added"><span class="entry-content"></span>
didn't go ... view.
</span>
<div>
<span class="byline">
posted by <span class="added"><span class="author vcard"><span class="fn"></span>Natalie<span class="added"></span></span></span> at
<a <span class="added">rel="bookmark"</span> href="2005_10_16_nataliesolent_archive.html#112993022840118939">
<span class="added"><abbr class="published" title="2005-10-24t09:49:00-00:00"></span>9:28 pm<span class="added"></abbr></span></a>
</span>
</div>
</div>
...
</div>

</body>

Changes:
* Added <code>class="hfeed"</code> to Feed
* Added <code>class="hentry"</code> to each Entry
* Added <code>class="entry-title"</code> to each Entry Title
* Moved <code>id="###"</code> up to the Entry (and deleted the empty anchor block)
* Added <code>rel="bookmark"</code> to the Entry Permalinks
* Added <code><span class="entry-content"></code>...<code></div></code> around the Entry Title (!)
* Added <code><span class="entry content"></code>...<code></div></code> around the Entry Content
* Added <code><abbr class="published" title="YYYY-MM-DDThh:mm:ss+ZZZZ"></code>...<code></abbr></code> around the Entry Datetime
* Added <code><span class="author vcard"></code> and <code><span class="fn"></code> to the poster's name

Also note:
* the ID/fragments are not XHTML -- this is a big problem.
* there are multiple content blocks, because Natalie Solent embeds the title in the content
* cleaned up lots of crap HTML presentation stuff, with the assumption it would be fixed in the stylesheet
* this is one of the uglier transformations you're likely to see

= Transformation 3 =

A media page (from [http://www.cbc.ca/story/world/national/2005/11/22/birdlfu051122.html CBC Newsworld]).

Original:

<pre><nowiki>
<div class="news">
<div class="story">
<h1>China confirms new bird flu outbreaks</h1>
<span class="byline">Last Updated Tue, 22 Nov 2005 23:26:18 EST</span>
<div class="text"><a href="/news/credit.html">CBC News</a></div>

<div class="text">
<p>
China has confirmed three new outbreaks of bird flu, ...
<p>
<ul>
<li><font size="1">INDEPTH: </font><font size="2">
<a href="http://www.cbc.ca/news/background/avianflu/">Avian Flu</a></font>
</ul>
</p>
<table align="right" cellpadding="0" cellspacing="4" hspace="4" width="220">
<tr>
<td align="center">
<img src="http://www.cbc.ca/gfx/pix/birdflu_china_cp_7707271.jpg" width="220" height="223" hspace="3" border="0">
</td>
</tr>
<tr>
<td align="center">
<div class="caption">
<font size="1" face="verdana,arial"><i></i></font>
</div>
</td>
</tr>
</table>
<p>State media says the new outbreaks are in...</p>
<p>The news comes a day after China announced the ...</p>
<p>In China's eastern Anhui province, authorities have ...</p>
<p>The province says the measure will prevent domestic ...</p>
<p>Vietnamese health officials have confirmed that a ...</p>
<p>Doctors from the health department in the northern ...</p>
<p>Bird flu has killed 42 people in Vietnam since December ...</p>
<p>The World Health Organization fears the H5N1 strain of ...</p>
</div>

<p><font face="Verdana,Arial" size="1">with files from the Australian Broadcasting Corporation</font></p>
</div>
...
</div>
</nowiki></pre>

Transformed to hAtom compliant:

<div class="news">
<div class="<span class="added">hfeed hentry</span> story">
<h1 <span class="added">class="entry-title"></span>China confirms new bird flu outbreaks</h1>
<span class="byline">Last Updated
<span class="added"><abbr class="published" title="2005-11-23T04:26:18Z"></span>Tue, 22 Nov 2005 23:26:18 EST<span class="added"></abbr></span>
</span>
<span class="added"><address class="vcard author"></span><span class="text"><a <span class="added">class="url"</span> href="/news/credit.html">CBC News</a></span><span class="added"></address></span>

<div class="text">
<p <span class="added">class="entry-content"</span>>
China has confirmed three new outbreaks of bird flu, ...
</p>
<p>
<ul>
<li><font size="1">INDEPTH: </font><font size="2">
<a href="<nowiki>http://</nowiki>www.cbc.ca/news/background/avianflu/">Avian Flu</a></font>
</ul>
</p>
<table align="right" cellpadding="0" cellspacing="4" hspace="4" width="220">
<tr>
<td align="center">
<img src="<nowiki>http://</nowiki>www.cbc.ca/gfx/pix/birdflu_china_cp_7707271.jpg" width="220" height="223" hspace="3" border="0">
</td>
</tr>
<tr>
<td align="center">
<div class="caption">
<font size="1" face="verdana,arial"><i></i></font>
</div>
</td>
</tr>
</table>
<p <span class="added">class="entry-content"</span>>State media says the new outbreaks are in...</p>
<p <span class="added">class="entry-content"</span>>The news comes a day after China announced the ...</p>
<p <span class="added">class="entry-content"</span>>In China's eastern Anhui province, authorities have ...</p>
<p <span class="added">class="entry-content"</span>>The province says the measure will prevent domestic ...</p>
<p <span class="added">class="entry-content"</span>>Vietnamese health officials have confirmed that a ...</p>
<p <span class="added">class="entry-content"</span>>Doctors from the health department in the northern ...</p>
<p <span class="added">class="entry-content"</span>>Bird flu has killed 42 people in Vietnam since December ...</p>
<p <span class="added">class="entry-content"</span>>The World Health Organization fears the H5N1 strain of ...</p>
</div>

<p><font face="Verdana,Arial" size="1">with files from the Australian Broadcasting Corporation</font></p>
</div>
...
</div>

Changes:
* Added <code><div class="hfeed hentry"></code> around the single entry on the page
* Added <code><div class="entry-title"></code> to the Entry Title
* Added the class <code>class="entry-content"</code> to every paragraph, eg <code><p class="entry-content"></code>...<code></p></code> -- this looks pathological but it may be the way this would need be produced from a template. The latter part of the document could be enclosed in a single "entry-content" div but note that we did this so the "INDEPTH" part would not be marked as content,
* Added <code><abbr class="published" title="YYYYMMDDThh:mm:ss+ZZZZ"></code>...<code></abbr></code> around the Entry Datetime
* Added <code><address class="author vcard"></code> and <code><span class="fn org"></code> to the CBC Newsroom

Also note:
* We made the document more XHTML compliant
* There is no <code>rel="bookmark"</code> so it is assumed to be the URI of the page

= Transformation 4 =

A bulletin board ([http://forums.punbb.org/viewtopic.php?id=9135 PunBB])

Original:

<pre><nowiki>
<body>
<div id="punwrap">
<div id="punviewtopic" class="pun">

<div id="brdheader" class="block">
... header stuff ...
</div>

<div id="announce" class="block">
... announcement stuff ...
</div>

<div class="linkst">
... controls for the blog
</div>

<div id="p54390" class="blockpost rowodd firstpost">
<h2>
<span><span class="conr">#1 </span>
<a href="viewtopic.php?pid=54390#p54390">2005-10-16 10:36:24</a></span>
</h2>
<div class="box">
<div class="inbox">
<div class="postleft">
<dl>
<dt><strong><a href="profile.php?id=2">Rickard</a></strong></dt>

<dd class="usertitle"><strong>PunBB Developer</strong></dd>
<dd class="postavatar"><img src="img/avatars/2.png" width="60" height="60" alt="" /></dd>
<dd>From: 127.0.0.1</dd>
<dd>Registered: 2001-11-02</dd>
<dd>Posts: 7806</dd>
<dd class="usercontacts"><a href="http://www.punbb.org/">Website</a></dd>

</dl>
</div>
<div class="postright">
<h3>PunBB 1.2.9</h3>
<div class="postmsg">
<p>Just a quick note this time....</p>

</div>
<div class="postsignature"><hr />"Programming is like sex: ...</div>
</div>
<div class="clearer"></div>
<div class="postfootleft"><p>Offline</p></div>
<div class="postfootright"><div> </div></div>
</div>
</div>

</div>

<div id="p54392" class="blockpost roweven">
<h2><span><span class="conr">#2 </span><a href="viewtopic.php?pid=54392#p54392">2005-10-16 10:54:41</a></span></h2>
<div class="box">
<div class="inbox">
<div class="postleft">
<dl>
<dt><strong><a href="profile.php?id=5298">IdleFire</a></strong></dt>

<dd class="usertitle"><strong>Member</strong></dd>
<dd class="postavatar"></dd>
<dd>Registered: 2005-10-14</dd>
<dd>Posts: 27</dd>
</dl>
</div>
<div class="postright">

<h3> Re: PunBB 1.2.9</h3>
<div class="postmsg">
<p>...</p>
</div>
</div>
<div class="clearer"></div>
<div class="postfootleft"><p>Offline</p></div>

<div class="postfootright"><div> </div></div>
</div>
</div>
</div>

... more entries ...

<div id="brdfooter" class="block">
... footer stuff ...
</div>

</div>
</div>
</body>
</nowiki></pre>

Transformed to hAtom compliant:

<body>
<div id="punwrap">
<div id="punviewtopic" class="pun">

<div id="brdheader" class="block">
... header stuff ...
</div>

<div id="announce" class="block">
... announcement stuff ...
</div>

<div class="linkst">
... controls for the blog
</div>

<span class="added"><div class="hfeed"></span>
<div id="p54390" class="<span class="added">hentry</span> blockpost rowodd firstpost">
<h2>
<span><span class="conr">#1 </span>
<a <span class="added">rel="bookmark"</span> href="viewtopic.php?pid=54390#p54390">
<span class="added"><abbr class="published" title="2005-10-16T10:36:24-0500"></span>2005-10-16 10:36:24<span class="added"></abbr></span>
</a></span>
</h2>
<div class="box">
<div class="inbox">
<div class="postleft">
<dl>
<dt><strong><span class="added"><address class="author vcard"></span><a <span class="added">class="url fn"</span>href="profile.php?id=2">Rickard</a><span class="added"></address></span></strong></dt>

<dd class="usertitle"><strong>PunBB Developer</strong></dd>
<dd class="postavatar"><img src="img/avatars/2.png" width="60" height="60" alt="" /></dd>
<dd>From: 127.0.0.1</dd>
<dd>Registered: 2001-11-02</dd>
<dd>Posts: 7806</dd>
<dd class="usercontacts"><a href="<nowiki>http://</nowiki>www.punbb.org/">Website</a></dd>

</dl>
</div>
<div class="postright">
<h3 class="entry-title">PunBB 1.2.9</h3>
<div class="<span class="added">entry-content</span> postmsg">
<p>Just a quick note this time....</p>

</div>
<div class="postsignature"><hr />"Programming is like sex: ...</div>
</div>
<div class="clearer"></div>
<div class="postfootleft"><p>Offline</p></div>
<div class="postfootright"><div> </div></div>
</div>
</div>

</div>

<div id="p54392" class="<span class="added">hentry</span> blockpost roweven">
<h2>
<span><span class="conr">#2 </span>
<a <span class="added">rel="bookmark"</span> href="viewtopic.php?pid=54392#p54392">
<span class="added"><abbr class="published" title="2005-10-16T10:54:41-0500"></span>2005-10-16 10:54:41<span class="added"></abbr></span>
</a></span>
</h2>
<div class="box">
<div class="inbox">
<div class="postleft">
<dl>
<dt><strong><span class="added"><address class="author vcard"></span><a <span class="added">class="url fn"</span> href="profile.php?id=5298">IdleFire</a><span class="added"></address></span></strong></dt>

<dd class="usertitle"><strong>Member</strong></dd>
<dd class="postavatar"></dd>
<dd>Registered: 2005-10-14</dd>
<dd>Posts: 27</dd>
</dl>
</div>
<div class="postright">

<h3 class="entry-title"> Re: PunBB 1.2.9</h3>
<div class="<span class="added">entry-content</span> postmsg">
<p>...</p>
</div>
</div>
<div class="clearer"></div>
<div class="postfootleft"><p>Offline</p></div>

<div class="postfootright"><div> </div></div>
</div>
</div>
</div>

... more entries ...
<span class="added"></div></span>

<div id="brdfooter" class="block">
... footer stuff ...
</div>

</div>
</div>
</body>

Changes:
* Added <code><div class="hfeed"></code> around the entries (as opposed to an existing <code><div</code> that enclosed more than entries.
* Added <code>class="hentry"</code> to each Entry
* Added <code>rel="bookmark"</code> to the Entry Permalinks
* Added <code><span class="entry-title"></code>...<code></div></code> around the Entry Title
* Added <code><span class="entry-content"></code>...<code></div></code> around the Entry Content
* Added <code><abbr class="published" title="YYYY-MM-DDThh:mm:ss+ZZZZ"></code>...<code></abbr></code> around the Entry Datetime
* Added <code><address class="author vcard"></code> and <code>class="fn url"</code> to the poster's name

Also note:
* We did not need to add <code>id="###"</code> to the Entry

= Transformation 5 =

Transforming RSS to hatom using MagpieRSS. [http://factoryjoe.com/projects/sixwords/index.txt PHP source available]. Result:

<ol><li><html></li>
<li><body <span class="added">class="hfeed"</span> id="<span class="nu0">173333</span>"></li>
<li> </li>
<li><div id="content" <span class="added">class="hentry"</span>></li>
<li>        <h2 <span class="added">class="entry-title"</span>></li>
<li>                No. <a href="http://twitter.com/ssmith/statuses/<span class="nu0">173333</span>" <span class="added">rel="bookmark"</span>><span class="nu0">173333</span></a></li>
<li>        </h2></li>
<li>        <p <span class="added">class="entry-content"</span>></li>
<li>                  Sweet potato pie. Sugar coma. Die.</li>
<li>        </p></li>
<li>        <p></li>
<li>                <small>Penned by <span <span class="added">class="vcard author"</span>><a href="http://twitter.com/ssmith" <span class="added">class="url fn"</span>>Sean</a></span> at <span class="added"><abbr title="Fri, <span class="nu0">24</span> Nov <span class="nu0">2006</span> <span class="nu0">01</span>:<span class="nu0">03</span>:<span class="nu0">11</span> <span class="nu0">+0000</span>" class="updated"></span><span class="nu0">1</span>:03am</abbr></small>.</li>
<li>        </p></li>
<li> </li>
<li></div></li>
<li></body></li>
<li></html></li></ol>

= More Examples =

hAtom for search results, from [[http://randomchaos.com/microformats/base/ Microformats Base]]:

<li <span class="added">class="hentry"</span>><a <span class="added">rel="bookmark"</span> href="http://tantek.com/presentations/2006/03/what-are-microformats/" <span class="added">class="headline"</span>>http://tantek.com/presentations/2006/03/what-are-microformats/</a> <span class="added">updated <abbr class="published" title="2006-07-10T14:05:54-04:00">2006-07-10 14:05:54</abbr></span></li>

Changes:
* Added <code>class="hentry"</code> to each result
* Added <code>rel="bookmark"</code> to each result link
* Added <code><abbr class="updated" title="YYYY-MM-DDThh:mm:ss+ZZZZ"></code>...<code></abbr></code> for date of index update

rest/ahah

2013-08-20T03:15:59Z

Domtheo:

= AHAH: Asynchronous 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://subconscious-therapy.com/hipnoterapi-surabaya Hipnoterapi surabaya]
* [http://www.tiraimodern.com/product/vertical-blind Vertical blind]
* [http://www.detikauto.com Variasi mobil]

== Questions ==
* Has anyone considered working with browser vendors to have them support client-side includes? This way, markup like <div src="hello-world.txt" /> would just work. This avoids the need for client side script and ensures the browser can correctly manage connections, caching, authentication, etc. For backwards compatibility, you could create a little javascript utility to scan for all occurrences of tags like this, queue up the requests and let the content flow in after the page was loaded. I have a little csi.js utility that does this and it's pretty handy. || Yes, Div Includes is a good concept (fraught with all the usual security issues), but the real power of includes is when they are used dynamically in response to user interaction. For purely static pages it is much more efficient to have the server create them using something like shtml or php. The ability to create/update a Div include via JS is where this proposed technique would be a fantastic improvement on the mess that we have now.

* Okay, maybe this is a dumb question, but I don't understand why this is called AHAH instead of AJAH. AHAH still uses the same XMLHttpRequest JavaScript functionality as AJAX, so why drop the J? AJAX uses the same HTTP functionality as AHAH, so why add the H? Have I misunderstood what is actually happening? (You are right of course, but Ahah! == Eureka!!! and AJah = ?)

== 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-friendly 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 essentially 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.

NOTE: The example ahah.js mentioned here has the unfortunate requirement (if the delay argument is not undefined) that url,target,delay must be global variables (which makes one wonder why they are passed as parameters....). If you don't want to use globals, and want this to actually work, use something like: setTimeout( 'ahah( "' + url + '", "' + target + '", ' + delay + ')', delay ); Fair warning.

=== Send AHAH Request ===

function ahah(url,target) {
document.getElementById(target).innerHTML = 'loading data...';
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = function() {ahahDone(target);};
req.open("GET", url, true);
req.send(null);
} 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 || req.status == 304) {
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 bOpera = (navigator.userAgent.indexOf('Opera') != -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 (bOpera) {
strExec = st[i].text;
}
else if (bMoz) {
strExec = st[i].textContent;
}
else {
strExec = st[i].text;
}
try {
eval(strExec.split("").join(""));
} catch(e) {
alert(e);
}
}
}

==== JavaScript Notes: ====
* IE always returns tags in UPPER CASE, so you must search for SCRIPT and not script. Keep your SCRIPT tags in upper case for Firefox compatibility.
* Do not use // comments, use /* */ instead. The eval executes all your javascript as though it was on one line, so you must end each statement with a semicolon (;).
* Any functions declared in your JavaScript will go out of scope once the eval statement completes. It is possible to keep them in scope by attaching them as a method to a function that was defined at the document level.

== Indexing ==

Another advantage of AHAH is that the dynamic XHTML content can be easily indexed by search engines; this avoids the need to inline all the dynamic content as hidden divs, which would increase page load times.

The current best practice for doing this is to:
* included <link> tags in <head> of the parent page, to reference the various URLs retrieved by AHAH
* include <redirects> in the outer HTML of the AHAH page, so that search hits go to an appropriate anchor on the parent page

It is possible that some crawlers will automatically index the URLs in the JavaScript calls, if recognized as such (e.g., due to the "html" extension, or if it is an absolute URL), though it is not clear how well this would work.

== Meta tags ==

One odd characteristic of <tt>responseText</tt> is that it appears to preserve 'meta' and 'link' tags (though apparently not 'head' itself). This would potentially pollute the browser with illegal HTML, though since they're empty tags it shouldn't affect rendering, and any real-world browsers can be counted on to safely ignore it. One might want to add JavaScript to strip out the extra data, but that would likely be more overhead than it is worth (unless there is sensitive data in there you don't want curious source-viewers to see).

On the flip side, though, the preservation of meta tags allows the sending of additional key-value pairs, a la [http://www.crockford.com/JSON/ JSON]. True, it doesn't support more complex data structures, but in many cases it will suffice, and it avoids the security concerns. For more complex metadata, it is probably better to use [[xoxo]] (perhaps with JSON conventions).

== 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].
* [http://blog.davidjanes.com/mtarchives/2006_01.html#003498 David Janes] has implemented a [http://www.crockford.com/JSON/ JSON]-powered variant called [http://www.blogmatrix.com/tools/jahah/ JAHAH].
* [http://www.gizax.it/ahahsection/ Daniele Florio] has performed AHAH original function
* [http://csharpedge.blogspot.com/ Troels Wittrup] published an article about his AHAH/Hijax framework "OutPost" on October 6, 2005 at [http://www.codeproject.com/Ajax/Outpost.asp CodeProject].
* [http://groups.google.com/group/XMLHttpRequest/browse_thread/thread/3deab0ff4778fdf7/a8f83be73f135ed5 sax'ntouebbe] has modified the code to support multiple simultaneous outstanding AHAH requests.