Web 2.0 and AJAX. Markus Mühlberger May 6, 2007

Size: px

Start display at page:

Download "Web 2.0 and AJAX. Markus Mühlberger May 6, 2007"

Marsha Moody
5 years ago
Views:

1 Web 2.0 and AJAX Markus Mühlberger muehlberger@io-systems.at May 6, 2007 Abstract Web 2.0 is an improved version of the original idea of the World Wide Web. It integrates the community, the internet users, to provide the content for 2.0 web pages. AJAX is a technique that helps developers build Web 2.0 applications. It avoids reloading the whole page, but only requests certain parts of the side, that need to be updated. 1 Web What is Web 2.0 The most frequently asked question is definitely What is it?. So what is the Web 2.0? It is not a technology like HTML or a specificated form of processing data like the HTTP Protocol. It is more like a mentality how to design websites. It makes use of the community to give an infinite update of content. Every user can contribute their own thoughts and opinions to a foreign webpage. Even the ways of publishing information are much easier. In the early days of the WWW, users who wanted to add content the Web had to be computer professionals and they needed to learn the Hypertext Markup Language (HTML). The only thing you need to know now, if you want to post a blog 1 for instance, is to know what to write. So, what the Web 2.0 actually does to non-professionals is to provide a simple and quick way to publish their information (e.g. photos at Flickr, videos at Youtube and text in blogs). For professionals it is something like a guideline to make the Website fit different forms of requirements. The experts are split into two groups. The ones, that support the idea of Web 2.0 and the others that say, like it is said in the next section, that there is nothing named Web 2.0, and it is a phantasm of a few people, that only want to make profit of it. 1 blog is a shortcut for weblog 1

2 1.2 From 1.x to 2.0 Tim Berners-Lee denied the existence of Web 2.0 pretty soon after the occurrence of the term. He said the original world wide web was made to enhance itself as time went by - different to my opinion in this case. It is correct, that the WWW was made to be enhanced, but if you compare the Web to an ordinary application on your computer, you will notice, that these applications are also made to get updated. Most times the software has a version number and with every update the minor or maintenance number gets increased. If there are fundamental changes, a new major version number is set. So, why not apply this system to the world wide web? One argument would be that only the inventor of the software can update the version. Berners-Lee has given its invention to the public. He has founded the W3C, a consortium to standardize and improve the web, but the idea of the web is in a way open-source, so that everyone can make changes to the system. Another question is Where is the cut between 1.x and 2.0?. The answer is easy, there is none. The border between these two versions is blurred. As there are no measuring methods to classify websites, e.g. the number of sites or text or links in it, it cannot be distinguished. A website can only point towards a direction more to 2.0 or more the old style. In the 1990s the Dotcom-Bubble grew larger and larger until it burst. Companies avoided the web as a marketplace. They feared that they would also have to close down as it happened due the burst. The internet use went on and nowadays it is again used to sell goods. Tim O Reilly published a list of applications that are equal, but in different versions of the Web. The following list is an abstraction of what O Reilly and his fellows formulated in their initial Web 2.0 Conference [Lew06] DoubleClick Google AdSense Akamai BitTorrent dictionary (taxonomy) tagging (folksonomy) Britannica Online Wikipedia As you can see, they suggest that DoubleClick, an advertisement company for websites, is to be replaced by Google s AdSense. This makes perfect sense, because AdSense is building upon a system, that shows advertisements referring to the websites content. A homepage about scuba-gear will then no more have advertisements of car kits. 2 The term has been changed to Web 2.0 Summit, which is held annually 2

