ajax Technology

To date, Ajax - the most modern technology in web design. And this fashion has come to seriously and permanently. While we note that only a single case of Ajax-interfaces, but after a couple of years Ajax technology becomes the de facto standard in web site design. That said David Smith, vice president of Gartner, speaking at the annual Gartner regional conference in Tel Aviv.

According to him, the use of Ajax is becoming more and more commonplace affair. There is no need to invest heavily in the development, as the market appeared comfortable and simple package for the development of Ajax-applications. The sin of no benefit, because Ajax offers the simplest and cheapest way to improve the visual appeal of the website.

Ajax - is more than just technology that is encrypted in abbreviature «Asynchronous JavaScript and XML». In fact, Ajax - it is an integral part of what is called «vebom next generation», that is, Web 2.0. That is why an analyst with Gartner attaches to this programming technique is of great importance. Sites that do not meet the new requirements will inevitably begin to experience difficulties.

In fact, in terms of ease of use Ajax sites and sites of previous generations - is heaven and earth. This fact is easy to verify if to check for the most famous Ajax-applications, for instance, Gmail, Google Maps or the new beta version of Yahoo! Mail.

Of course, Ajax technologies exist and negative sides. For example, does not always work correctly Buttons «Back» Ajax-browser applications. Or the inability to save a bookmark for a «page» site. In addition, Ajax-applications necessarily require that the user’s browser has been activated function scripts JavaScript.

But none of those negative things does not prevent the emergence of more and more applications Ajax. In his report to David Smith said that virtually all the new startups that have declared their involvement in Vebu 2.0 (Zimbra, 37 Signals, Flickr, SocialText and others), rely heavily on technology Ajax.

Of all the experts analysis company Gartner makes this conclusion: from 80%-term probability of 2008 mu-year sites in the style of Ajax become the dominant type of interfaces for Web applications.

It is clear that the web sites in a variety of capacities in a hurry to begin renovation design. But experts warn: conventional redesign is not enough. To get a significant effect, you need to realize and other aspects of Web 2.0, including change in the spirit of Web 2.0 business culture itself. For example, the heads of companies may have blogs to communicate with staff. This is a good beginning for the reform of business.

The official blog Opera Web Applications, one of the developers described the new feature, which is integrated in Opera 9. This is very useful function reduces the load on the server, and conserves bandwidth when Ajax-applications.

In the traditional implementation of Ajax-applications, it is anticipated that the browser sends a HTTP-continuous requests to a server in the hope of receiving new information. Sometimes these requests receive a response, but in general they only create unnecessary burden on the server.

In Opera 9 browser instead opens a persistent connection, and the server itself can send a new customer information without prompting. Thus, the need for a continuous stream of requests to the server.

A new feature called Server-Sent Events (SSE) and is part of specifications for Web Applications 1.0.

For more than a year, a special unit Microsoft strenuously working to create Ajax-branding tool for ASP.Net. Now the work came to an end. Microsoft representatives have noted a great interest in the new product. In the few months before the preliminary version is available, recorded more than 250 thousand downloads. Scott Guthrie (Scott Guthrie), the general manager of units of tools for Web design Microsoft has published in his blog up to date information on the timing of final release Atlas 1.0 and the features of this product.

Scott Guthrie said that Atlas 1.0 will receive full technical support (24/7/365) and a standard ten-year life cycle. Tools will be compatible with Visual Studio 2005, and in the future, we plan to fully integrate it into the next version of Visual Studio, code-named Orcas, which will be released next year.

Plans for the company - the release of Ajax-tools around the end of the year. First, a beta version, then - release candidate, but since this is the final date of the official release. To meet such deadlines in the package Atlas 1.0 will include the most basic functions. They will be selected from the three basic components, which are scheduled to issue separate from each other. Now officially confirmed the names of those components.

1. A set of JavaScript scripts ready to go, called Microsoft AJAX Library. The scripts will run on any browser and will be compatible with any Web server, including under the PHP and ColdFusion.

2. Server Extensions, integrated with ASP.NET, will receive the title of ASP.NET 2.0 AJAX Extensions. These components will be integrated into the next version of ASP.NET.

3. Atlas Control Toolkit today is a collection of free open-components subsidiary in relation to the server extensions. In the future, the name of a set of changes to ASP.NET AJAX Control Toolkit.

