AJAX The Future of Web Development?

AJAX The Future of Web Development? Anders Moberg (dit02amg), David Mörtsell (dit01dml) and David Södermark (dv02sdd). Assignment 2 in New Media D, Department of Computing Science, Umeå University. 2006-04-28 Abstract AJAX is a new technology which is important to the web 2.0 concept. It is a technology that enables partial and less static web page updating. AJAX is based on already existing generally known technologies such as HTML, XML, JavaScript, CSS and Server-side scripting. Some of the benefits with AJAX are that the user gets more instant feedback, and the web applications require less bandwidth since the web page is only partially updated. This paper aims to compare traditional dynamic web development with the new AJAX technology, to answer the question: Is AJAX the next generation of web development, or just a minor tweak of today s development practices?. The faster feedback and increased interactivity enabled by AJAX is something that the future users will demand. Because of this, we conclude that AJAX should be learnt by web developers. Introduction Asynchronous JavaScript And XML (AJAX) is a development technique for creating interactive web applications. It uses a collection of technologies that makes it possible to have more efficient interaction in dynamic web applications than in traditional web development. The technologies combined in AJAX are the HyperText Markup Language (HTML), Cascading Style Sheets (CSS), JavaScript, extensible Markup Language (XML) and the HTTPRequest method of the HyperText Transfer Protocol (HTTP). These technologies will be explained in the next section. Today, most web applications request an entire page each time a user clicks a link and/or change something on a web page. AJAX technology makes it possible to request information chunks from a web server and update only part of a web page. This can make web sites smaller, faster and more enjoyable to use, not having to wait for entire pages to load all the time. This paper aims to compare traditional dynamic web development with the new AJAX technology, to answer the question: Is AJAX the next generation of web development, or just a minor tweak of today s development practices?. That is, are the benefits of this technology so valuable that it is worth having to deal with the problems and the hazzle of learning the technology? The benefits and problems of traditional development of dynamic web applications and of development of web applications using AJAX are identified. Then these benefits and problems are compared and discussed. Finally, a conclusion is made whether AJAX should be learnt by web developers as the next step in the development of dynamic applications for the web. Underlying technology To fully understand how and why AJAX is used, we first need a basic understanding of the underlying technologies. The following sections contain brief introductions to the different technologies that are important to AJAX. Each technology s specific role in AJAX is also described. 1

HTML Description HTML is short for HyperText Markup Language and is the normal way to format content on web pages. The syntax is simple, if there are some text you want to make bold then it is just to surround the text with a pair of tags, such as <b>text</b>. The first tag tells the parser that the following text should be viewed as bold and the end tag tells the parser to stop formatting the text as bold. This type of paired tags are very common in the language, because much of the possible usage is to format spans of text, i.e. paragraphs, italics, hyperlinks and underlines. But of course there are other kinds of tags too, such as the image tag which is unpaired and in its simplest form it is just placed in the document wherever the author wants to put an image. The form of this tag is <img src= url >. Another common unpaired tag is the linebreak. It symbolizes the end of a line or a hit on the return button. Both these tags can be written as pairs, <img></img> and <br></br> but because there is nothing between the start and end tag the language allows the use of them without the end tag. The hyperlink is an important part of the web. A hyperlink is a text or an image which leads to another page or another part of the same page when a user clicks on it. A text could be turned into a hyperlink if it is placed inside a hyperlink tag: <a href= index.html >text</a>. HTML is about to be history in favor of its successor: the Extensible Hypertext Markup Language (XHTML). But the differences are few. The syntax and the tags are the same but XHTML is compatible with the Extensible Markup Language (XML) which will be explained later. One of the changes in XHTML from HTML is that the use of tags without a end tag are not allowed anymore, so tags like <br> are illegal but if it is rewritten <br /> it follows the XML standard with start and end, but more about that in the XML section. This simple approach on HTML may present it as a text with tags to format some spans of this text, but it is not actually a complete picture of the language. For example every web page starts with a lot of tags describing the page for the parser. How this structure can look like will be shown in the Examples subsection below. History This markup language has a short but interesting history, as late as 1993 a draft of the language was presented by the Internet Engineering Task Force. The work with the language has since then gone through a lot of updates and smaller revolutions. HTML has been developed to a version of 4.01 which was published by the World Wide Web Consortium (W3C) in late 1999. Since then the work with the language has been focused on the XML compatible version XHTML. The 1.0 version of XHTML was published in 2000 and the 2.0 version is a working draft which can be found on the W3C website since May 2005 (W3C, 2006). Use before AJAX HTML has been a fundamental piece of the web from the beginning, and will probably be so for many years more due to its simplicity and how well spread the standard has been. Until a couple of years ago the layout and a lot of the design were made directly in HTML. Layout was managed by tables and the text was managed by the font-tag. Nowadays another layer have been introduced and commonly used, this layer is called Cascading Style Sheets (CSS) and it gives the designer many possibilities. A simple file can be created and included on every page. 2