3 Akamai, a company which sells bandwidth and server space to companies which distribute large data, will be overrun by BitTorrent; another statement that I affirm. BitTorrent users do not only download, they also share their downloaded packets. It is much cheaper for companies to exploit their customers, who do not download the product but also upload it, than to provide the bandwith all alone. Taxonomy is a type of classification. One person looks at an item and finds classes in which it fits. Folksonomy is based upon many classifications. You can say the sum of all taxonomies of the users. The most viable type of classification is tagging. You add a tag to something, like an URL on del.icio.us, with different tags, that you think fits for this link. Other users are also tagging it. They complement each other. The tags, that are most tagged at one link will appear largest or first (it depends on the form of viewing it). Britannica Online will be displaced by Wikipedia. This is not fully correct. There are many people who think The Wikipedia is not a liable source. Personally I disagree with these people, because it is strongly user controlled and also corrected by them. Wikipedia also serves The Long Tail. A term often used with the Internet and Web 2.0. For the team of Britannica Online it is impossible to provide every tiny information, you have to keep in mind, that they have to check everything they publish for its correctness. As a normal store, they only provide a small range of information (in a store it would for instance be an Audio CD). This is called the Head, products or information, that are said to be important or successful. The long tail is the not so important stuff. Everything no shop owner would have in their assortment, because there are only two or three who would buy this. Two or three in one locality is little, but compared to the world, there are half a million people who would probably buy it. This little extract of the list of the first Web 2.0 Conference shows exactly what Web 2.0 is up to: user participation. Many thoughts produce much more ideas than the sum of each single thought. This thesis should not only play a role in Web 2.0, but also in any research. A single administrator of a site cannot produce as much output as all the readers can by taking part. 1.3 Conclusion of the Web 2.0 What we have seen, is that the Web 2.0 idea is very vague. There is no exact difference to the original World Wide Web, no features a website must have to be a Web 2.0 application, but there are directions to go to. The user plays a greater role in the design than previously. The E-Commerce that occurred during the late 1990s is again present and provides The Long Tail, not so popular goods that cannot be sold in a normal (physical) store. 3

4 2 AJAX 2.1 a new technology to make websites AJAX is an acronym for Asynchronous JavaScript and XML. Some people think the Web 2.0 and AJAX are the same. That is of course not true, but AJAX is certainly dedicated to the Web 2.0. Actually, most Web 2.0 applications are built with it, because the AJAX technology makes it easy to integrate the community to contribute to the website. It allows web developers to create web applications that do not require reloading as much as normal websites do. The websites can retrieve content dynamically through requesting it. AJAX is not completely new, but it makes use of old technologies. The name was invented by Jesse James Garret, founder of adaptive path, when he needed a name for a bundle of components, he wanted to sell in AJAX makes use of three large techniques, the Document Object Model (DOM), JavaScript and XMLHttpRequest. JavaScript is used to initialize the XMLHttpRequest model and to modify the Document Object Model. XMLHttpRequest retrieves the data for the modification and the DOM defines the structure of the Website. 2.2 The fundamentals of AJAX Document Object Model According to [Woy06, chapter 7.4] the Document Objects Model is a program API 3 for representing XML or HTML documents. This API allows to change structure and content of each tag 4. The Model has been standardized by the World Wide Web Consortium and is divided into levels. Each level is equal to a program version. The current version is Level 3 which is subdivided in different parts for different usage. DOM Level 3 Load and Save is particularly important for AJAX. It allows web developers to modify the DOM dynamically JavaScript Javascript is a save scripting language for websites. It cannot do as much harm as a fully-grown programming language like C++ can do, but it allows web developers to give their applications a bit more interactivity. The scripting language is client-sided, which means that the browser interprets the code, which is sent to the client. Instead of server-sided languages as PHP or ASP the code is fully readable by the user. Security related operations should not be done via JavaScript, because everyone who wants to can 3 API stands for Application Programming Interface 4 a tag is something like a label 4

