Ajax, or AJAX, is a web development technique used for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user requests a change. This is intended to increase the web page's interactivity, speed, functionality, and usability.

The name is shorthand for Asynchronous JavaScript and XML. Ajax is asynchronous in that loading does not interfere with normal page loading. JavaScript is the programming language in which Ajax function calls are made. Data retrieved using the technique is commonly formatted using XML, as reflected in the naming of the XMLHttpRequest object from which Ajax is derived.

Ajax is a cross-platform technique usable on many different operating systems, computer architectures, and Web browsers as it is based on open standards such as JavaScript and XML, together with open source implementations of other required technologies.

Constituent technologies

Ajax uses a combination of:

• XHTML (or HTML) and CSS, for marking up and styling information.
• The DOM accessed with a client-side scripting language, especially ECMAScript implementations such as JavaScript and JScript, to dynamically display and interact with the information presented.
• The XMLHttpRequest object is used to exchange data asynchronously with the web server. In some Ajax frameworks and in certain situations, an IFrame object is used instead of the XMLHttpRequest object to exchange data with the web server, and in other implementations, dynamically added <script> tags may be used.
• XML is sometimes used as the format for transferring data between the server and client, although any format will work, including preformatted HTML, plain text and JSON. These files may be created dynamically by some form of server-side scripting.

Like DHTML, LAMP, and SPA, Ajax is not a technology in itself, but a term that refers to the use of a group of technologies.

The "core" and defining element of Ajax is the XMLHttpRequest object, which gives browsers the ability to make dynamic and asynchronous data requests without having to unload and reload a page. Given XMLHttpRequest can eliminate the need for page refreshes, other technologies have become more prominently used and highlighted with this development approach.

Besides XMLHttpRequest, the use of DOM, CSS, and JavaScript provides a more-enhanced "single-page" experience.

History

The first use of the term in public was by Jesse James Garrett in February 2005. Garrett thought of the term when he realized the need for a shorthand term to represent the suite of technologies he was proposing to a client.

Although the term Ajax was coined in 2005, most of the technologies that enable Ajax started a decade earlier with Microsoft's initiatives in developing Remote Scripting. Referring to the idea as Inner-Browsing, Netscape Evangelism published an article in 2003 which presented ideas for implementing models in which "all navigation occurs within a single page, as in a typical application interface."[2] Techniques for the asynchronous loading of content on an existing Web page without requiring a full reload date back as far as the IFRAME element type (introduced in Internet Explorer 3 in 1996) and the LAYER element type (introduced in Netscape 4 in 1997, abandoned during early development of Mozilla). Both element types had a src attribute that could take any external URL, and by loading a page containing JavaScript that manipulated the parent page, Ajax-like effects could be attained. This set of client-side technologies was usually grouped together under the generic term of DHTML. Macromedia's Flash could also, from version 4, load XML and CSV files from a remote server without requiring a browser to be refreshed.

Microsoft's Remote Scripting (MSRS), introduced in 1998, acted as a more elegant replacement for these techniques, with data being pulled in by a Java applet with which the client side could communicate using JavaScript. This technique worked on both Internet Explorer version 4 and Netscape Navigator version 4 onwards. Microsoft then created the XMLHttpRequest object in Internet Explorer version 5 and first took advantage of these techniques using XMLHttpRequest in Outlook Web Access supplied with the Microsoft Exchange Server 2000 release.

The Web development community, first collaborating via the microsoft.public.scripting.remote newsgroup and later through blog aggregation, subsequently developed a range of techniques for remote scripting to enable consistent results across different browsers. In 2002, a user-community modification to Microsoft Remote Scripting was made to replace the Java applet with XMLHttpRequest.

Remote Scripting Frameworks such as ARSCIF surfaced in 2003 not long before Microsoft introduced Callbacks in ASP.NET.

In addition, the World Wide Web Consortium has several Recommendations that also allow for dynamic communication between a server and user agent, though few of them are well supported. These would include:

• The object element defined in HTML 4 for embedding arbitrary content types into documents, (replaces inline frames under XHTML 1.1)
• The Document Object Model (DOM) Level 3 Load and Save Specification [1]

Justification

