Canadian IT Manager's Blog

Broadly connecting Canadian Infrastructure and Development Managers through career, industry and technology insight.

Blogs

Deep Impact – AJAX

  • Comments 10
  • Likes

I-m in frequent conversations with top developers and experts. Recently, I was talking with Yong Tao Chen, MCDBA, MCSD.net, MCSE+I. He has worked for some of the largest companies in Canada and in the US as a senior consultant and brings an interesting perspective on the latest technologies or trends. I invited him to share his views and he provides his insights into AJAX. You will find this valuable since you read so much about it in the press. From Yong Tao:
_______________________

Deep Impact - AJAX

One of the hottest topics in the technical world is AJAX: the candidate that might take over the future of the web. With many early adopters such as Zimbra (http://www.zimbra.com/) that are betting on this new technology, the deep impact of AJAX might be beyond most people-s vision. This is another one of those rare occasions that the Microsoft and non-MS world unites and works together.

The AJAX.net framework (http://AJAX.schwarz-interactive.de/csharpsample/default.aspx) makes coding AJAX in .net extremely simple. What is the fundamental change? Those "page refreshing" and "post back" are no longer the case. A web page loaded in the browser can make its XML HTTP server calls directly without refreshing the page or even notify the user!

So, what is so significant? It removes the barrier between rich window apps and web apps. Web applications will be able to have a rich user experience like window users have, such as "drag and drop" in Outlook; secondly, web applications will be able to maintain its state on the web page like a rich client. MS Office Live: using your office online by paying a subscription fee is no longer far away. Further more, using the internet as the communication media, which is what web services is intended to accomplish, could be easy to implement under AJAX.

The game of AJAX has just began; the possibilities are just enormous. With more and more AJAX ready controls rolling out, it will be the standard of most of the web sites and web applications.
_______________________

Thank you YT for sharing your views on this technology,
Stephen Ibaraki

Comments
  • I have been getting e-mails about Microsoft's work with the concept so I'll do a follow-up blog post to Yong Tao's blog in the next two weeks. The technology is "Atlas" if you IT Managers and Pros haven't heard about it and it's good to get it on your radar map now. Please continue to comment here or send me an e-mail at sibaraki@cips.ca. Also our guest bloggers welcome your feedback and they represent the best in IT so it's your chance to dialogue with them. Thank you, Stephen Ibaraki

  • >"It removes the barrier between rich window apps
    > and web apps."

    The difference between rich apps and web-based apps is way way more than just the fact that winforms don't have postbacks.

  • Bob,

    That's a great point. Can you share the details of your experiences?

    Thank you,
    Stephen Ibaraki

  • In an earlier post Stephen had Yong Tao Chen provide some of his thoughts on AJAX. As an I.T. Manager...

  • AJAX employs ECMAScript (JavaScript) to make RPC calls, perform client-based processing and to create rich UI features. AJAX can employ asynch calls to Web services using XMLHTTP to package XML data. Asynch provides the updating of data and UI without round trips.
    Moreover AJAX uses client technologies such as:
    •The browser's Document Object Model (DOM), exposing the elements on an HTML page as a standard set of objects (document, window, etc) that can be manipulated programmatically.
    • Dynamic HTML (DHTML), extending HTML with facilities for reacting to user input on the page in client script, without requiring a round trip.
    •Behaviors, as a way of programmatically packaging UI actions (such as drag and drop) that can then be associated with page elements.
    •Components, as custom JavaScript objects that provide extensive client-side UI features.

    However Atlas extends these in many ways both on the client side and on the server side.

  • Win32 apps vs Ajax- these things come to mind when I think of the differences:

    * State is automatic- if the user selects the 3rd item in a combobox, it's going to stay that way unless the program or the user changes it.

    * No lag. I mean -no- lag. Hit the button and no one ever has to sit there wondering if they actually did click it. Ajax still can't match this.

    * Standard Windows controls- the web equivalents of treeviews and listviews often are similar but not identical in function and behavior to the Windows versions.

    * I get to determine which languages I want to work with. I can use C# throughout, for example, without ever having to resort to another language.

    * I'm not ultimately restrained by what HTML/CSS/JavaScript/etc can depict- I can create controls that draw themselves any way I like and interact with the user in any manner. While some of this can be done via the web, it's a pain to code for and the browser can get in the way. For example, in FireFox, I've told is that no one is ever allowed to prevent me from right-clicking- if this was a native app, my app couldn't be denied.

    I'm sure more would come to mind if I thought about it longer. I think if most of these items could be overcome then I'd be more likely to do all my apps via the web.

    But when most organizations say they want something on the web, what they normally mean is that they want a no-install/no-deployment delivery mechanism for their app.

    Click-Once deployment really gets you there.

    Avalon (http://msdn.microsoft.com/windowsvista/default.aspx?pull=/library/en-us/dnlong/html/introdecctp.asp) will get us the rest of the way there.

    Ultimately, imo, we didn't need a hackish, difficult to work with technique (AJAX), we needed a non-deployment method for deloying apps.

    Beyond that, we need a set of real languages and real class libraries running ON the browser- I want to code C# for the browser, I want to use the .NET class libraries running IN the browser for my apps.

  • Bob,

    I like the rundown of your experiences. It provides an added dimension to the discussion here. I have an interview with the VP of the Developer Division, S. Somasegar likely appearing in the March time frame and your input goes a long way. If you have any questions you want included, give them here or send me an email.

    Thank you,
    Stephen
    PS: If you click on my Name Link above, it will take you to the blog on Atlas.

  • Here is an AJAX wrapper I wrote in Javascript. I hope you find it useful. If you do, please let me know. I’ll clean it up and possibly extend it.

    I am a huge fan of the DOM + JS + Client side processing. As such I do almost all UI development on the client side. If you are like me in this respect you’ll probably find these functions very useful.

    As an aside, prior to learning about AJAX, I had been using the MSIE download behavior for a number of years. (<IE:DOWNLOAD ID="getURL" STYLE="behavior:url(#default#download)" />). I find it interesting that this functionality has been around for some time (at least MSIE5.0) yet it took a fancy moniker for the functionality to gain popularity.

    Just in case it is not self-explanatory this is how to use it:
    AJAXRequest ( url, [asynch,] [destID,] [function,] [graphic]);

    URL: the page you wish to process and/or retrieve from the server (without of course refreshing the browser page). I typically append query strings to this URL to pass parameters back to the server. (e.g. URL = Savedata.asp?user=name&field1=stuff&field2=etc )

    asynch: Continue processing the client side script while the AJAX routine is running [true/false] ? (default = true / asynchronous)

    destID: Place the returned HTML into the specified element. Specify any element by it’s DOM ID. (default = nothing).

    Function: Execute the specified function when the AJAX routine completes successfully. (default = nothing). (E.g. “alert(‘Done!’)” )

    Graphic: Display a graphic in the [destID] while the AJAX routine is processing. I typically use this to display an animated GIF progress bar – which will appear in the location where the AJAX retrieved content will ultimately go. (Unless the server side processing is really slow this graphic probably won’t be noticed.)

    -------------------------------------------------------------------------------------------

    //Request content from the server without refreshing this page
    //IN: The URL to retireve
    //IN: O: asynch: Asynchronous true/false (default=true). If false then processing will halt until the content is returned.
    //IN: O: intoDiv: place the returned contents into the specified DIV. (E.g. IntoDiv.innerHTML=[returned content]) (Default = do not load into any DIV)
    //IN: O: fn: call the specified function when the contents are returned. (Default = do not call any function)
    //IN: O: progressBar: 0=no progress bar, #=progress bar suffix (E.g. /media/progressbar#.gif); displays in "intoDIV"
    var http_request = false;   //Does the browser support AJAX
    var AJAXIntoDiv='';
    var AJAXReturnFn='';
    var AJAXReturnVal='';
    var AJAXProgressBar=0;
    function AJAXRequest(url) {
       var asynch = AJAXRequest.arguments.length > 1 ? AJAXRequest.arguments[1] : true;
       AJAXIntoDiv     = AJAXRequest.arguments.length > 2 ? AJAXRequest.arguments[2] : '';
       AJAXReturnFn    = AJAXRequest.arguments.length > 3 ? AJAXRequest.arguments[3] : '';
       AJAXProgressBar = AJAXRequest.arguments.length > 4 ? AJAXRequest.arguments[4] : 0;
       http_request = false;
       //test browser
       if (window.XMLHttpRequest) {
           http_request = new XMLHttpRequest();
           if (http_request.overrideMimeType) { http_request.overrideMimeType('text/xml'); }
       } else if (window.ActiveXObject) {
           try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); }
           catch (e) {
               try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); }
               catch (e) {}
           }
       }
       if (!http_request) {
           //Cannot create an XMLHTTP instance
           return false;
       }
       http_request.onreadystatechange = AJAXResponseHandler;
       http_request.open('GET', url, asynch);
       http_request.send(null);
    }
    //PRIVATE: Default function to handle the response from the server on an AJAX call
    function AJAXResponseHandler() {
    if (AJAXProgressBar!=0) {
    document.getElementById( AJAXIntoDiv ).innerHTML = '<img src="../media/progressbar'+ AJAXProgressBar +'.gif" alt="Loading...">';
    }
       if (http_request.readyState == 4) {
           //Server response should be 200 ("OK"). For a full list see: http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html
           if (http_request.status == 200) {
               var s = http_request.responseText;
           } else {
               var s = "Server status: " + http_request.status + ", Raw: :" + http_request.responseText;
           }
           AJAXReturnVal = s;
    if( AJAXIntoDiv!='' ) document.getElementById( AJAXIntoDiv ).innerHTML=s;
    if( AJAXReturnFn!='' ) setTimeout( AJAXReturnFn, 500 );
       }
    }

  • Adam,

    Like your material and useful too. I encourage you to keep sharing your experiences.

    Thank you,
    Stephen Ibaraki

  • We have talked about AJAX and ATLAS a couple of times already in this blog, but I thought I would include...

Your comment has been posted.   Close
Thank you, your comment requires moderation so it may take a while to appear.   Close
Leave a Comment