Tab Atkins Jr. schrieb:
Promoting this reply to top-level because I think it's crazy good.
[...]
Let's say we add a new attribute to <a>, like <a onlyreplace="foo">,
where "foo" is the id of an element on the page. Or better, a
space-separated list of elements. When the user clicks such a link,
the browser should do something like this: change the URL in the
navigation bar to the indicated URL, and retrieve the indicated
resource and begin to parse it. Every time an element is encountered
that has an id in the onlyreplace list, if there is an element on the
current page with that id, remove the existing element and then add
the element from the new page. I guess this should be done in the
usual fashion, first appending the element itself and then its
children recursively, leaf-first.
This. Is. BRILLIANT.
Yes it looks like an AJAX killer.
The only problem I can see with this is that it's possible for authors
to believe that they only need to actually write a single full page,
and can just link to fragments containing only the chunk of content to
be replaced. This would mostly break bookmarking and deeplinking, as
visitors would just receive a chunk of unstyled content separated from
the overall page template. However, because it breaks so *visibly*
and reliably (unlike, say, framesets, which just break bookmarking by
sending you to the 'main page'), I think there would be sufficient
pressure for authors to get this right, especially since it's so
*easy* to get it right.
Actually the problem I mentioned for Aryehs first proposal remains -
still, a web designer could go wrong, for example when making a static
website by changing another one he/she has made earlier:
The body of page1.html could look like:
<div id="pageHeader">Recipies for vegetarians</div>
<div id="content">
<h1>Lovely broccoli</h1>
<p>Take the broccoli and do the following:</p>
...
</div>
<ul id="navigation">
<li><span>Broccoli</span></li>
<li><a href="page2.html" onlyreplace="content">Leak</a></li>
</ul>
The body of page2.html:
<div id="pageHeader">Recipies for meat eaters</div>
<div id="content">
<h1>Lovely leak</h1>
<p>Take the leak and do the following:</p>
...
</div>
<ul id="navigation">
<li><a href="page1.html" onlyreplace="content">Broccoli</a></li>
<li><span>Leak</span></li>
</ul>
Note that the author forgot to change the page header of the meat eaters
site he/she had used as raw material. The author will test the site and
always see it correctly, while someone who comes from a deep link will
see the meat eaters header.
Anyway I think that this error is much less likely to be made with the
<a onlyreplace> solution. In many cases, such as template-based CMS
sites, the static elements are made in one place only, anyway. I think
this is a problem we could live with, in view of the benefits that this
solution brings.
