Contents
Project Preview: The Joke of the Day Application......................................................... 4
Introducing Ajax.................................................................................................................... 5
Ajax Technologies ......................................................................................................... 6
Traditional Web Development Versus Ajax Development................................. 6
Examples of Real-World Ajax Applications and Websites.......................................... 9
Search Engine Makeovers............................................................................................ 9
Suggest Styled Applications ..................................................................................... 10
Google Maps.................................................................................................................. 13
Netflix............................................................................................................................. 14
Virtual Desktop Applications................................................................................... 14
Photo Management Using Flickr............................................................................. 16
Ajax Instant Message Applications......................................................................... 16
Online Calendars......................................................................................................... 17
Back to the Joke of the Day Application........................................................................ 18
Designing the Application ........................................................................................ 18
The Final Result ........................................................................................................... 25
Summary................................................................................................................................ 26
Project Preview: The Number Guessing Game............................................................. 29
JavaScript—Ajax’s Programming Language.................................................................. 31
A Little JavaScript Background Information........................................................ 31
Browser Compatibility Issues................................................................................... 32
Working with JavaScript.................................................................................................... 33
Creating a Simple JavaScript.................................................................................... 34
Executing Your JavaScript......................................................................................... 34
Four Ways of Working with JavaScript.......................................................................... 35
Embedding JavaScripts in the HEAD Section....................................................... 35
Embedding JavaScripts in the BODY Section....................................................... 37
Placing JavaScripts in External Files ...................................................................... 38
Embedding JavaScripts in HTML Tags.................................................................... 38
Understanding JavaScript Statement Syntax ...................................................... 39
Dealing with Browsers That Do Not Support JavaScript .................................. 39
Documenting Your Scripts Using Comments...................................................... 40
Working with Different Types of Values....................................................................... 41
Creating JavaScript Variables................................................................................... 41
Assigning Variable Names ........................................................................................ 42
Understanding Variable Scope ................................................................................ 42
Working with Local Variables.................................................................................. 42
Doing a Little Math ..................................................................................................... 43
Assigning and Modifying Variable Values ............................................................ 44
Applying Conditional Logic.............................................................................................. 47
Introducing the if Statement ................................................................................... 47
Multi-line if Statements............................................................................................. 48
Providing for Alternative Conditions .................................................................... 48
Nesting if Statements................................................................................................. 49
Working with the switch Statement...................................................................... 50
Working Efficiently with Loops....................................................................................... 52
Working with the for Statement ............................................................................ 53
Working with the while Statement ....................................................................... 53
Working with the do. . .while Statement.............................................................. 55
Altering Loop Execution............................................................................................ 56
Skipping Loop Iterations ........................................................................................... 57
Back to the Number Guessing Game.............................................................................. 58
Designing the Application........................................................................................ 58
Summary................................................................................................................................ 62
Project Preview: The Rock, Paper, Scissors Game........................................................ 66
Improving JavaScript Organization with Functions.................................................. 67
Organizing Code Statements into Functions ...................................................... 67
Controlling Function Execution ............................................................................. 68
Developing Applications That Respond to Events...................................................... 71
Developing Event-Driven Scripts............................................................................. 71
Working with Different JavaScript Events ........................................................... 72
Processing Forms......................................................................................................... 75
Div and Span Tags................................................................................................................ 77
Working with the <DIV> </DIV> Tags..................................................................... 77
Working with the <SPAN> </SPAN> Tags .............................................................. 77
Programmatically Replacing Text without Screen Refresh............................. 78
Managing Collections of Data.......................................................................................... 80
Accessing Individual Array Elements .................................................................... 81
Using Loops to Process Arrays.................................................................................. 82
Sorting the Contents of Arrays ................................................................................ 83
Back to the Rock, Paper, Scissors Application.............................................................. 84
Designing the Application ........................................................................................ 84
Summary................................................................................................................................ 89
Project Preview: The Ajax Story of the Day Application............................................ 92
An Introduction to the Document Object Model........................................................ 93
The DOM Tree....................................................................................................................... 94
Walking the DOM Tree....................................................................................................... 96
Accessing DOM Elements by ID ............................................................................... 97
Accessing DOM Elements Using DOM Properties ............................................... 98
A Mixed Navigation Approach............................................................................... 100
Dynamically Updating Web Page Content................................................................. 101
Back to the Ajax Story of the Day Application........................................................... 103
Designing the Application ...................................................................................... 104
Summary.............................................................................................................................. 109
Project Preview: The Ajax Typing Challenge.............................................................. 114
Connecting Your Applications to Web Servers.......................................................... 115
XMLHttpRequest Methods ...................................................................................... 116
XMLHttpRequest Properties ................................................................................... 116
Working with the XMLHttpRequest Object................................................................ 117
Instantiating the XMLHttpRequest Object ......................................................... 117
Opening a New Connection.................................................................................... 118
Waiting for the Web Server’s Response .............................................................. 120
Handling the Web Server Response ..................................................................... 121
Wrapping Things Up ................................................................................................ 122
Putting All the Pieces Together to Create a Working Ajax Application..... 122
Managing Concurrent XMLHttpRequests................................................................... 124
Using Ajax to Set Up Mouseovers.................................................................................. 125
Leveraging Ajax Frameworks......................................................................................... 127
Popular Ajax Frameworks....................................................................................... 128
Framework Demo—Using the CBA Framework................................................. 130
Back to the Ajax Typing Challenge Application........................................................ 132
Designing the Application...................................................................................... 132
The Final Result ......................................................................................................... 137
Summary.............................................................................................................................. 138
Project Preview: The Ajax Google Suggest Application........................................... 140
Using Ajax to Manipulate Graphics.............................................................................. 141
Sending Data to Web Servers......................................................................................... 144
A Quick Example of How to Work with PHP ..................................................... 145
Sending Data to Web Servers for Processing ..................................................... 147
Executing Server-Supplied JavaScript.......................................................................... 153
Back to the Ajax Google Suggest Application............................................................ 155
Designing the Application...................................................................................... 156
The Final Result ......................................................................................................... 163
Summary.............................................................................................................................. 163
Project Preview: The Who Am I? Application............................................................. 168
An Introduction to XML................................................................................................... 169
Rules for Formulating XML Tags........................................................................... 170
XML Element Syntax................................................................................................. 171
Including the XML Declaration Instruction....................................................... 171
Commenting Your XML Files.................................................................................. 172
Working with Elements with No Content.......................................................... 172
Understanding the Types of Elements in Use.................................................... 173
Verifying That Your XML Files Are Well-Formed....................................................... 174
Understanding XML Trees............................................................................................... 175
A Depiction of a Small XML File ............................................................................ 175
JavaScript Properties That Work with XML Trees............................................. 176
Navigating XML Files........................................................................................................ 176
Eliminating White Space ........................................................................................ 179
Processing XML Element Attributes..................................................................... 181
JSON: JavaScript Object Notation—An Alternative to XML..................................... 184
Back to the Who Am I? Application.............................................................................. 184
Designing the Application...................................................................................... 185
The Final Result ......................................................................................................... 193
Summary.............................................................................................................................. 193
Project Preview: The Fortune Telling Game............................................................... 195
An Introduction to CSS.................................................................................................... 197
CSS Syntax................................................................................................................... 198
Using CSS to Specify Style, Color, and Presentation................................................ 198
Controlling Font Presentation............................................................................... 199
Managing the Display of Text ................................................................................ 200
Controlling Color and Background...................................................................... 201
Exercising Control over Content Location ......................................................... 202
Adding CSS to Your HTML Pages.................................................................................... 205
Using Inline Styles .................................................................................................... 206
Defining Embedded Style Elements..................................................................... 206
Working with External Style Sheets .................................................................... 208
Back to the Fortune Telling Game................................................................................ 209
Designing the Application ...................................................................................... 209
The Final Result ......................................................................................................... 220
Summary.............................................................................................................................. 220
Project Preview: Scramble—The Word Guessing Game........................................... 223
Introduction to PHP.......................................................................................................... 225
The Basics of Working with PHP................................................................................... 226
Embedding PHP into Your HTML Pages............................................................... 226
Writing Stand-alone PHP Scripts........................................................................... 227
PHP Coding.......................................................................................................................... 228
Returning Data Back to Your Ajax Application................................................. 229
Commenting Your PHP Code ................................................................................. 230
Storing Data in Variables ........................................................................................ 231
Managing Collections of Data Using Arrays ...................................................... 231
Data Assignments...................................................................................................... 232
Performing Mathematic Calculations ................................................................. 232
Comparing Values..................................................................................................... 233
Performing Conditional Logic ............................................................................... 233
Working with Loops ................................................................................................. 235
Working with Functions.................................................................................................. 239
Creating and Executing Custom Functions ....................................................... 239
Taking Advantage of Built-in PHP Functions..................................................... 240
Processing Application Input......................................................................................... 240
Retrieving Arguments Passed Using the GET Option...................................... 240
Retrieving Arguments Passed Using the Post Option...................................... 241
Storing and Accessing Data............................................................................................ 241
Creating and Accessing Files .................................................................................. 242
Writing to Files .......................................................................................................... 243
Reading from Files .................................................................................................... 244
A Few Words About Working with Databases................................................... 245
Back to Scramble—The Word Guessing Game........................................................... 245
Designing the Application...................................................................................... 245
The Final Result ......................................................................................................... 250
Summary.............................................................................................................................. 250
Programming Hurdles That All Ajax Developers Face............................................ 253
Recognize That Not All Browsers Support JavaScript...................................... 254
Do Not Let Ajax Alienate Your Users.................................................................... 255
Ajax Applications Disable the Browser’s Back and Forward Buttons ......... 256
Don’t Make Unexpected Changes ......................................................................... 257
Ajax Applications Are Not Easily Bookmarked ................................................. 257
Ajax Applications Pose Problems for Search Engines...................................... 257
Dynamic Updates Are Not Always Easily Noticed ............................................ 258
Data Exchange Behind the Scenes May Make Users Uncomfortable........... 258
Ajax Applications Do Not Run on a Single Platform ....................................... 259
Don’t Build Slow Ajax Applications ..................................................................... 259
Ajax Applications May Create New Security Concerns ................................... 260
Don’t Overuse Ajax............................................................................................................ 261
Follow Good Development Practices............................................................................ 261
Summary.............................................................................................................................. 262
Appendix A What’s on the Companion Website?.................... 263
Downloading the Book’s Source Code......................................................................... 264
Appendix B What Next?............................................................. 265
HTML Resources................................................................................................................. 266
Wikipedia’s HTML Page ........................................................................................... 266
WC3’s HTML 4.01 Specification Page ................................................................... 266
HTML.net’s Free HTML Tutorial ............................................................................. 267
The HTML Document Object Model.............................................................................. 268
Wikipedia’s Document Object Model Page ........................................................ 268
W3C’s Document Object Model (DOM) Page...................................................... 269
HTML DOM Tutorial.................................................................................................. 269
XMLHttpRequest Resources............................................................................................ 270
Wikipedia’s XMLHttpRequest Page ...................................................................... 270
W3C’s XMLHttpRequest Object Page.................................................................... 271
XMLHttpRequest Tutorial ....................................................................................... 272
Resources for Cascading Style Sheets........................................................................... 272
Wikipedia’s Cascading Style Sheets Page ........................................................... 273
WC3’s Cascading Style Sheets Page ...................................................................... 273
CSS Tutorial Page....................................................................................................... 274
JavaScript Resources......................................................................................................... 275
Wikipedia’s JavaScript Page ................................................................................... 275
JavaScript.com............................................................................................................ 276
JavaScript Tutorial .................................................................................................... 276
XML Resources.................................................................................................................... 277
Wikipedia’s XML Page .............................................................................................. 277
W3C’s Extensible Markup Language (XML) Page .............................................. 278
XML Tutorial ............................................................................................................... 279
Locating Ajax Resources Online.................................................................................... 279
Wikipedia’s Ajax Page.............................................................................................. 280
Jesse James Garrett’s Ground-Breaking Article ................................................. 280
Keeping an Eye on Ajax Blogs ................................................................................ 281
Index........................................................................ 283
INTRODUCTION
Welcome to Ajax Programming for the Absolute Beginner! Ajax (Asynchronous JavaScript and XML) is a collection of web development technologies that can be used to create web applications that provide levels of responsiveness previously unheard of. As a result, when combined with high-speed internet connections, you can use Ajax to develop web applications that behave and respond like desktop applications.
In recent years, web developers have begun to make major investments in Ajax, using it to create a whole new generation of web applications. For example, Google has used Ajax in the creation of all its latest applications, including Google Suggest, Google Maps, and Gmail. Amazon.com has used Ajax in the development of its A9.com search engine as well as to enhance and improve its main website.
Websites like Ask.com and Snap.com have used Ajax to make major improvements to their search engines. Other companies have used Ajax to help develop entire office suites of free online applications. For example, ThinkFree Online can create text documents, spreadsheets, and presentations all of which are 100 percent compatible with Microsoft Office. Google’s Google Docs Online office suite (docs.google.com) is another example of online applications
developed using Ajax.
When it comes to web development, Ajax is truly the “next big thing.” Ajax is becoming an essential ingredient in the makeup of modern web applications. Ajax is being used in the development of all kinds of exciting new applications and rightly so, given its ability to support the creation of web applications with desktop-like performance.
Using Ajax programming techniques you can transform the way your web applications look and feel, providing your visitors with a significantly enriched experience.
By learning how to create Ajax applications, you will develop a highly marketable set of skills that are currently in high demand. To help you accomplish this goal, this book uses a hands-on instructional approach, emphasizing learning by doing, which is accomplished through the development of a series of computer games.
So, whether you are a student who has just signed up for an introductory web development class that uses Ajax, a hobbyist who wants to have some fun, or a web developer interested in expanding your skill set, this book will help you get off to a good start. By the time you are done, you will be ready to begin taking your web applications to the next level.
WHY AJAX?
Ajax changes the way in which web applications are designed, replacing requests for new web pages and screen refreshes with small data queries to web servers. By requesting less data, the web servers are able to respond quicker. Ajax data requests are made asynchronously, meaning that users no longer have to sit and wait for the web server to fulfill a request.
Instead, the user can continue to work with the web application while Ajax collects and processes the web server’s data in the background, and when it is time to do so, Ajax can use the data to dynamically update the web page without forcing a page reload. The end result is a streamlined, faster, and more desktop-like experience.
Because it relies on commonly available technologies like JavaScript and XML, Ajax is readily available and supported by all major computer operating systems and web browsers. You do not have to download and install any special software to work with Ajax, and the people who visit your website do not have to install anything to view and interact with your Ajax applications.
WHO SHOULD READ THIS BOOK?
Ajax Programming for the Absolute Beginner is designed to teach first-time programmers, computer enthusiasts, and web developers interested in adding Ajax to their bag of tricks. An understanding of HTML is required for you to complete this book. While previous programming experience is certainly helpful, as is a basic understanding of JavaScript, the DOM, CSS, the XMLHttpRequest object, and XML, you do not need to be an expert with any of these technologies.
You will learn all that you need to know about each of these technologies as you make your way through this book. In addition to teaching you everything you need to know to get up and running quickly, this book will make your learning experience as enjoyable as possible. This will be accomplished using a games-based instructional approach in which you will learn Ajax programming through the creation of web-based computer games. If this approach to learning sounds interesting and fun to you, then keep reading. It won’t be long before you are creating all kinds of fun and exciting web applications.
So, whether you are a student who has just signed up for an introductory web development class that uses Ajax, a hobbyist who wants to have some fun, or a web developer interested in expanding your skill set, this book will help you get off to a good start. By the time you are done, you will be ready to begin taking your web applications to the next level.
WHY AJAX?
Ajax changes the way in which web applications are designed, replacing requests for new web pages and screen refreshes with small data queries to web servers. By requesting less data, the web servers are able to respond quicker. Ajax data requests are made asynchronously, meaning that users no longer have to sit and wait for the web server to fulfill a request.
Instead, the user can continue to work with the web application while Ajax collects and processes the web server’s data in the background, and when it is time to do so, Ajax can use the data to dynamically update the web page without forcing a page reload. The end result is a streamlined, faster, and more desktop-like experience.
Because it relies on commonly available technologies like JavaScript and XML, Ajax is readily available and supported by all major computer operating systems and web browsers. You do not have to download and install any special software to work with Ajax, and the people who visit your website do not have to install anything to view and interact with your Ajax applications.
WHO SHOULD READ THIS BOOK?
Ajax Programming for the Absolute Beginner is designed to teach first-time programmers, computer enthusiasts, and web developers interested in adding Ajax to their bag of tricks. An understanding of HTML is required for you to complete this book. While previous programming experience is certainly helpful, as is a basic understanding of JavaScript, the DOM, CSS, the XMLHttpRequest object, and XML, you do not need to be an expert with any of these technologies.
You will learn all that you need to know about each of these technologies as you make your way through this book. In addition to teaching you everything you need to know to get up and running quickly, this book will make your learning experience as enjoyable as possible. This will be accomplished using a games-based instructional approach in which you will learn Ajax programming through the creation of web-based computer games. If this approach to learning sounds interesting and fun to you, then keep reading. It won’t be long before you are creating all kinds of fun and exciting web applications.
What You Need to Know
In order to take advantage of this book, you need to be familiar with the basics of HTML development and, of course, you need a website that you can work with and are interested in making more responsive and dynamic. Beyond that, this book will provide everything else you need to know. This includes an overview of how to program using JavaScript and the Document Object Model. This book also provides a basic review of XML and CSS.
Ajax applications have a server-side component needed to make them work. There are many different server-side programming languages from which to choose, including Ruby on Rails, PHP, Java Servlets, and ASP. Of these, PHP is arguably the most popular and easiest to work with and is the server-side programming language that this book uses. You will not have to become a PHP guru in order to make your way through this book. However, a basic understanding of PHP will be helpful. To make sure you have a basic understanding of PHP programming, this book provides a quick server-side PHP programming primer.
Most web hosts support PHP. In fact, it is most likely provided as a free service as part of your web hosting agreement. To make sure it’s available, visit your provider’s website.
HOW THIS BOOK IS ORGANIZED
Although this book has been designed to be read sequentially from cover to cover, it covers a wide variety of topics and you may want to pick and choose which ones you review based on your background and previous experience. Ajax Programming for the Absolute Beginner is organized into five parts. Part I of this book consists of a single chapter that provides an overview of Ajax and its capabilities. You will also see numerous real-world examples of Ajax
in action to help better demonstrate its capabilities.
Part II consists of three chapters that offer an overview of JavaScript and the browser’s Document Object Model (DOM). JavaScript serves as Ajax’s programming language and a good understanding of its syntax and usage is critical to your success as an Ajax developer.
You will learn how to create JavaScripts that store data and apply conditional and looping logic. You will learn how to organize your program code into functions. You will also learn how to work with browser and JavaScript objects and respond to events like mouse clicks and keyboard input. The last chapter in this part provides an overview of the Document Object Model and demonstrates how to use it to access and modify different parts of web pages.
Part III consists of two chapters that are designed to provide the information you need to begin developing Ajax applications. This includes learning how to communicate with and retrieve information from web services and to update web pages without requiring any page refreshes. You will then learn how to use Ajax to perform an assortment of different tasks.
Part IV consists of four chapters, each of which addresses a unique topic that is important to rounding out your Ajax skills. The first chapter demonstrates the benefits of using XML in place of plain text when retrieving data from web servers. The second chapter explains how to use cascading style sheets or CSS to control the presentation and formatting of information displayed on your web pages. The third chapter demonstrates how to work with PHP to develop server-side program code that supports your Ajax applications. The last chapter rounds things out by addressing a number of important design issues that you need to take into consideration as you develop your Ajax applications.
Part V consists of two appendices. The first appendix provides an overview of all the game projects presented throughout this book and explains how to download the book’s source code from its companion website. The second appendix provides a list of online resources you can visit to continue your Ajax education and further your programming knowledge.
The basic outline of the book is as follows.
• Chapter 1, “An Ajax Overview.” This chapter provides a broad overview of Ajax and the technologies that comprise this exciting web development tool. This includes a review of Ajax’s major features and capabilities and its strengths and weaknesses. You will also see examples of websites currently using Ajax to improve their applications and provide
visitors with a better, faster experience.
• Chapter 2, “An Introduction to JavaScript.” Ajax uses JavaScript as its programming language. A solid understanding of JavaScript is therefore key to your success as an Ajax developer. This chapter provides a little background information on how JavaScript came to be and how it is used in Ajax applications. You will then begin learning the basics of JavaScript programming. You will learn how to add JavaScript to your HTML pages and the rules you need to follow to comply with JavaScript syntax requirements. You will also learn how to store data and to apply both conditional and looping logic.
• Chapter 3, “A Deeper Dive into JavaScript.” This chapter rounds out your JavaScript education, teaching you how to respond to events and manage forms. You will learn how to create functions and to control the execution of those functions, using them to interact with web servers and retrieve the data needed by your Ajax applications. You will also learn how to store and process collections of related data using arrays.
• Chapter 4, “Understanding the Document Object Model.” All modern web browsers define the content displayed within web pages in a hierarchical fashion using the DOM. Using the DOM, Ajax programmers are able to dynamically insert and display information retrieved from web servers, without requiring time-consuming and resource-wasting page refreshes. This chapter defines and explains the DOM and demonstrates how to use it within your Ajax applications.
• Chapter 5, “Ajax Basics.” This chapter ties together all of the information already discussed in this book and explains how to use it in the formulation of different types of Ajax applications. You will learn how to work with the XMLHttpRequest object to retrieve text from web servers. You will also create your first Ajax game.
• Chapter 6, “Digging Deeper into Ajax.” This chapter delves deeper into Ajax, introducing you to XML and the retrieval of JavaScript from the web server. You will learn how to create an Ajax application that uses Google Live search to retrieve data and will be introduced to different Ajax frameworks, which you can use to simplify and reduce
the amount of time and effort required to build Ajax applications.
• Chapter 7, “Working with XML.” Rather than relying on plain text, this chapter teaches you how to use XML to transport complex collections of data. You learn how to define XML elements and to extract XML data using properties. You also learn how to process XML data. In addition, you will also learn about JavaScript Object Notation or JSON, which provides an alternative to XML as a means of transporting complex collections of data.
• Chapter 8, “Working with Cascading Style Sheets.” A big part of Ajax web development involves the dynamic display of data in your web pages. This is accomplished by displaying data returned in response to background requests made to web servers. This chapter explains how cascading style sheets or CSS control and manage the display and appearance of server data. You will learn how to make elements visible and invisible and to control their location, color, font, and border.
• Chapter 9, “Working with Ajax and PHP.” Rather than displaying entirely new web pages in response to every request made to web servers, Ajax allows you to retrieve only the data you need from the web server and to use that data to update the display of a web page without having to reload everything. Because of this change in design, new
programs have to be developed on web servers that are designed to work with this new programming model. This chapter demonstrates how to use PHP as the web server’s development language.
• Chapter 10, “Important Ajax Design Issues.” As is the case with all new technologies, Ajax has a number of technical hurdles to overcome. This chapter provides a review of these problems and discusses the ways that Ajax developers are working to overcome them.
• Appendix A, “What's on the Companion Website?” This appendix reviews the Ajax projects presented in this book and made available for download on this book’s companion website (courseptr.com/downloads).
• Appendix B, “What Next?” This appendix provides additional guidance and advice on how to continue your Ajax education. You will find information regarding additional reading resources as well as a listing of websites and blogs where you can read what other people are saying about Ajax.