This file can include information on how the layout should look and how the text should be formatted. There is also a possibility to redefine fundamental parts of the HTML tags. The freedom and simplicity this gives to the code of the webpage is something that probably will make the language even more popular than it already is. In whatever way you have been using HTML before, one of the biggest problems with HTML is that it has been static. That is, if information has been formatted and viewed, it is going to stay that way until the page is reloaded. This shortcoming is one of the things AJAX handles. Examples A complete xhtml document. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>page Title</title> </head> <body> <h1>heading of this test page</h1> <p> A paragraf with some text and a hyperlink to <a href="http://www.umu.se">umeå Universitet</a></p> </body> </html> This example shows how easy it is to create an xhtml-document, and the whole structure of the formal tags that exists outside of the body tags, within the actual content are presented. Examples of HTML non paired tags This is some sample text <br> that should be broken so it can continue on the next line. <img src="ajax.jpg"> Examples of XHTML non paired tags This is some sample text <br /> that should be broken so it can continue on the next line. <img src="ajax.jpg" /> These two examples show how xhtml differs from html in the way that every tag in xhtml must be stopped, that is what that / does in the end of the tag. It is short for e.g. <br></br> A few examples of tags <h1>a Heading</h1> <h3>a Smaller heading</h3> <p> A paragraph</p> <a href="ajax.html">a hyperlink</a> <ol> </ol> <li>list item one in a ordered list </li> <li>list item two in a ordered list </li> <table width="300" border="1"> <tr> 3

<td>a table with tow rows</td> </tr> <tr> <td>this is the 2nd row</td> </tr> </table> This example shows headings, a paragraph, a link, an ordered list, and a table. Use within AJAX As discussed above a shortcoming of the HTML is its static nature. But with the XHTML approach the document can be parsed like an ordinary XML document. This in combination with client-side scripting gives the possibility to change content on a formatted page that in the same moment is viewed in a browser window. Client-side scripting Client-side scripting are scripts executed in the client, in the web scenario it is most often executed in the web browser. Examples of these kinds of scripting languages are JavaScript and VBScript. JavaScript is the language that the examples will be written in and it is also more common on the web. The JavaScript language is small and competent. Due to its built-in abilities for math and logic in combination with the access to the HTML Document Object Mode, DOM, and the form elements in HTML generates a lot of possibilities for a creative use of the technique. A few examples will be presented in a following sub section. The scripts are written inside an HTML tag called <script> written entirely between the start and the stop tag or linked in by an attribute in the script tag. If the file is linked in it is possible to apply the scripts to many different sites, and if it is preferred make some additional code inside the tag for the individual page. As a language JavaScript has a lot of the common tools like if-statements, for and while loops, Boolean operators, functions and other important pieces. History JavaScript was first released under the name LiveScript as part of Netscape Navigator 2.0 (Andreessen, 1998). The name JavaScript is based on the Java technology used in Netscape at the time. JavaScript has been released in versions 1.0 to 1.5 (Nihonsoft) and a 1.6 version is in a beta phase (Mozilla, 2006). Examples Examples of the syntax <script language="javascript1.2"> var x = 20; while (x>0) { x--; } if(x==0){ document.write(x); } 4

