1.  2008 Pearson Education, Inc. All rights reserved. 1 15 Ajax-Enabled Rich Internet Applications

2.  2008 Pearson Education, Inc. All rights reserved. 2 … the challenges are for the designers of these applications: to forget what we think we know about the limitations of the Web, and begin to imagine a wider, richer range of possibilities. It’s going to be fun. — Jesse James Garrett Dojo is the standard library JavaScript never had. — Alex Russell

3.  2008 Pearson Education, Inc. All rights reserved. 3 To know how to suggest is the great art of teaching. To attain it we must be able to guess what will interest … — Henri-Fredreic Amiel It is characteristic of the epistemological tradition to present us with partial scenarios and then to demand whole or categorical answers as it were. — Avrum Stroll O! call back yesterday, bid time return. — William Shakespeare

4.  2008 Pearson Education, Inc. All rights reserved. 4 OBJECTIVES In this chapter you will learn:  What Ajax is and why it is important for building Rich Internet Applications.  What asynchronous requests are and how they help give web applications the feel of desktop applications.  What the XMLHttpRequest object is and how it’s used to create and manage asynchronous requests to servers and to receive asynchronous responses from servers.

5.  2008 Pearson Education, Inc. All rights reserved. 5 OBJECTIVES  Methods and properties of the XMLHttpRequest object.  How to use XHTML, JavaScript, CSS, XML, JSON and the DOM in Ajax applications.  How to use Ajax frameworks and toolkits, specifically Dojo, to conveniently create robust Ajax-enabled Rich Internet Applications.  About resources for studying Ajax-related issues such as security, performance, debugging, the “back-button problem” and more.

6.  2008 Pearson Education, Inc. All rights reserved. 6 15.1 Introduction 15.2Traditional Web Applications vs. Ajax Applications 15.3 Rich Internet Applications (RIAs) with Ajax 15.4 History of Ajax 15.5“Raw” Ajax Example Using the XMLHttpRequest Object 15.6 Using XML and the DOM 15.7 Creating a Full-Scale Ajax-Enabled Application 15.8 Dojo Toolkit 15.9 Wrap-Up 15.10 Web Resources

7.  2008 Pearson Education, Inc. All rights reserved. 7 Fig. 15.1 | Classic web application reloading the page for every user interaction.

8.  2008 Pearson Education, Inc. All rights reserved. 8 Fig. 15.2 | Ajax-enabled web application interacting with the server asynchronously.

9.  2008 Pearson Education, Inc. All rights reserved. 9 Fig. 15.3 | Classic XHTML form: User submits entire form to server, which validates the data entered (if any). Server responds indicating fields with invalid or missing data. (Part 1 of 2.)

10.  2008 Pearson Education, Inc. All rights reserved. 10 Fig. 15.3 | Classic XHTML form: User submits entire form to server, which validates the data entered (if any). Server responds indicating fields with invalid or missing data. (Part 2 of 2.)

11.  2008 Pearson Education, Inc. All rights reserved. 11 Fig. 15.4 | Ajax-enabled form shows errors asynchronously when user moves to another field.

12.  2008 Pearson Education, Inc. All rights reserved. 12 Performance Tip 15.1 When an Ajax application requests a file from a server, such as an XHTML document or an image, the browser typically caches that file. Subsequent requests for the same file can load it from the browser’s cache rather than making the round trip to the server again.

13.  2008 Pearson Education, Inc. All rights reserved. 13 Software Engineering Observation 15.1 For security purposes, the XMLHttpRequest object doesn’t allow a web application to request resources from domain names other than the one that served the application. For this reason, the web application and its resources must reside on the same web server (this could be a web server on your local computer). This is commonly known as the same origin policy (SOP). SOP aims to close a vulnerability called cross-site scripting, also known as XSS, which allows an attacker to compromise a website’s security by injecting a malicious script onto the page from another domain. To learn more about XSS visit en.wikipedia.org/wiki/XSS. To get content from another domain securely, you can implement a server-side proxy—an application on the web application’s web server—that can make requests to other servers on the web application’s behalf.

14.  2008 Pearson Education, Inc. All rights reserved. 14 Outline SwitchContent.html (1 of 5)

15.  2008 Pearson Education, Inc. All rights reserved. 15 Outline SwitchContent.html (2 of 5)

16.  2008 Pearson Education, Inc. All rights reserved. 16 Outline SwitchContent.html (3 of 5)

17.  2008 Pearson Education, Inc. All rights reserved. 17 Outline SwitchContent.html (4 of 5)