The core justification for Ajax style programming is to overcome the page loading requirements of HTML/HTTP-mediated web pages. Ajax creates the necessary initial conditions for the evolution of complex, intuitive, dynamic, data-centric user interfaces in web pages—the realization of that goal is still a work in progress.

Web pages, unlike native applications, are loosely coupled, meaning that the data they display are not tightly bound to data sources and must be first marshaled (set out in proper order) into an HTML page format before they can be presented to a user agent on the client machine. For this reason, web pages have to be re-loaded each time a user needs to view different datasets. By using the XMLHttpRequest object to request and return data without a re-load, a programmer by-passes this requirement and makes the loosely coupled web page behave much like a tightly coupled application, but with a more variable lag time for the data to pass through a longer "wire" to the remote web browser.

For example, in a classic desktop application, a programmer has the choice of populating a tree view control with all the data needed when the form initially loads, or with just the top-most level of data—which would load more quickly, especially when the dataset is very large. In the second case, the application would fetch additional data into the tree control depending on which item the user selects. This functionality is difficult to achieve in a web page without Ajax. To update the tree based on a user's selection would require the entire page to re-load, leading to a very jerky, non-intuitive feel for the web user who is browsing the data in the tree.

Advantages of Ajax

Bandwidth usage

By generating the HTML locally within the browser, and only bringing down JavaScript calls and the actual data, Ajax web pages can appear to load relatively quickly since the payload coming down is much smaller in size. An example of this technique is a large result set where multiple pages of data exist. With Ajax, the HTML of the page (e.g., a table structure with related TD and TR tags) can be produced locally in the browser and not brought down with the first page of the document.

In addition to "load on demand" of contents, some web-based applications load stubs of event handlers and then load the functions on the fly. This technique significantly cuts down the bandwidth consumption for web applications that have complex logic and functionality.

Separation of data, format, style, and function

A less specific benefit of the Ajax approach is that it tends to encourage programmers to clearly separate the methods and formats used for the different aspects of information delivery via the web. Although Ajax can appear to be a jumble of languages and techniques, and programmers are free to adopt and adapt whatever works for them, they are generally propelled by the development motive itself to adopt separation among the following:

1. Raw data or content to be delivered, which is normally embedded in XML and sometimes derived from a server-side database.
2. Format or structure of the webpage, which is almost always built in HTML or XHTML and is then reflected and made available to dynamic manipulation in the DOM.
3. Style elements of the webpage: everything from fonts to picture placement are derived by reference to embedded or referenced CSS.
4. Functionality of the webpage, which is provided by a combination of:
   1. Javascript on the client browser (also called DHTML),
   2. Standard HTTP and XMLHttp or client-to-server communication, and
   3. Server-side scripting and/or programs using any suitable language preferred by the programmer to receive the client's specific requests and respond appropriately.

Disadvantages

Browser integration

The dynamically created page does not register itself with the browser history engine, so triggering the "Back" function of the users' browser might not bring the desired result.

Developers have implemented various solutions to this problem. These solutions can involve using invisible IFRAMEs to invoke changes that populate the history used by a browser's back button. Google Maps, for example, performs searches in an invisible IFRAME and then pulls results back into an element on the visible web page. The World Wide Web Consortium (W3C) did not include an iframe element in its XHTML 1.1 Recommendation; the Consortium recommends the object element instead.

Another issue is that dynamic web page updates make it difficult for a user to bookmark a particular state of the application. Solutions to this problem exist, many of which use the URL fragment identifier (the portion of a URL after the '#') to keep track of, and allow users to return to, the application in a given state. This is possible because many browsers allow JavaScript to update the fragment identifier of the URL dynamically, so that Ajax applications can maintain it as the user changes the application's state. This solution also improves back-button support. It is, however, not a complete solution.

Response-time concerns

Network latency — or the interval between user request and server response — needs to be considered carefully during Ajax development. Without clear feedback to the user,[8] smart preloading of data and proper handling of the XMLHttpRequest object, users might experience delays in the interface of the web application, something which they might not expect or understand. Additionally, when an entire page is rendered there is a brief moment of re-adjustment for the eye when the content changes. The lack of this re-adjustment with smaller portions of the screen changing makes the latency more apparent. The use of visual feedback (such as throbbers) to alert the user of background activity and/or preloading of content and data are often suggested solutions to these latency issues.

