Improve the knowledge about What is AJAX...

• AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS, and Java Script.
• Ajax uses XHTML for content, CSS for presentation, along with Document Object Model and JavaScript for dynamic content display.
• Conventional web applications transmit information to and from the sever using synchronous requests. It means you fill out a form, hit submit, and get directed to a new page with new information from the server.
• With AJAX, when you hit submit, JavaScript will make a request to the server, interpret the results, and update the current screen. In the purest sense, the user would never know that anything was even transmitted to the server.
• XML is commonly used as the format for receiving server data, although any format, including plain text, can be used.
• AJAX is a web browser technology independent of web server software.
• A user can continue to use the application while the client program requests information from the server in the background.
• Intuitive and natural user interaction. Clicking is not required, mouse movement is a sufficient event trigger.
• Data-driven as opposed to page-driven.

Rich Internet Application Technology

AJAX is the most viable Rich Internet Application (RIA) technology so far. It is getting tremendous industry momentum and several tool kit and frameworks are emerging. But at the same time, AJAX has browser incompatibility and it is supported by JavaScript, which is hard to maintain and debug.

AJAX is Based on Open Standards

AJAX is based on the following open standards:

• Browser-based presentation using HTML and Cascading Style Sheets (CSS).
• Data is stored in XML format and fetched from the server.
• Behind-the-scenes data fetches using XMLHttpRequest objects in the browser.
• JavaScript to make everything happen.

Improve the knowledge about AJAX - Technologies

AJAX cannot work independently. It is used in combination with other technologies to create interactive webpages.

JavaScript

• Loosely typed scripting language.
• JavaScript function is called when an event occurs in a page.
• Glue for the whole AJAX operation.

DOM

• API for accessing and manipulating structured documents.
• Represents the structure of XML and HTML documents.

CSS

• Allows for a clear separation of the presentation style from the content and may be changed programmatically by JavaScript.

XMLHttpRequest

• JavaScript object that performs asynchronous interaction with the server.

Improve the knowledge about AJAX - Examples

Google Maps

A user can drag an entire map by using the mouse, rather than clicking on a button.

• http://maps.google.com/

Google Suggest

As you type, Google will offer suggestions. Use the arrow keys to navigate the results.

• http://www.google.com/webhp?complete=1&hl=en

Gmail

Gmail is a webmail, built on the idea that email can be more intuitive, efficient and useful.

• http://gmail.com/

Yahoo Maps (new)

Now it's even easier and more fun to get where you're going!

• http://maps.yahoo.com/

Difference in AJAX and Conventional CGI Program

Try these two examples one by one and you will feel the difference. While trying AJAX example, there is not discontinuity and you get the response very quickly, but when you try the standard GCI example, you would have to wait for the response and your page also gets refreshed.

AJAX Example:

 *  =  

Standard Example:

 *  =  

Improve the knowledge about AJAX - Technologies

AJAX cannot work independently. It is used in combination with other technologies to create interactive webpages.

JavaScript

• Loosely typed scripting language.
• JavaScript function is called when an event occurs in a page.
• Glue for the whole AJAX operation.

DOM

• API for accessing and manipulating structured documents.
• Represents the structure of XML and HTML documents.

CSS

• Allows for a clear separation of the presentation style from the content and may be changed programmatically by JavaScript.

XMLHttpRequest

• JavaScript object that performs asynchronous interaction with the server.

Improve the knowledge about Observer Design Patterns

Definition

Define a one-to-many dependency between objects so that when one object changes state, all its dependents are notified and updated automatically.

UML class diagram

---

Participants

    The classes and objects participating in this pattern are:

• Subject  (Stock)
  • knows its observers. Any number of Observer objects may observe a subject
  • provides an interface for attaching and detaching Observer objects.
• ConcreteSubject  (IBM)
  • stores state of interest to ConcreteObserver
  • sends a notification to its observers when its state changes
• Observer  (IInvestor)
  • defines an updating interface for objects that should be notified of changes in a subject.
• ConcreteObserver  (Investor)
  • maintains a reference to a ConcreteSubject object
  • stores state that should stay consistent with the subject's
  • implements the Observer updating interface to keep its state consistent with the subject's

---

Structural code in C#

This structural code demonstrates the Observer pattern in which registered objects are notified of and updated with a state change.

                 





using System;




using System.Collections.Generic;










namespace DoFactory.GangOfFour.Observer.Structural




{




  /// <summary>




  /// MainApp startup class for Structural 




  /// Observer Design Pattern.




  /// </summary>




  class MainApp




  {




    /// <summary>




    /// Entry point into console application.




    /// </summary>




    static void Main()




    {




      // Configure Observer pattern




      ConcreteSubject s = new ConcreteSubject();










      s.Attach(new ConcreteObserver(s, "X"));




      s.Attach(new ConcreteObserver(s, "Y"));




      s.Attach(new ConcreteObserver(s, "Z"));










      // Change subject and notify observers




      s.SubjectState = "ABC";




      s.Notify();










      // Wait for user




      Console.ReadKey();




    }




  }










