Ajax Primer - Asynchronous JavaScript and XML by SupremeLord


More Info
									         What We Will Cover
   What is AJAX?
     – Some example sites using AJAX
     – AJAX Technology
     – “The Competition” - some other libraries for AJAX under .NET
   Building Server-Centric AJAX Applications
     – Using UpdatePanel and UpdateProgress Controls
   Building Client-Centric AJAX Applications
     – Eye Candy
     – Data Completion

     – Calling a Web Service, DataSets
   Extending AJAX
   Tools and Resources
     What is AJAX?
   AJAX buzzword
    – Web development technique for creating more interactive and
      responsive web applications using available browser

    – AJAX == Asynchronous JavaScript and XML

          refers to the ability of a browser to request data from the
           server in the background (asynchronously)

    – AJAX buzzword has been extended to include “Eye Candy”

          Various effects such as animation, fades, shadows, etc.

Some Example AJAX Sites
Virtual Earth, Google Maps, etc…

Some Example AJAX Sites
Personalized Portals, Mashups (pageflakes.com)

Some Example AJAX Sites

Sink My Ship (www.sinkmyship.com)

      AJAX Technology
     – Browser DOM manipulated through JavaScript to dynamically display
       and interact with information
     – CSS styles are accessible through DOM
   JavaScript
     – Loosely typed scripting language
     – Mostly used as the “glue” to wire things together on a page
     – Can quickly become hard to maintain
   XMLHttpRequest object
     – Exchange data asynchronously with the web server
     – Any data format will work - HTML fragments, text, XML, JSON
     – Introduced in 1998 for IE 5.0

“The Competition”
There are other AJAX libraries for .NET…
   Ajax.NET Professional

      http://www.ajaxpro.info/

      Uses attributes to make methods callable through

      Includes DataSet wrapper for manipulating DataSets
       in the browser

      No “eye candy” effects

   A comparison of many more Ajax Libraries…
      http://www.daniel-zeiss.de/AJAXComparison/Results.htm

   What about WPF/E and Flash?
      Not AJAX, but these also offer cross-platform, responsive
       web UI’s
What is Microsoft

High productivity AJAX development
Builds on top of ASP.NET 2.0
Works cross-browser
End-to-End Framework
Download at http://ajax.asp.net/
       Architecture Diagram
    HTML, Script,      “Atlas”
      “Atlas”          Service                “Atlas”-enabled       Web Services
      Markup           Proxies                ASP.NET Pages         (ASMX or WCF)

                    “Atlas” Client Script
                    Library                   ASP.NET “Atlas” Server Extensions
                      Controls, Components                            App Services
                                                   “Atlas”               Bridge
“Atlas” Client       Component Model and       Server Controls
                                                                      Web Services
Application             UI Framework                                    Bridge
 Local Store,          Base Class Library
                                              ASP.NET 2.0
                           Script Core             Page
   Browser                                                              Application
  Integration         Browser Compatibility                              Services
                                               Server Controls

   “Atlas” Client Framework and                                  “Atlas” Server
              Services                                            Framework
There are TWO Programming
Server-Centric Programming Model
 Utilize knowledge of ASP.NET Server Controls (grids, etc).
 Good for adding AJAX to existing Applications
 Not as efficient as Client-Centric Model

Client-Centric Programming Model
 Enhanced JavaScript
    Namespaces, Behaviors, Declarative Programming
   through XML Script
 More efficient than Server-Centric
Server-Centric Programming Model

      UpdatePanel and
         Enriching ASP.NET Applications
    Enable key “AJAX” and user experience scenarios in an incremental manner while
       preserving the existing server controls and server-side development models

   Ajax-Enabling Pages
     –   Add a ScriptManager control
   Enable Partial Rendering on ScriptManager (true by default)
     –   Continue to use the postback model, but work out-of-band
     –   Only portions of the page are rendered on the server
     –   Existing page is updated using script
   Extend Existing Controls
     –   Add rich client-side behavior to enable key scenarios
     –   AutoCompleteExtender, etc.
   ASP.NET Ajax Script Framework is an enabling technology
     –   Control developers have a richer target to build for
     –   Page developers continue to use server controls
        Example Key Scenarios

   Dynamically update controls
    – User selects Country
           States are populated based on country selection
           Cities are populated based on state selection
    – User selects Product
           Available accessories are populated based on product selection
   AutoComplete
    – Populates optional dropdown with Server data
         Client-centric Web Applications

    Provide a script framework that makes it possible to create next-generation interactive
     applications, and to interact easily with the server and services while scripting in a
                                      disciplined manner.

    Disciplined and more manageable script
      – OOP in JavaScript
      – .NET-like APIs on core script objects
      – Classes to encapsulate data and logic, and attach to HTML in an
        unobtrusive manner
      – Declarative XML script to define behavior of application (more
      – Cross-browser abstraction layer to provide a uniform DOM API
    AJAX Control Toolkit
Client-Centric Programming Model

     Eye Candy and Data
Client-Centric Programming Model

    Calling a Web Service
       from JavaScript
       and returning a
  Extending ASP.NET Ajax

Ajax Control Toolkit is a community driven, open
source project hosted at Codeplex.
DEMO: Open and Run the Control Toolkit
You can create your own Control Extenders like
those in the Toolkit!
Design-time support is provided
Enhanced JavaScript through library provides
namespaces, events, properties, and more.
Share your Control creations on Codeplex!
Client-Centric Programming Model

     Creating your Own
      Control Extender
  Extending ASP.NET Ajax
Files Created by the Extender Project

 ****Behavior.js - contains JavaScript that you write to
 execute on the client. Behaviors are attached to controls.

 ****Extender.cs - this is where you will add properties that
 you want exposed by your control at design time.

 ****Designer.vb -This is a class used for Design-Time
 functionality in VS (usually do not have to modify)
  Extending ASP.NET Ajax
Creating Properties in an Ajax Control

 Declare the Property in the Behavior‟s prototype:
        get_property : function() {
            return this._property;
        set_property : function(value) {
           this._property = value;
 Declare the Property in the Extender (for the Designer):
        public int fps
               get {
                       return GetPropertyIntValue("fps");
               set {
                       SetPropertyIntValue("fps", value);
  Extending ASP.NET Ajax
Creating Events in an Ajax Control

 Declare the Event:
 add_eventName : function(handler) {
     this.get_events().addHandler(‘eventName', handler);
 remove_eventName : function(handler) {
     this.get_events().removeHandler(‘eventName', handler);

 Raise the event:
  this._raiseEvent(„eventName', eventargs );
      Session Summary

   Ajax is a key part of the ASP.NET story

   ASP.NET Ajax Goals
    – Make it super easy to incorporate AJAX patterns, and create rich
      user experiences, and leverage the browser

    – Create a natural progression from Web applications to Smart
      clients using a common application model

   preview builds for greater transparency, more
    opportunities for feedback to have impact
      Important NOTES!!

   Tools to download
    – Web Development Helper
    – IE Developer Toolbar
    – Fiddler http://www.fiddlertool.com

   IE7 broke the ability to set breakpoints in JavaScript
    when placed inside a <script> tag in a page. VS 2005
    SP1 may fix this…
   Intro to Forms Authentication with ASP.NET Ajax -

   ASP.NET Ajax Web site
    – http://ajax.asp.net/

    – Bits, Forums, Quickstarts, Docs, Updates

   Blogs
    – http://www.nikhilk.net

    – http://weblogs.asp.net/scottgu

    – http://weblogs.asp.net/bleroy

To top