Search engine optimization

Websites that use Ajax to load data which should be indexed by search engines must be careful to provide equivalent Sitemaps data at a public, linked URL that the search engine can read, as search engines do not generally execute the JavaScript code required for Ajax functionality. This problem is not specific to Ajax, as the same issue occurs with sites that provide dynamic data as a full-page refresh in response to, say, a form submit (the general problem is sometimes called the hidden, or deep web).

Reliance on JavaScript

Ajax relies on JavaScript, which is often implemented differently by different browsers or versions of a particular browser. Because of this, sites that use JavaScript may need to be tested in multiple browsers to check for compatibility issues. It's not uncommon to see JavaScript code written twice, one part for IE, another part for Mozilla compatibles, although this is less true with the release of IE7 and with the now-common use of JavaScript abstraction libraries like the Prototype JavaScript Framework. Such libraries abstract browser-specific differences from the web developer.

The level of IDE support for JavaScript used to be poor, although is changing with more wide-spread use of tools like firebug, IE Developer Toolbar and Venkman.

An issue also arises if the user has switched off JavaScript support in the browser, thus disabling the functionality built into the page.

Web analytics

Many web analytics solutions are based on the paradigm of a new page being loaded whenever new or updated content is displayed to the user, or to track a series of steps in a process such as a check-out. Since Ajax alters this process, care must be taken to account for how to instrument a page or a portion of a page so that it can be accurately tracked. Analytics systems which allow for the tracking of events other than a simple page view, such as the click of a button or link, are the ones most likely to be able to accommodate a site which heavily utilizes Ajax.

Accessibility

Non-Ajax users would ideally continue to load and manipulate the whole page as a fallback, enabling the developers to preserve the experience of users in non-Ajax environments (including all relevant accessibility concerns) while giving those with capable browsers a much more responsive experience.

References

1. ^ Ajax: A New Approach to Web Applications. Adaptive Path (2005-02-18).
2. ^ Inner-Browsing: Extending the Browsing Navigation Paradigm. Netscape Netscape (2003-05-16).
3. ^ HTTPRequest-enabled RS. microsoft.public.scripting.remote newsgroup (2002-06-18).
4. ^ ARSCIF: A Framework for Asynchronous Remote–Script Callback Invocation. Sebastiano Vigna.
5. ^ Cutting Edge: Script Callbacks in ASP.NET. MSDN Magazine sujatha reddy ambati (2004-08-08).
6. ^ Uniform Resource Identifiers (URI): Generic Syntax. The Internet Society (August 1998).
7. ^ Uniform Resource Identifier (URI): Generic Syntax. The Internet Society (January 2005).
8. ^ Remote Scripting with AJAX, Part 2. O'Reilly XML.com (2005-08-22).

Links

• AJAX category on the Open Directory Project.
• Jesse James Garrett. “Ajax: A New Approach to Web Applications”, Adaptive Path
• AJAX:Getting Started by Mozilla Developer Center.
• Ajax Tutorial with get, post, text and XML examples.
• Attacking AJAX Applications Presentation on Ajax Security issues given at the Black Hat security conference.

This guide is licensed under the GNU Free Documentation License. It uses material from the Wikipedia.

For larger businesses and organizations, web development teams can consist of hundreds of people. Smaller organizations may only require a single permanent or contracting webmaster, or secondary assignment to related job positions such as a graphic designer and/or Information systems technician. Web development may be a collaborative effort between departments rather than the domain of a designated department.

Web development as an industry

Since the mid-1990s, web development has been one of the fastest growing industries in the world. In 1995 there were fewer than 10,000 web development companies in the United States alone and in 2005 there are over 30,000 such companies.[1] The web development industry is expected to grow over 20% by 2010. The growth of this industry is being pushed by large businesses wishing to sell products and services to their customers and to automate business workflow, as well as the growth of many small web design and development companies.