</script> This is a very simple example to show the syntax of the JavaScript language. Example of functions and regexp <script> function verify(_f) { var _x=_f.numbers.value; var _exp = new RegExp(/^\d+$/); var _test=_exp.test(_x); if(_x.length!=9)alert("length not correct"); else if(!_test)alert("non digits found"); else alert("this value is okay."); } </script> This example checks if a form field contains nothing but nine digits. Interesting parts is the function and the regexp support. 1 Use before AJAX Clientside scripts have for a long time been used to validate form input on sites before the information has been sent to the server side for processing. It has also been an important part of the dhtml dynamic html concept. Which is a combination of html, dom, css and client side scripts which goal is to make more interactive web pages. The relation between HTMLs event listeners like onclick and onmouseover has been used to trigger client side functions which in inside the dhtml concept can do a lot of fun things on the webpage. A few examples are, changing colors, moving pictures and create simpler animations. Use within AJAX If we extend the DHTML concept with a connection to a server-side script or application it is easier to understand client-side-scripts part in AJAX. DHTML allow us to change the content on a static webpage without reloading and reformat it and with AJAX it is possible to request information from the server-side and update the content the same way as with DHTML. It may look like a small and simple feature but the possibilities none the less many. XML XML stands for extensible Markup Language, and just like HTML it is a Markup Language, a way of describing how to process the data (Marchal, 2002). XML was designed to describe data with focus on structure, as opposed to HTML that was designed to display data with focus on appearance (w3schools, XML, 2006). The solution to the problem with the need for many different tags was solved by having no predefined tags. Instead of having predefined tags like for example the HTML tags <p>, <h1>, and <hr>, the XML developers have to define their own tags (w3schools). So for example, if a developer needs to make an XML document about food, he/she could choose to define tags like <dinner>, <vegetables>, or whatever tag that could be useful in this context. These tags 1 http://www.js-examples.com/page/javascripts example.html?view=901 5

should be defined in a Document Type Definition (DTD), which defines which building blocks are allowed in an XML document. XML is stricter than HTML, which means that an XML document that does not follow the specified rules will not be parseable (Ronne, 2000). The XML tags must have closing tags, they are case sensitive and they must be properly nested (w3schools). In HTML, not properly written documents are still parseable, but there is a risk that they look different in different browsers depending on how the browser interprets the code. History According to Marchal (Marchal, 2002), XML exists because the development of the web gave new demands that HTML could not meet. Chemists and mathematicians could use tags to describe different kinds of formulas, search engines could use tags for keywords (Marchal, 2002). According to Marchal, the need for different kinds of tags depending on the domain of work has made HTML a big language, and the ongoing development has made further extension of HTML impossible. Instead of adding more tags to HTML, the solution to this problem is XML. XML is not supposed to replace HTML, just to complement it (w3schools). Examples A simple XML document. <?xml version="1.0"?> <!DOCTYPE group SYSTEM "memberlist.dtd"> <group_members> <member> <name>anders M</name> <email href= mailto:dit02amg@cs.umu.se /> </member> <member> <name>david M</name> <email href= mailto:dit01dml@cs.umu.se /> </member> <member> <name>david S</name> <email href= mailto:dv02sdd@cs.umu.se /> </member> </group_members> This simple example shows how an XML document could be structured. The tags are pretty much self-explaining, and the only things not obvious are the first two tags. The first tag only defines which version of XML that is used in the document. The second tag refers to the XML documents DTD. Use before AJAX XML files can be used to store data separate from the HTML, so that the HTML will only be used to handle display of the data. XML could be used to just store data in files or in databases, and since it is text-based, it can be used independently of platform (w3schools). Use within AJAX XML is used the same way in AJAX as it is normally used. There is no difference in purpose and means. 6

