Ask HN: Review my rapid AJAX idea
When you click a link, the foreign web page is DIFFed with the current page with a server script and the script returns what has changed on the current page in the JSON format. For example,
[
{
"action" : "delete",
"path" : "/p[1]"
},
{
"action" : "modify",
"path" : "/ul[1]/li[1]",
"node" : {
"innerHTML" : "modified 1st line",
"attributes" : {
"class" : "testClass"
}
}
},
{
"action" : "insert",
"parentPath" : "/ul[1]",
"siblingPath" : "/li[3]",
"node" : {
"tagName" : "li",
"innerHTML" : "should insert after 2nd item",
"attributes" : []
}
}
]
This would delete the first paragraph, modify the 1st list item in the 1s unordered list and insert a new list item before the 3rd list item in the first unordered list.Of course, there are several limitations:
- innerHTML isn't a standard (actually, xmlhttp isn't either afaik)
- Dynamically modifying the DOM might interfere with other Javascript present on the page
However, this library could be used to unobtrusively implement AJAX without having to write a single line of Javascript (all you would have to do is embedded the script in the header).
A use case of this library could be for a blog where you have a link "Show comments". Instead of the browser loading the whole page with blog comments, the request is sent asynchronously to the server script which diffs the current page and the page with comments. It then returns the modifications to the current page and the Javascript then updates the DOM with the information sent by the server script.
I had a hard time putting this idea into words and I hope I made myself clear. So far, I've done the Javascript part and what remains is the server side diff script.
In a nutshell:
- Productivity boost VS writing AJAX by hand, unobtrusive
- May interfere with other Javascript code
I would appreciate some feedback on the idea!
EDIT: This idea came from my frustration of having to wait for the whole DOM to be rendered by web browsers when clicking links within a site. Often times, a big part of the DOM structure remains the same and yet, your browser has to render everything once again. Do you think this "concept" (DIFFing and only rendering what has changed) could be applied directly to the browser to make rendering faster ? The main limitation I see is compatibility problems with Javascript and if the DIFF process would be actually faster.