In addition, cost of Web site development and hosting has dropped dramatically during this time. Instead of costing tens of thousands of dollars, as was the case for early websites, one can now develop a simple web site for less than a thousand dollars, depending on the complexity and amount of content.  Smaller Web site development companies are now able to make web design accessible to both smaller companies and individuals further fueling the growth of the web development industry. As far as web development tools and platforms are concerned, there are many systems available to the public free of charge to aid in development. A popular example is the LAMP (Linux, Apache, MySQL, PHP), which is usually distributed free of charge. This fact alone has manifested into many people around the globe setting up new Web sites daily and thus contributing to increase in web development popularity. Another contributing factor has been the rise of easy to use WYSIWYG web development software, most prominently Microsoft FrontPage or Adobe Dreamweaver. Using such software, virtually anyone can develop a Web page in a matter of minutes. Knowledge of HyperText Markup Language (HTML), or other programming languages is not required, but recommended for professional results.

The next generation of web development tools uses the strong growth in LAMP and Microsoft .NET technologies to provide the Web as a way to run applications online. Web developers now help to deliver applications as Web services which were traditionally only available as applications on a desk based computer.

Instead of running executable code on a local computer, users are interacting with online applications to create new content. This has created new methods in communication and allowed for many opportunities to decentralize information and media distribution. Users are now able to interact with applications from many locations, instead of being tied to a specific workstation for their application environment.

Examples of dramatic transformation in communication and commerce led by web development include e-commerce. Online auction sites such as eBay have changed the way consumers consume and purchase goods and services. Online resellers such as Amazon.com and Buy.com (among many, many others) have transformed the shopping and bargain hunting experience for many consumers. Another good example of transformative communication led by web development is the blog. Web applications such as WordPress and b2evolution have created easily implemented blog environments for individual Web sites. Open source content systems such as Typo3, Xoops, Joomla, and Drupal have extended web development into new modes of interaction and communication.

Typical Areas

Web Development can be split into many areas and a typical and basic web development hierarchy might consist of;

• Client Side Coding
  • CSS
  • XHTML (in accordance to modern web design standards, XHTML's use is replacing the older HTML)
  • Javascript
• Server Side Coding
  • PHP and MySQL
  • ASP and MSSQL
  • ASP.NET and MSSQL
  • CGI and/or Perl
  • Java, e.g. J2EE or WebObjects
  • Ruby, e.g. Ruby on Rails
  • ColdFusion

• In practice, many web developers will also have interdiscipinary skills / roles, including:
  • Graphic design / web design
  • Information architecture and copywriting/copyediting with web usability, accessibility and search engine optimisation in mind
  • Project management, QA and other aspects common to IT development in general

The above list is a simple website development hierarchy and can be extended to include all client side and server side aspects. It is still important to remember that web development is generally split up into client side coding covering aspects such as the layout and design, then server side coding, which covers the website's functionality and back end systems.

Looking at these items from an "umbrella approach", client side coding such as XHTML is executed and stored on a local client (in a web browser) whereas server side code is not available to a client and is executed on a web server which generates the appropriate XHTML which is then sent to the client. As the nature of client side coding allows you to alter the HTML on a local client and refresh the pages with updated content (locally), web designers must bear in mind the importance and relavence to security with their server side scripts. If a server side script accepts content from a locally modified client side script, the web development of that page shows poor sanitization with relation to security.

Security

Web development takes into account a lot of things, such as data entry error checking through forms, as well as sanitization of the data that is entered in those fields. Malicious practices such as SQL injection can be executed through users with ill intent yet only primitive knowledge of web development as a whole. Not only this, but scripts can be exploited to grant unauthorized access to the hacker to gain information such as email addresses, passwords and protected content.

Some of this is dependent on the server environment (most commonly Apache or Microsoft IIS) on which the scripting language, such as PHP, Ruby or ASP is running, and therefore is not necessarily down to the web developer themselves to maintain. However, stringent testing of web applications before public release is encouraged to prevent such exploits from occurring.

Links

• Set of tutorials for developing a web app (PHP & MySQL) Part 1 Part 2 Part 3
• Web Client Software Factory — A discussion on how to create composite web and page flow applications on the Microsoft platform.
• Web Site Development Process - The life cycle steps

This guide is licensed under the GNU Free Documentation License. It uses material from the Wikipedia.