Atlas toolkit will be 100% support all platforms and all browsers. He can become very popular among developers who through it could add to this functionality applications ASP.Net Ajax.

Google has released a new version of software interfaces for access to its main search engine. A distinctive feature of JavaScript libraries is to support technology Ajax.

Using the library Google Ajax Search API can be integrated in your site, many functions of search engine Google, including search vebu, local search, video search and on blogs. Moreover, it is possible to combine search results from all these sources.

Here’s an example in practice is the realization of software interfaces Ajax with the integration of various search results. In the search box on top enters a query, and the results are updated without restarting the page.

The developers are able to customize the search box to your taste: choose those or other sources of search, customize the look. To access the interface, the developer must register and obtain a key API. Library are free to use even on commercial websites, with the exception of sites with paid content and corporate sites.

Google Ajax Search API supports browsers Firefox, Safari and IE 6. The Library has just published a beta version, it is still early, experimental stage of development (version 0.1). It is likely that in future it will be seriously refined and improved. Version 1.0 navernyaeka will include major changes in the code and will likely also deliver contextual advertising along with search results.

But now, some experts suggested that Google Ajax Search API - this may be the best program interfaces of all that ever produced by Google. Competing with them can only interfaces for maps of Google Maps, became the foundation for thousands of web applications of various types. But mapping all the same is very limited in scope, so that the library Google Ajax Search API should become much more popular.

It is worth noting the fact that Google planned to adopt policies that support third-party developers. They are constantly opening up program interfaces for different services and, more recently, it seems, has accelerated. Most recently been released Ends Gdata (protocol data exchange for online organizer) and AdSense API, and now - powerful interface Ajax Search.

The search engine Nigma, developed by students and graduate students of Moscow State University. Lomonosov Moscow State University, announced the start of testing Ajax-interface to display the results of clustering.

«We are always interested in new technology, and we could not ignore the growing popularity of Ajax, - said Victor Lavrenko, head Nigma.Ru. - On the other hand, there is a hypothesis that the user interface that is important in the results, so we decided to test this hypothesis. Now the interface is in alpha testing and we are happy to hear suggestions for improvement ».

Of all the methods to develop Web interfaces that have emerged in recent years, none can match with Ajax on their popularity. Through the use of Ajax can create Web sites that look and behave like a normal program on a PC. Information on the screen is updated without rebooting the page. Convenience Ajax interface familiar to every user applications such as Gmail, Flickr or Netflix.

For developers using Ajax creates difficulties due to the fact that every browser in its own processes XML, but it is all based on XML data in the Ajax-interfaces. Each solves this problem in its own way. For example, the blog for developers Webmonkey describes this way: as an XML parser to use Flash. This technique is called the development Fjax, ie Flash, plus Ajax.

Using Fjax applications can be made more compact, removing them from the code specific to certain versions of browsers. This alternative establishment of Web 2.0 sites. Of course, to view these sites the user has to be installed Flash Player.

In the blog Webmonkey of Technology Fjax tell programmers Jay and Steve McDonald, who use it in their daily work. They stress that Fjax - is extremely non-standard way to use Flash, that is, this is not focused on Flash designers and is not intended to create a flash site in the traditional sense of that term. This is his principle opposed to the creation of specialized technology of interactive sites using Flash, for example, Adobe Flex. In addition to Flex, there are other tools for the integration of Flash and Ajax, such as Spry. All they have nothing to do with Fjax.

In the case of Fjax Flash technology is used exclusively to carry out the «rough work», and not for visualization. That is, you do not see any flash movies, with the exception of a single transparent SWF-animation of 1 × 1 pixel, which is loaded only to get XML from the server and deliver the script ready HTML.

Take a simple example. We have a page where I want to display a list of people, when I click the button «Get people» and add a new person in the database by typing its name and clicking on «Add person». Here’s how it looks:

To get started, create a button «Get people» and a list of people who will download:
<input type=”button” id=”getPeople” value=”Get People” />
<ul id=”people_list”>
* This source code was highlighted with Source Code Highlighter.
Next, write an event handler «page loaded», which establishes the handler click on the button.
$ (function () (
     $ ( “# getPeople”). click (function () (
         $. getJSON ( “/ Home / People”, null, getPeople);
     ));
));
* This source code was highlighted with Source Code Highlighter.
When the button is pressed, we initsializirum request JSON data path / Home / People, which mapitsya to the method of People controller Home.
[AcceptVerbs (HttpVerbs.Get)]
public ActionResult People ()
(
     var db = new DataClasses1DataContext ();
     return Json (db.Persons);
)
* This source code was highlighted with Source Code Highlighter.
All we are doing here - so get a list of people from the database (using the LINQ to SQL) and returns them as JSON. When the response received by the browser function is called getPeople, as we have pointed out that in the method getJSON. The code functions getPeople:
function getPeople (people) (
     $ ( “# people_list”). text (”");
     $. each (people, function (i) (
         $ ( “# people_list”). append ( “<li>” + this.Name + “</ li>”);
     ));
)
* This source code was highlighted with Source Code Highlighter.
Data from the server come into it as a parameter people. All that we need to do - it itererovat through the collection and for each of its elements add a tag <li> to our list of people. As you can see, the interaction of ASP.NET MVC and jQuery is very simple - no manual conversion of data from C # objects in JavaScript objects do not have to.

And what about updating the data? It is equally simple. To begin with we need a little HTML code: box and a button.
<label> Name <input type=”text” id=”name” /> </ label> <br />
<input type=”button” id=”addPerson” value=”Add Person” />
* This source code was highlighted with Source Code Highlighter.
Another handler pressing.
$ ( “# addPerson”). click (function () (
   var name = $ ( “# name”) [0]. value;
   if (name == “”) (
     alert ( “You must provide a name”);
     return;
   )
   var person = (Name: name);
   $. post ( “/ Home / People”, person, null, “json”);
));
* This source code was highlighted with Source Code Highlighter.
At this time we used a useful function post, to send our svezhesozdanny JSON object to / Home / People method POST. As used POST, this request will be caught by our side method People with attribute AcceptVerbs [HttpVerbs.Post].
[AcceptVerbs (HttpVerbs.Post)]
public ActionResult People (string Name)
(
   var db = new DataClasses1DataContext ();
   var person = new Person (Name = Name);
   db.Persons.InsertOnSubmit (person);
   db.SubmitChanges ();
   return null;
)
* This source code was highlighted with Source Code Highlighter.
All that we have done on the server to get data from the query is called a parameter of this method as well as the field of JSON object, that is Name. ASP.NET MVC automatically find and give compliance, we need the data. If you need to use complex JSON object, you can deserializovat it using the built-databinding. Just create the object for the database and keep it.

I later took Ajax, but with a bunch of ASP.NET MVC + jQuery adding such functions as easy and pleasant as a breath of fresh wind.

Demo-Solution, you can download here: http://static.mikehadlow.com/JQueryAjax.zip

Imagine how to build simple online photo gallery. In simple words, these are two separate pages: a list of all the photographs and viewing individual photos. When you move from one page to another, you have to expect full page reloading. Interactivity is lost.

Another approach: use AJAX. The whole logic of navigating the pages moved to JavaScript. In the first address to the gallery page is fully loaded, with follow-up users to update only the correct side of the page.

For this approach has drawbacks:

The complex logic of JavaScript.
Not working navigation browser back / forward.
A separate photo does not have its own URL address to go directly to.
The last two shortcomings are the first by more sophisticated JavaScript-code. The article I will show how to develop annex easiest galleries using the pattern of Page-View. The main advantage of the approach - well scalable object-oriented JavaScript-code.

Visually gallery will look like this:

Pattern Page-View

So, what is the basic idea. Enter the two abstraction. Page - a whole page that requires a full restart in the event of renewal. In the annex it alone - the whole gallery. View - a separate submission page. In the case of two galleries: the submission of the list, and individual photographs. Thus, one page corresponds to a number of representations, but at any one time to only one of them. Below is a chart of classes and hierarchies Page View:

Let’s try to understand that it is depicted.

To begin with, as it is used. Below is a snippet of code html-only page in our application as follows:

<! - ListView ->
<div id=”list_container” style=”display:none;”>
</ div>

<! - ImageView ->
<div id=”image_container” style=”display:none;”>
   <p> <a id=”back_link” href=”javascript:;”> <<Back to list </ a> </ p>
   <p id=”img_place”> </ p>
</ div>

<script language=”javascript”>
   $ (document). ready (function ()
   (
     var p = new Gallery.Page ();
     p.Init ();
   ));
</ script>

* This source code was highlighted with Source Code Highlighter.

In the code sets the markup for the two representations: ListView and ImageView. Then a copy of the class is initialized Gallery.Page, representing a page of the gallery. $ (document). ready - the construction of the library jQuery, which allows to perform a given function after downloading the entire contents of the document, in other words, when the entire document object model (DOM) document will be ready for use. Library jQuery is repeatedly used in the future. Her challenges easily find out by the symbol ‘$’.

Consider now the description of the class PageBase.

/ / * Abstract class PageBase *
/ /
/ / Represents an entire page.
function PageBase ()
(
)

/ / Array of page’s views.
PageBase.prototype._views = ();

PageBase.prototype._AddView = function (view)
(
   this._views [view.GetTypeName ()] = view;
)

* This source code was highlighted with Source Code Highlighter.

Field _views - associative array, the key of which is the name of the presentation, value - a copy of a particular class ViewBase. This array is filled with initialization Divisions PageBase c using the _AddView.

/ / Performs page initialization.
PageBase.prototype.Init = function ()
(
   var t = this;
   $. history.init (function (hash) (t._PageLoad (hash);));
)

PageBase.prototype._currentViewName = ();

/ / Handles page load event.
PageBase.prototype._PageLoad = function (hash)
(
   var params = PageBase._ParseHash (hash);

   if (! this._views [params.view])
   (
     / / First view is the default one
     for (var viewName in this._views)
     (
       PageBase.Goto (viewName, params);
       return;
     )
   )

   / / Checks if the passed view has changed
   if (this._currentViewName & & params.view! == this._currentViewName)
   (
     this._views [this._currentViewName]. Hide ();
   )

   this._currentViewName = params.view;
   this._views [params.view]. Show (params);
)

* This source code was highlighted with Source Code Highlighter.

In the method Init occurs initialization plug History for jQuery. This plugin allows you to rewrite url-page, depending on the current View and its parameters, as well as work correctly navigating back / forward.

The closed (private) method _PageLoad selects the appropriate settings display url and it shows, if necessary, to conceal the previous View.

PageBase.Goto = function (viewName, params)
(
   params.view = viewName;
   var hash = PageBase._MakeHash (params);
   $. history.load (hash);
)

* This source code was highlighted with Source Code Highlighter.

Goto - static function, the transition to a View. I draw the attention that the parameters which are all View - this is an associative array. While the url parameters (hash) recorded in a row. For the serialization and deserialization of parameters used methods PageBase._MakeHash and PageBase._ParseHash, respectively.

Go to the concrete implementation class PageBase, that is to Gallery.Page:

/ / * Namespace Gallery *
var Gallery = Gallery | | ();

/ / * Class Page *
/ /
/ / Represents an entire gallery page.
Gallery.Page = function () / / extends PageBase
(
   PageBase.call (this);
)
OO.Extends (Gallery.Page, PageBase);

/ / * Public methods *

Gallery.Page.prototype.Init = function ()
(
   this._AddView (new Gallery.ListView ());
   this._AddView (new Gallery.ImageView ());
  
   Gallery.Page.superclass.Init.call (this);
)

* This source code was highlighted with Source Code Highlighter.

Feature OO.Extends - this pattern of inheritance in JavaScript. Realization borrowed from the book Pro JavaScript Design Patterns (sponsors: Yahoo engineers and Google). That is the best book on the PLO in JavaScript from what I know. Highly recommended.

It is time to deal with class hierarchy View:

/ / * Abstract class ViewBase *
/ /
/ / Represents a single view on a page.
function ViewBase ()
(
)

/ / * Private / protected fields *

ViewBase.prototype._params = null;
ViewBase.prototype._container = null;

/ / * Public methods *

ViewBase.prototype.GetViewName = function ()
(
   throw “ViewBase.GetViewName is not implemented.”;
)
ViewBase.prototype.Show = function (params)
(
   if (! this._params) / / lazy initialization
   (
     this._Init ();
     this._params = ();
   )

   if (! ViewBase._CompareParams (params, this._params))
   (
     this._params = params;
     this._Refresh ();
   )

   this._ShowImpl ();
)

ViewBase.prototype.Hide = function ()
(
   this._container.hide ();
)

/ / * Private / protected methods *

ViewBase.prototype._ShowImpl = function ()
(
   this._container.show ();
)

/ / View initialization. Container must be specified here (in subclasses).
ViewBase.prototype._Init = function ()
(
   throw “ViewBase._Init is not implemented.”;
)

ViewBase.prototype._Refresh = function ()
(
   throw “ViewBase._Refresh is not implemented.”;
)

* This source code was highlighted with Source Code Highlighter.

Field _container - it jQuery object representing the DOM-element container, some in html-layout of the page. Initialize fields should occur in the function Init subclasses.

Thanks to verify the parameters of equality, using the mechanism implemented ViewBase._CompareParams cache: presentation (View) is not updated if the settings have not changed since last time.

Options drop-out exception, no more than an abstract methods of class. Thus, all that ostaetcya do in Division ViewBase - define the implementation of GetViewName, _Init, _Refresh. Here’s how it is done in the classroom ListView:

/ / * Namespace Gallery *
var Gallery = Gallery | | ();

/ / * Class ListView *
/ /
/ / Represents view on a page.
Gallery.ListView = function () / / extends ViewBase
(
   ViewBase.call (this);
)
OO.Extends (Gallery.ListView, ViewBase);

/ / * Public methods *

Gallery.ListView.prototype.GetTypeName = function ()
(
   return “list”;
)

/ / * Private / protected methods *

Gallery.ListView.prototype._Init = function ()
(
   this._container = $ ( “# list_container”);
)

Gallery.ListView.prototype._Refresh = function ()
(
   var t = this;
   $. ajax (
   (
     url: “/ Home / List”,
     dataType: “json”,
     success: function (data) (t._ListLoaded (data);)
   ));
)

Gallery.ListView.prototype._ListLoaded = function (data)
(
   this._container.empty ();
   for (var i = 0; i <data.Images.length; i + +)
   (
     this._container.append ( “<p> <a href=’javascript:;’>” + data.Images [i] + “</ a> </ p>”);
   )
   $ ( “a”, this._container). click (function () (PageBase.Goto ( “image”, (img: $ (this). text ()));));
)

* This source code was highlighted with Source Code Highlighter.

Method _Refresh to update the page turns to a Web service, located on the url / Home / List. Please note that due to the above arrangement is limited request cache at the opening of the list for the first time.

Below is a code implementing the Web service on the ASP.NET MVC:

[AcceptVerbs (HttpVerbs.Get)]
public JsonResult List ()
(
     var images = new List <string> ();
     foreach (var file in Directory.GetFiles (HostingEnvironment.ApplicationPhysicalPath
                                             + “/ Content / Images /”))
     (
         images.Add (Path.GetFileName (file));
     )

     return Json (new (Images = images));
)

* This source code was highlighted with Source Code Highlighter.

The complete application code (VS 2008, ASP.NET MVC) can be downloaded here.

JS-scripts can also be downloaded separately.

Summarizing

Thanks patterns Page-View managed to solve the mentioned problems in the beginning of this article. Indeed, despite the fact that the code was a fairly cumbersome, the main part of it is concentrated in the basic abstraction (PageBase and ViewBase). Thus, the addition of new pages (Page) and representations (View) becomes a trivial task.

Another positive result applying pattern. Please note that the server application logic is concentrated in the method of List. The page containing the markings, static. This allows excellent scalable Web applications. The dynamic behavior of the server is limited to processing ajax-queries. The rest of the content, including html-partitioning and js-code, static, and thus can be easily distributed on different servers cluster.

I want to humbly reminded that a premiere of another Prince of Persia.

Literally a few hours prior starts ordering.

Departments must few minutes to see the section on the media, then a deep bow to Jordan Mechner and the entire team of Ubisoft.

If you do not play Karateka, do not you ever heard of children from generation Pravetz do not enjoy the crystal sound of his first Adlib, have in the living room immersed in powder or Commodore Amiga, not install PC-DOS disks from do not use Gopher Minutes Are you hanging on the Maximus BBS, not to pay 100 USD for 5 ¼ floppy drive, no installed slackware at least version 3.0, then nothing prevents you to ikefish most of this beautiful game.

If you’re still playing time The shadow and the flame still using a PC, Mac or console, it will certainly come back to the future with the new prince.

If not, then no man.