Server side scripting Server-side scripting is one way of making web applications more interactive than having only static HTML web pages. When a client requests a document written in a server-side scripting language from the web server, the server will execute the script and generate a static HTML document that is sent back to the requesting client. Server-side scripting is usually used for customizing the content that is sent back to the user by retrieving data from a database according to the user's preferences or actions. Two commonly used server-side scripting languages are Active Server Pages (ASP) and PHP Hypertext Preprocessor (PHP) (Wikipedia, Server-side scripting). History In the early web development of the 1990s server-side scripting was usually done using the Common Gateway Interface (CGI). This is a technology that allows a web server to pass a request from a client web browser to an external application and return the output from the application back to the web browser. Since the end of the 1990s the server-side scripting has moved from using CGI to having the web server execute the scripts. This lacks the overhead of spawning a new process on the server for each request to the external application, which makes execution of the scripts faster and less heavy for the server (Wikipedia, Common Gateway Interface). Examples The two examples below show some simple server-side sripts written in PHP. The first script retrieves the current date and time from the server and the second script is a simple counter that stores in a text file how many hits a web page has had. Retrieve and print current date and time. (PHP script) <?php echo date( Y-m-d H:i:s );?> Web page counter. Stores number of hits in a text file. (PHP script) <?php $file = count.dat ; $fp = fopen($file, r ); $count = fgets($fp, 1024); fclose($fp); $fpwrite = fopen($file, w ); $newcount = $count + 1; fwrite($fpwrite, $newcount); fclose($fpwrite);?> Use before AJAX Server-side scripting was, and is, used to have dynamic content of web pages rather than only static HTML pages. Instead of a web browser requesting a static HTML document, it requests a dynamic server-side script which generates the static HTML page sent back to the web browser. In the generation process, data can be collected from a database, and content can be structured depending on the user s preferences or actions, such as if the user has identified him/her to the application by some login information or what information the user has provided though a form. 7

Use within AJAX On the server side, server-side scripting is exactly the same when using AJAX as when not using it. That is, the technology is exactly the same, but the use differs. The scripts tend to be more dynamic because a client web browser may request only a part of a web page instead of a complete HTML document. Additionally, the document sent back to the client is usually an XML document instead of an HTML document. On the client side changes that correspond to the server side changes have to be made. This includes having to specify which part of a document is requested if not the complete document is requested. AJAX Examples To show how AJAX can be used, two applications with AJAX based technology will be presented. These are Answers.com and the AJAX Translator. Answers.com Answers.com 2 is an online encyclopaedia and dictionary. It has a text field where the user can enter what he/she wants information about. As soon as the user has typed a single character into the text field, a text box containing search words that begins with that character appears. As the user continues to type, the suggestions in the text box are updated according to the user s input. The AJAX part of this interaction process is that at each character entered by the user, the browser communicates with the server to retrieve the appropriate information. The retrieved information is used to bring instant feedback to the user. Without AJAX the whole page would have to have been reloaded several times, to provide similar feedback and information to the user. 2 http://www.answers.com/ 8

