Ajax For Dummies®

Table of Contents

Introduction..................................................................1

About This Book...............................................................................................1

Conventions Used in This Book .....................................................................2

Foolish Assumptions .......................................................................................2

How This Book Is Organized...........................................................................3

Part I: Getting Started ............................................................................3

Part II: Programming in Ajax .................................................................3

Part III: Ajax Frameworks ......................................................................3

Part IV: In-Depth Ajax Power.................................................................4

Part V: The Part of Tens.........................................................................4

Icons Used in This Book..................................................................................4

Where to Go from Here....................................................................................5

Part I: Getting Started ...................................................7

Chapter 1: Ajax 101 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9

How Does Ajax Work? ....................................................................................10

A user’s perspective.............................................................................10

A developer’s perspective...................................................................11

What Can You Do with Ajax?.........................................................................12

Searching in real time with live searches..........................................12

Getting the answer with autocomplete .............................................13

Chatting with friends ...........................................................................14

Dragging and dropping with Ajax.......................................................15

Gaming with Ajax..................................................................................16

Getting instant login feedback ............................................................17

Ajax-enabled pop-up menus................................................................18

Modifying Web pages on the fly..........................................................19

Google Maps and Ajax .........................................................................19

When Is Ajax a Good Choice? .......................................................................20

Chapter 2: It’s All About JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . .21

Taking a First Look at Ajax in Action ...........................................................21

Taking a look at the code.....................................................................23

Delving deeper into JavaScript...........................................................24

Enter JavaScript .............................................................................................24

Creating a script ...................................................................................25

Accessing the Web page from JavaScript..........................................26

Oh, those semicolons ..........................................................................28

Adding comments to your JavaScript................................................28

Using separate script files...................................................................29

Examining script errors .......................................................................30

Which browser are you using? ...........................................................32

Making Something Happen: Browser Events..............................................33

Putting browser events to work .........................................................35

Getting the quotation marks right......................................................36

Dividing and Conquering: JavaScript Functions ........................................37

Understanding the problem................................................................38

Putting together a function .................................................................39

Calling the function ..............................................................................40

Passing a single argument to a function............................................44

Using <div> versus <span>..................................................................45

Passing multiple arguments................................................................47

You Must Remember This: Storing Data .....................................................48

Simple data storage with the var statement .....................................49

Churning your data with operators ...................................................50

Altering a variable’s data.....................................................................55

Storing JavaScript objects in a variable ............................................56

Oh, those functions! .............................................................................57

Picking and Choosing with the if Statement ...............................................59

Using the if statement ..........................................................................59

Using the else statement .....................................................................61

Determining browser type and version.............................................62

It Just Gets Better: The for Loop ..................................................................64

Over and Over with the while Loop!............................................................66

Pushing Some Buttons...................................................................................69

Displaying a message with a button click .........................................69

Reading a text field with a button click .............................................71

Part II: Programming in Ajax .......................................73

Chapter 3: Getting to Know Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .75

Writing Some Ajax ..........................................................................................76

Creating the XMLHttpRequest object................................................79

Checking to make sure you have a

valid XMLHttpRequest object .........................................................83

Opening the XMLHttpRequest object................................................84

When you’re ready: Handling asynchronous downloads................85

You got the data!...................................................................................88

Deciding on relative versus absolute URLs ......................................90

Other ways of getting XMLHttpRequest objects..............................91

Interactive Mouseovers Using Ajax .............................................................93

Getting Interactive with Server-Side Scripting ...........................................94

Choosing a server-side scripting language .......................................95

Connecting to a script on a server.....................................................95

Time for Some XML........................................................................................97

Getting XML from a PHP script...........................................................98

Setting up a Web page to read XML .................................................100

Handling the XML you read from the server ..................................101

Extracting data from XML .................................................................102

Listing the colors in the drop-down control ...................................104

Passing Data to the Server with GET.........................................................106

Passing Data to the Server with POST.......................................................109

Chapter 4: Ajax in Depth . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .113

Returning JavaScript from the Server .......................................................114

When do you send back JavaScript from the server? ...................114

How does returning JavaScript work? .............................................114

Returning a JavaScript object...........................................................118

Connecting to Google for a Live Search ....................................................120

Handling the data Google sends you ...............................................121

Detecting keystrokes..........................................................................122

Connecting to Google Suggest ..........................................................123

Showing Google’s response...............................................................125

Calling a Different Domain ..........................................................................130

Reversing the Roles: Performing Validation on the Server.....................131

Getting Some Amazing Data with HEAD Requests...................................134

Returning all the header data you can get ......................................135

Finding the last-modified date ..........................................................136

Does a URL exist? ...............................................................................139

Finding the Problem: Debugging Ajax .......................................................140

Setting up your browser for debugging...........................................140

Debugging with Greasemonkey ........................................................142

Overload: Handling Multiple Concurrent Requests.................................143

Double the fun ....................................................................................144

Packing it all into an array.................................................................146

Getting the inside scoop on inner functions...................................147

Part III: Ajax Frameworks ..........................................151

Chapter 5: Introducing Ajax Frameworks . . . . . . . . . . . . . . . . . . . . . . .153

A Little More Ajax Power.............................................................................154

Introducing the Ajax Gold Framework ......................................................157