5 read it. AJAX uses JavaScript to display the retrieved Data by modifying the given DOM object and to initialize the XMLHttpRequest Object XMLHttpRequest The XMLHttpRequest object ist the most essential part of all different techniques that AJAX uses. It does the actual request and receive work. To use this object you must first create it with JavaScript. Different browsers implement this object in different ways. Microsoft s Internet Explorer uses ActiveX to use the XMLHttpRequest object. All browsers that do not support ActiveX use the native JavaScript method. The data is sent in an XML 5 format. This format allows you to define your own tags to fit your needs. XML is highly exchangeable and platform-independent, so the choice was quite obvious. 2.3 How to use Ajax Here is an example of a standard way to implement object creation, sending and receiving with XMLHttpRequest copied out of [Ler06, Listing 1]: function getxmlhttprequest () { try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {}; try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} try { return new XMLHttpRequest(); } catch(e) {}; return null; } function parsehttpresponse() { alert("entered parsehttpresponse"); if (xhr.readystate == 4) { alert("readystate == 4"); if (xhr.status == 200) { alert(xhr.responsetext); } else { alert("xhr.status == " + xhr.status); 5 XML stands for extensible Markup Language 5

6 } } } var xhr = getxmlhttprequest(); alert("xhr = " + xhr); xhr.open("get", "atf.html", true); xhr.onreadystatechange = parsehttpresponse; xhr.send(null); An AJAX object is normally created via xhr = getxmlhttprequest();. Microsoft Internet Explorer uses ActiveX, the object creation is slightly different. Therefore use xhr = new ActiveXObject("Msxml2.XMLHTTP"); to create the object. Some older versions of the Internet Explorer require the use of xhr = new ActiveXObject("Microsoft.XMLHTTP"); instead. The sending of a request is done in two steps. First you have to set up the request with xhr.open(" GET", " bar.html", true);. This means we want to request and download (GET) the site atf.html asynchronously (true).in order to actually send the request we have to call xhr.send();. As the connection has to be asynchronous, it is not guaranteed that the requested data is received within a second, or an hour and the execution of the script is paused meanwhile, there is no return object. The script continues its execution and we do not know when the data is fully received. For this case, the XMLHttpRequest object has an onchange event. This event has an attribute called onreadystatechange. This attribute contains a function name, that is called if the ReadyState of the object changes. If it does, the download is completed and our function set in onreadystatechange can be called. parsehttpresponse first checks if the readystate equals 4, which means the download is completed. Then it checks if the HTTP Response is 200, which means OK, to make sure that there hasn t been a BadRequest or an error. It then displays the content in an alert box. 2.4 advantages and disadvantages The greatest advantage of AJAX is defintily that the browser only requests the data it needs. This reduces traffic significantly. The web application feels more and more like a real desktop application because data is being processed in the background. A great disadvantage of this technology is that you cannot bookmark pages that have already processed data and requested new content from the server. There are a few techniques that help making an application bookmark friendly, but they are rather complex to implement. 6

7 2.5 famous AJAX Applications Google Maps 6 Google Maps is probably the most famous AJAX application. It is a map of the world, that offers a route planner, satellite photos and a location search engine to find any place you d like on the map. AJAX is used to request new parts of the map in the background, or requesting results for the search. The application requires no reloading to access any single feature, it is all done with AJAX. Google also offers an API for Google Maps. This is generally a basic AJAX framework, with several added functions to fit into the Google Maps environment Microsoft s live.com 7 Live.com is a personalized startpage like igoogle 8. Users can register and put gadgets on their startpage. These gadgets can be news feeds, weather forecast, stock market quotes or the inbox of your Hotmail account. The page uses AJAX all the way. There is no need for reloading the website except for the web search feature, which takes you to a different subdomain of live.com. The website has an excessive javascript usage. Tabs, that can be renamed, added or deleted, or your gadgets, which can be dragged live to a new position. 2.6 Conclusion about AJAX AJAX is a technology that implements great interactivity to your website. The pages do not have to be reloaded when accessing new content. Including AJAX into a website is very easy, but it would be wise to take advantage of a whole framework, or even build your own. Information that should be bookmark-able, should be accessible as a static site as an alternative, too. Learning to design AJAX application is worth doing, because it is The Way to make applications in the future. With AJAX there is a great possibility to fulfil the prediction, that former desktop applications will be accessible through the web and the user won t need to install any application on his/her desktop. References [Alb06] Tom Alby. Web 2.0. Konzepte, Anwendungen, Technologien. Hanser Fachbuchverlag, Google Maps: 7 Live.com: 8 igoogle: 7

8 [Asl06] Ryan Asleson. Foundations of Ajax. APRESS / SPRINGER- VERLAG, [DB06] [Ler06] Cristian Darie and Bogdan Brinzarea. AJAX and PHP: Building Responsive Web Applications. Packt Publishing, Reuven M. Lerner. At the forge: Beginning ajax. Linux Journal, 2006(151):10, [Lew06] Daniel Lewis. What is web 2.0? Crossroads, 13(1):3 3, [MR06] David E. Millard and Martin Ross. Web 2.0: hypertext by any other name? In HYPERTEXT 06: Proceedings of the seventeenth conference on Hypertext and hypermedia, pages 27 30, New York, NY, USA, ACM Press. [Tre06] Win Treese. Web 2.0: is it really different? networker, 10(2):15 17, [Woy06] Edmond Woychowsky. AJAX: Creating Web Pages with Asynchronous JavaScript and XML (Bruce Perens Open Source Series). Prentice Hall PTR,

AJAX ASYNCHRONOUS JAVASCRIPT AND XML. Laura Farinetti - DAUIN

AJAX ASYNCHRONOUS JAVASCRIPT AND XML Laura Farinetti - DAUIN Rich-client asynchronous transactions In 2005, Jesse James Garrett wrote an online article titled Ajax: A New Approach to Web Applications (www.adaptivepath.com/ideas/essays/archives/000