AJAX Translator AJAX Translator 3 is an online translator between different languages. It has a text field where the user can enter what he/she wants to translate. As soon as the user has typed a couple of words into the text field, the translation field below begins to display the suggested translation of the text that the user entered. As the user continues to type, the translation suggestion is updated according to the entered text. The application creates a connection with a server application. When the user writes a word the text from that field is sent to the server side for processing. The result from this processing is sent back to the webpage and due to the JavaScript, the XHTML/XML document object model the webpage s content will be changed. Discussion There are at least three significant benefits that AJAX provides. First, less bandwidth is needed because the information on web pages is divided into smaller portions, and the user decides which portions of the web page he/she wants to retrieve from the server. Thus, less data needs to be transferred over the network than if not using AJAX. Second, since each interaction step only downloads a small portion of data, the user can get feedback much faster than if the entire page had to reload. This leads us to the third benefit, which is that AJAX makes it possible to create more interactive web applications. With faster feedback and the possibility to reload and change information on parts of web pages, web applications can be made more interactive and more like ordinary offline applications. With faster access to database information on the server, a more dynamic web application can be made, which also can make the application feel more interactive. One problem which is not specific for AJAX, but it still is a problem when using AJAX, is that different browsers tend to interpret the HTML and CSS documents different. And since AJAX 3 http://ajax.parish.ath.cx/translator/ 9

uses both of these, this problem s solution is not AJAX. Another browser related problem is that not all browsers support JavaScript, which is one of the main parts in an AJAX application. Another possible problem with AJAX is that the non-textual-target context (Janlert, 2005) keeps changing. That is, the surrounding text changes according to some condition depending on the user s actions. In a non-ajax application, the user would be allowed to finish the current task before the context changes. But since this could be seen as a side-effect that comes with the faster feedback in AJAX applications, it is arguable if this problem is of any importance. To extend an already existing non-ajax application, both server-side and client-side functionality is needed. The amount of work needed to accomplish this depends on the design of the application, but generally it is the amount of work, not the difficulty, that increases. There is a problem with navigating a webpage that uses AJAX (wikipedia, AJAX (programming)). Since the webpage is only partially updated, there is a possible problem with using the browser s back function. The users might unable to use this function to undo their last action. They will instead be sent back to the previously visited webpage, possibly many actions ago. AJAX is an important part of Web 2.0 (Answers, Web 2.0), so all the new-wave web sites probably will use development tools like AJAX or tools similar to AJAX. The future users of the web will expect a higher degree of interactivity than what usually is the case on web 1.0 sites. AJAX provides this possibility of integrating interactivity into web applications. Hence, the active future web developer should get to know the AJAX technology. Conclusion Since all the technologies combined into AJAX are parts of today s web development practices, AJAX could be seen as nothing but a minor tweak of this. But this is going to be an important part of the development of future web applications. The positive sides of using AJAX are many and also of greater importance than the possible problems. This leads to the conclusion that learning and using AJAX will be an inevitable step in each professional web developer s future. References Answers, Web 2.0, http://www.answers.com/topic/web-2-0?method=22, accessed 2006-04-28. Andreessen, Marc, Innovators of the Net: Brendan Eich and JavaScript, 1998, http://wp.netscape.com/comprod/columns/techvision/innovators_be.html, accessed 2006-04- 28. Janlert, L.-E. A generic medium model for new media, 2005, Umeå Universitet. Marchal, Benoît, XML Genom exempel, 2002, Göteborg, Elanders/Graphic Systems AB. Mozilla Development Center, New in JavaScript 1.6, 2006, http://developer.mozilla.org/en/docs/new_in_javascript_1.6, accessed 2006-04-28 Nihonsoft, Resources for JavaScript/ECMAScript, http://research.nihonsoft.org/javascript/index.nsp, accessed 2006-04-28 Ronne, Erik, (2000), XHTML, Jyväskylä, Gummerus printing. 10

W3C, HyperText Markup Language (HTML) Home Page, 2006, http://www.w3.org/markup/, accessed 2006-04-28. W3Schools, XML Tutorial, 2006, http://www.w3schools.com/xml/, accessed 2006-04-23 Wikipedia, AJAX (programming), http://en.wikipedia.org/wiki/ajax_%28programming%29, accessed 2006-04-28. Wikipedia, Common Gateway Interface, http://en.wikipedia.org/wiki/common_gateway_interface, accessed 2006-04-25. Wikipedia, Server-side scripting, http://en.wikipedia.org/wiki/server-side_scripting, accessed 2006-04-25. 11