18.  2008 Pearson Education, Inc. All rights reserved. 18 Outline SwitchContent.html (5 of 5)

19.  2008 Pearson Education, Inc. All rights reserved. 19 Fig. 15.6 | XMLHttpRequest object properties.

20.  2008 Pearson Education, Inc. All rights reserved. 20 Fig. 15.7 | XMLHttpRequest object methods. (Part 1 of 2.)

21.  2008 Pearson Education, Inc. All rights reserved. 21 Fig. 15.7 | XMLHttpRequest object methods. (Part 2 of 2.)

22.  2008 Pearson Education, Inc. All rights reserved. 22 Outline PullImagesOnto Page.html (1 of 6)

23.  2008 Pearson Education, Inc. All rights reserved. 23 Outline PullImagesOnto Page.html (2 of 6)

24.  2008 Pearson Education, Inc. All rights reserved. 24 Outline PullImagesOnto Page.html (3 of 6)

25.  2008 Pearson Education, Inc. All rights reserved. 25 Outline PullImagesOnto Page.html (4 of 6)

26.  2008 Pearson Education, Inc. All rights reserved. 26 Outline PullImagesOnto Page.html (5 of 6)

27.  2008 Pearson Education, Inc. All rights reserved. 27 Outline PullImagesOnto Page.html (6 of 6)

28.  2008 Pearson Education, Inc. All rights reserved. 28 Outline addressbook.html (1 of 18)

29.  2008 Pearson Education, Inc. All rights reserved. 29 Outline addressbook.html (2 of 18)

30.  2008 Pearson Education, Inc. All rights reserved. 30 Outline addressbook.html (3 of 18)

31.  2008 Pearson Education, Inc. All rights reserved. 31 Outline addressbook.html (4 of 18)

32.  2008 Pearson Education, Inc. All rights reserved. 32 Outline addressbook.html (5 of 18)

33.  2008 Pearson Education, Inc. All rights reserved. 33 Outline addressbook.html (6 of 18)

34.  2008 Pearson Education, Inc. All rights reserved. 34 Outline addressbook.html (7 of 18)

35.  2008 Pearson Education, Inc. All rights reserved. 35 Outline addressbook.html (8 of 18)

36.  2008 Pearson Education, Inc. All rights reserved. 36 Outline addressbook.html (9 of 18)

37.  2008 Pearson Education, Inc. All rights reserved. 37 Outline addressbook.html (10 of 18)

38.  2008 Pearson Education, Inc. All rights reserved. 38 Outline addressbook.html (11 of 18)

39.  2008 Pearson Education, Inc. All rights reserved. 39 Outline addressbook.html (12 of 18)

40.  2008 Pearson Education, Inc. All rights reserved. 40 Outline addressbook.html (13 of 18)

41.  2008 Pearson Education, Inc. All rights reserved. 41 Outline addressbook.html (14 of 18)

42.  2008 Pearson Education, Inc. All rights reserved. 42 Outline addressbook.html (15 of 18)

43.  2008 Pearson Education, Inc. All rights reserved. 43 Outline addressbook.html (16 of 18)

44.  2008 Pearson Education, Inc. All rights reserved. 44 Outline addressbook.html (17 of 18)

45.  2008 Pearson Education, Inc. All rights reserved. 45 Outline addressbook.html (18 of 18)

46.  2008 Pearson Education, Inc. All rights reserved. 46 Outline

47.  2008 Pearson Education, Inc. All rights reserved. 47 Outline Calendar.html (1 of 11)

48.  2008 Pearson Education, Inc. All rights reserved. 48 Outline Calendar.html (2 of 11)

49.  2008 Pearson Education, Inc. All rights reserved. 49 Outline Calendar.html (3 of 11)

50.  2008 Pearson Education, Inc. All rights reserved. 50 Outline Calendar.html (4 of 11)

51.  2008 Pearson Education, Inc. All rights reserved. 51 Outline Calendar.html (5 of 11)

52.  2008 Pearson Education, Inc. All rights reserved. 52 Outline Calendar.html (6 of 11)

53.  2008 Pearson Education, Inc. All rights reserved. 53 Outline Calendar.html (7 of 11)

54.  2008 Pearson Education, Inc. All rights reserved. 54 Outline Calendar.html (8 of 11)

55.  2008 Pearson Education, Inc. All rights reserved. 55 Outline Calendar.html (9 of 11)

56.  2008 Pearson Education, Inc. All rights reserved. 56 Outline Calendar.html (10 of 11)

57.  2008 Pearson Education, Inc. All rights reserved. 57 Outline Calendar.html (11 of 11)