{"id":73,"date":"2005-06-13T19:13:12","date_gmt":"2005-06-14T01:13:12","guid":{"rendered":"http:\/\/www.khaitan.org\/blog\/2005\/06\/ajax-cleaner-simpler-and-interactive-user-interfaces\/"},"modified":"2005-06-13T19:13:12","modified_gmt":"2005-06-14T01:13:12","slug":"ajax-cleaner-simpler-and-interactive-user-interfaces","status":"publish","type":"post","link":"https:\/\/www.khaitan.org\/blog\/2005\/06\/ajax-cleaner-simpler-and-interactive-user-interfaces\/","title":{"rendered":"Ajax: Cleaner, Simpler, and Interactive User Interfaces"},"content":{"rendered":"<p>I never thought geeks love fancy four letter words, until <a href=\"http:\/\/en.wikipedia.org\/wiki\/AJAX\">Ajax<\/a> happened. Since this term Ajax was <a href=\"http:\/\/www.adaptivepath.com\/publications\/essays\/archives\/000385.php\">coined<\/a> (more than the happening of Google Maps, GMail etc. ), there has been a renewed interest in XML, Javascript, and DHTML from the perspective of XML binding as native Javascript objects (DOM) and ability to make ad-hoc HTTP requests after a page load (without refreshing the page). However, the technique of refreshing partial content on the page is not new, websites have been doing this with IFRAMEs, etc. to achieve the desired effect. But, it was more of a hack than clean programming.<br \/>\nBefore Ajax was born, Microsoft engineers were cranking (<a href=\"http:\/\/radio.weblogs.com\/0001011\/2005\/03\/21.html#a9714\">1<\/a>,<a href=\"http:\/\/glazkov.com\/blog\/archive\/2005\/03\/20\/386.aspx\">2<\/a>) on XMLHttpRequest objects on their MSDN website, and the outlook webclient for exchange. Now (since there is a lot of hype), I remember reading an article in MSDN Magazine which I finally found on the <a href=\"http:\/\/msdn.microsoft.com\/msdnmag\/issues\/0400\/cutting\/default.aspx\">web<\/a>. Also, to my surprise I found the following piece of Javascript code (thanks to Google Desktop) lurking in my hard-drive of an old desktop. I have no clue which website I copied it from! Anyway, this was my first working Ajax code:<br \/>\n<code><br \/>\nvar req;<br \/>\nfunction processReqChange() {<br \/>&nbsp;&nbsp;&nbsp;&nbsp;if (req.readyState == 4) {<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (req.status == 200) {<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(req.responseXML);<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else {<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(\"Request Borked: +<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;req.statusText);<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br \/>&nbsp;&nbsp;&nbsp;&nbsp;}<br \/>}<\/p>\n<p>function loadXMLDoc(url) {<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;if (window.XMLHttpRequest) {<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;req = new XMLHttpRequest();<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;req.onreadystatechange = processReqChange;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;req.open(\"GET\", url, true);<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;req.send(null);<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;}<br \/>}<br \/>\n<\/code><br \/>\nAbove is a very rudimentary code. I don&#8217;t even know, if it&#8217;s going to work on &#8220;all&#8221; the browsers.<br \/>\nDoing things the Ajax-way was Javascript&#8217;s <a href=\"http:\/\/www.infoworld.com\/article\/05\/05\/23\/21FEwebapp_1.html\">original<\/a> goal &#8212; but the movement got muffeled by usability pundits and reluctance of companies to piss-off customers who were using the old browsers.<br \/>\nAnyway, there is a good pickup (Ajax has been slashdotted plus there are <a href=\"http:\/\/www.ajaxian.com\">dedicated<\/a> blogs) on Ajax. However, there is a lot to be solved with the rest of the web. As Adam Bosworth <a href=\"http:\/\/www.adambosworth.net\/archives\/000044.html\">points<\/a> out; we still need to solve three fundamental problems viz. Fixing printing of web pages, making the browser listen for external events and having a web application run offline. I think we may be able to get a handle on the last one with Greasemonkey user scripts.<br \/>\nNext part &#8212; my Greasemonkey endeavours (I actually wrote some working code mixing Ajax &#038; Greasemonkey with some offline content).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I never thought geeks love fancy four letter words, until Ajax happened. Since this term Ajax was coined (more than the happening of Google Maps, GMail etc. ), there has been a renewed interest in XML, Javascript, and DHTML from the perspective of XML binding as native Javascript objects (DOM) and ability to make ad-hoc [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[9],"tags":[],"_links":{"self":[{"href":"https:\/\/www.khaitan.org\/blog\/wp-json\/wp\/v2\/posts\/73"}],"collection":[{"href":"https:\/\/www.khaitan.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.khaitan.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.khaitan.org\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.khaitan.org\/blog\/wp-json\/wp\/v2\/comments?post=73"}],"version-history":[{"count":0,"href":"https:\/\/www.khaitan.org\/blog\/wp-json\/wp\/v2\/posts\/73\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.khaitan.org\/blog\/wp-json\/wp\/v2\/media?parent=73"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.khaitan.org\/blog\/wp-json\/wp\/v2\/categories?post=73"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.khaitan.org\/blog\/wp-json\/wp\/v2\/tags?post=73"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}