Using GET to get text .........................................................................158

Using GET to get XML ........................................................................162

Using POST to post data and get text ..............................................166

Using POST to post data and get XML.............................................170

Finding Ajax Frameworks in the Wild ........................................................173

Easy Ajax with AJAXLib .....................................................................174

Grabbing XML with libXmlRequest..................................................176

Chapter 6: More Powerful Ajax Frameworks . . . . . . . . . . . . . . . . . . . .181

Dragging and Dropping with Shopping Carts ...........................................182

Handling mouse events .....................................................................185

Handling mouse down events...........................................................187

Handling mouse-move events...........................................................189

Handling mouse up events................................................................189

Updating the shopping cart ..............................................................191

Looking at Some Heavier-Weight Frameworks.........................................194

Getting XMLHttpRequest objects with XHConn.............................194

The Simple AJAX Code Kit: Sack ......................................................196

Parsing XML with Interactive Website Framework ........................198

Handling older browsers with HTMLHttpRequest.........................199

Decoding XML with Sarissa...............................................................201

Creating visual effects with Rico ......................................................204

Overcoming caching with the Http framework ..............................211

Chapter 7: Server-Side Ajax Frameworks . . . . . . . . . . . . . . . . . . . . . . .213

Writing JavaScript by Using Ajax Frameworks.........................................213

Sajax and PHP .....................................................................................214

Xajax and PHP.....................................................................................218

LibAjax and PHP .................................................................................221

JPSpan and PHP..................................................................................224

Accessing Java with Direct Web Remoting ...............................................225

Setting up for Java on the Web .........................................................225

Connecting to Java by using DWR....................................................225

Building Web Applications with Echo2 .....................................................228

Handling Ajax and JavaServer Pages with Ajax Tags ..............................229

Handling Java with SWATO .........................................................................231

Tracking Down the Many Other Frameworks Available..........................232

Developing amazing applications with WebORB............................232

Ruby on Rails ......................................................................................233

Backbase..............................................................................................234

Dojo ......................................................................................................234

Atlas.NET.............................................................................................234

Part IV: In-Depth Ajax Power .....................................235

Chapter 8: Handling XML int Ajax Applications . . . . . . . . . . . . . . . . .237

Understanding Basic XML...........................................................................238

What’s in a tag?...................................................................................238

Keeping XML documents well-formed.............................................239

Making an XML document valid .......................................................240

Requesting XML Data in Ajax......................................................................240

Extracting XML Data Using Properties ......................................................243

Right on the node ...............................................................................243

Introducing the JavaScript properties.............................................243

Navigating an XML document using JavaScript properties ..........245

Extracting with nodeValue ................................................................249

Handling white space in Mozilla and Firefox ..................................250

Removing white space in Mozilla and Firefox ................................254

Accessing XML Elements by Name............................................................258

Accessing Attribute Values in XML Elements...........................................260

Validating XML Documents in Ajax Applications.....................................263

Chapter 9: Working with Cascading Style Sheets in Ajax

Applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .269

An Ajax-Driven Menu System......................................................................271

Setting up the styles...........................................................................272

Handling mouse events .....................................................................277

Displaying a menu ..............................................................................278

Hiding a menu .....................................................................................280

Getting a menu’s item from the server ............................................281

Handling the menu items ..................................................................282

Displaying Text That Gets Noticed ............................................................285

Styling text...........................................................................................287

Handling colors and backgrounds ...................................................289

Positioning using styles.....................................................................292

Chapter 10: Working with Ajax and PHP . . . . . . . . . . . . . . . . . . . . . . .297

Starting with PHP .........................................................................................298

Getting a Handle on Variables ....................................................................301

Handling Your Data with Operators...........................................................304

Making Choices with the if Statement .......................................................306

Round and Round with Loops....................................................................307

Handling HTML Controls.............................................................................310

Getting data from text fields .............................................................311

Checking out data from check boxes...............................................312

Tuning in data from radio buttons ...................................................314

Sending Data to the Server .........................................................................316

Reading Files.................................................................................................317

Writing Files ..................................................................................................319

Working with Databases..............................................................................320

Part V: The Part of Tens .............................................323

Chapter 11: Ten Ajax Design Issues You Should Know About . . . . .325

Breaking the Back Button and Bookmarks ...............................................325

Giving Visual Cues........................................................................................326

Leaving the User in Control ........................................................................32

Remembering All the Different Browsers..................................................327

Showing Users When Text Changes...........................................................327

Avoiding a Sluggish Browser ......................................................................328

Handling Sensitive Data...............................................................................328

Creating a Backup Plan................................................................................328

Showing Up in Search Engines ...................................................................328

Sidestepping a Browser’s Cache ................................................................329

Chapter 12: Ten Super-Useful Ajax Resources . . . . . . . . . . . . . . . . . .331

The Original Ajax Page ................................................................................331

The Ajax Patterns Page ...............................................................................332

The Wikipedia Ajax Page.............................................................................332

Ajax Matters..................................................................................................332

XMLHttpRequest Object References .........................................................333

Ajax Blogs......................................................................................................333

Ajax Examples...............................................................................................334

Ajax Tutorials ...............................................................................................334

Ajax Discussion Group ................................................................................334

More Depth on XMLHttpRequest...............................................................335

Index........................................................................337