  /// <summary>




  /// The 'Subject' abstract class




  /// </summary>




  abstract class Subject




  {




    private List<Observer> _observers = new List<Observer>();










    public void Attach(Observer observer)




    {




      _observers.Add(observer);




    }










    public void Detach(Observer observer)




    {




      _observers.Remove(observer);




    }










    public void Notify()




    {




      foreach (Observer o in _observers)




      {




        o.Update();




      }




    }




  }










  /// <summary>




  /// The 'ConcreteSubject' class




  /// </summary>




  class ConcreteSubject : Subject




  {




    private string _subjectState;










    // Gets or sets subject state




    public string SubjectState




    {




      get { return _subjectState; }




      set { _subjectState = value; }




    }




  }










  /// <summary>




  /// The 'Observer' abstract class




  /// </summary>




  abstract class Observer




  {




    public abstract void Update();




  }










  /// <summary>




  /// The 'ConcreteObserver' class




  /// </summary>




  class ConcreteObserver : Observer




  {




    private string _name;




    private string _observerState;




    private ConcreteSubject _subject;










    // Constructor




    public ConcreteObserver(




      ConcreteSubject subject, string name)




    {




      this._subject = subject;




      this._name = name;




    }










    public override void Update()




    {




      _observerState = _subject.SubjectState;




      Console.WriteLine("Observer {0}'s new state is {1}",




        _name, _observerState);




    }










    // Gets or sets subject




    public ConcreteSubject Subject




    {




      get { return _subject; }




      set { _subject = value; }




    }




  }




}


 
 
    
            

Output

Observer X's new state is ABC
Observer Y's new state is ABC
Observer Z's new state is ABC

---

Real-world code in C#

This real-world code demonstrates the Observer pattern in which registered investors are notified every time a stock changes value.

                 





using System;




using System.Collections.Generic;










namespace DoFactory.GangOfFour.Observer.RealWorld




{




  /// <summary>




  /// MainApp startup class for Real-World 




  /// Observer Design Pattern.




  /// </summary>




  class MainApp




  {




    /// <summary>




    /// Entry point into console application.




    /// </summary>




    static void Main()




    {




      // Create IBM stock and attach investors




      IBM ibm = new IBM("IBM", 120.00);




      ibm.Attach(new Investor("Sorros"));




      ibm.Attach(new Investor("Berkshire"));










      // Fluctuating prices will notify investors




      ibm.Price = 120.10;




      ibm.Price = 121.00;




      ibm.Price = 120.50;




      ibm.Price = 120.75;










      // Wait for user




      Console.ReadKey();




    }




  }










  /// <summary>




  /// The 'Subject' abstract class




  /// </summary>




  abstract class Stock




  {




    private string _symbol;




    private double _price;




    private List<IInvestor> _investors = new List<IInvestor>();










    // Constructor




    public Stock(string symbol, double price)




    {




      this._symbol = symbol;




      this._price = price;




    }










    public void Attach(IInvestor investor)




    {




      _investors.Add(investor);




    }










    public void Detach(IInvestor investor)




    {




      _investors.Remove(investor);




    }










    public void Notify()




    {




      foreach (IInvestor investor in _investors)




      {




        investor.Update(this);




      }










      Console.WriteLine("");




    }










    // Gets or sets the price




    public double Price




    {




      get { return _price; }




      set




      {




        if (_price != value)




        {




          _price = value;




          Notify();




        }




      }




    }










    // Gets the symbol




    public string Symbol




    {




      get { return _symbol; }




    }




  }










  /// <summary>




  /// The 'ConcreteSubject' class




  /// </summary>




  class IBM : Stock




  {




    // Constructor




    public IBM(string symbol, double price)




      : base(symbol, price)




    {




    }




  }










  /// <summary>




  /// The 'Observer' interface




  /// </summary>




  interface IInvestor




  {




    void Update(Stock stock);




  }










  /// <summary>




  /// The 'ConcreteObserver' class




  /// </summary>




  class Investor : IInvestor




  {




    private string _name;




    private Stock _stock;










    // Constructor




    public Investor(string name)




    {




      this._name = name;




    }










    public void Update(Stock stock)




    {




      Console.WriteLine("Notified {0} of {1}'s " +




        "change to {2:C}", _name, stock.Symbol, stock.Price);




    }










    // Gets or sets the stock




    public Stock Stock




    {




      get { return _stock; }




      set { _stock = value; }




    }




  }




}


 
      
            

Output

Notified Sorros of IBM's change to $120.10
Notified Berkshire of IBM's change to $120.10

Notified Sorros of IBM's change to $121.00
Notified Berkshire of IBM's change to $121.00

Notified Sorros of IBM's change to $120.50
Notified Berkshire of IBM's change to $120.50

Notified Sorros of IBM's change to $120.75
Notified Berkshire of IBM's change to $120.75