Build Your Own AJAX Web Applications

Table of Contents

Preface ..................................................................................................... xi

1. AJAX: the Overview ............................................................................... 1

AJAX Web Applications ....................................................................... 2

The Bad Old Days ....................................................................... 3

Prehistoric AJAX .......................................................................... 3

What Makes AJAX Cool ....................................................................... 4

AJAX Technologies ............................................................................... 8

Data Exchange and Markup: XML ............................................... 8

W3C Document Object Model .................................................. 10

Presentation: CSS ...................................................................... 11

Communication: XMLHttpRequest .............................................. 11

Putting it All Together: JavaScript ............................................... 12

Summary ........................................................................................... 12

2. Basic XMLHttpRequest ........................................................................ 13

A Simple AJAX Library ...................................................................... 14

Starting our Ajax Class .............................................................. 14

Creating an XMLHttpRequest Object ........................................... 16

Sending a Request ...................................................................... 18

Processing the Response ............................................................. 23

Aborting the Request ................................................................. 28

Wrapping it Up .......................................................................... 29

Example: a Simple Test Page ....................................................... 29

Example: a Simple AJAX App ............................................................. 33

Laying the Foundations .............................................................. 33

Handling the Result with showPoll ............................................ 34

Starting the Process Over Again .................................................. 36

Full Example Code ..................................................................... 36

Running the App ........................................................................ 38

Further Reading ................................................................................. 38

JavaScript’s Object Model .......................................................... 38

XMLHttpRequest ...................................................................... 39

Summary ........................................................................................... 39

3. The “A” in AJAX .................................................................................. 41

Planned Application Enhancements .................................................... 42

Organizing the Code .......................................................................... 43

Loss of Scope with setTimeout .................................................. 44

Creating the Monitor Object ...................................................... 47

Licensed to siowchen@darke.biz

Configuring and Initializing our Application ....................................... 48

Setting Up the UI .............................................................................. 49

The toggleButton Method ........................................................ 50

The toggleStatusMessage Method ........................................... 51

Checking your Work In Progress ................................................. 52

Polling the Server ............................................................................... 53

Handling Timeouts ............................................................................ 57

The Response Times Bar Graph .......................................................... 58

The Running List in pollArray .................................................. 58

Displaying the Results ................................................................ 59

Stopping the Application ........................................................... 66

Status Notifications ........................................................................... 67

The Status Animation ................................................................ 68

Setting Up Status ..................................................................... 70

Internet Explorer Memory Leaks ................................................ 71

The displayOpacity Method .................................................... 72

Running the Animation .............................................................. 75

Styling the Monitor ........................................................................... 80

Summary ........................................................................................... 83

4. AJAX and POST Requests ..................................................................... 85

Review: Sending Data with GET .......................................................... 86

Sending Data with POST ..................................................................... 86

A Quick Form POST .................................................................... 88

Using formData2QueryString .................................................... 88

An Application Login ......................................................................... 90

Accessibility and Backward Compatibility .................................. 90

Markup and CSS ....................................................................... 91

Creating the Login Class ............................................................ 94

Setting it Up with init .............................................................. 95

Setting the Login Prompt ........................................................... 97

Ensuring Valid Input .................................................................. 99

Submitting the Form Data ....................................................... 103

Processing the Submission ........................................................ 104

Showing Processing Status ....................................................... 107

Handling the Server Response .................................................. 109

Dealing with Login Failures ...................................................... 110

AJAX and Screen Readers ................................................................. 112

Thinking “Linearly” ................................................................. 112

Skip Navigation Links .............................................................. 115

Notification for Dynamic Content ............................................ 117

Testing in Multiple Readers ...................................................... 118

iv

Build Your Own AJAX Web Applications

Licensed to siowchen@darke.biz

The Screen Reader Code .................................................................. 121

Setting Up Notification ............................................................ 122

Showing Notifications .............................................................. 123

Enabling the Submit Button ..................................................... 125

Adding Instructions to a Form Element .................................... 126

Further Reading ............................................................................... 127

Summary ......................................................................................... 128

5. Broader AJAX with Edit-in-place ......................................................... 129

Page Markup .................................................................................... 130

Accessibility and Backward Compatibility ................................. 132

The Blog Class ................................................................................. 133

The init Method ............................................................................ 134

Edit-in-place .................................................................................... 134

Editing an Entry .............................................................................. 137

The getSrcElem Method ......................................................... 138

Getting the Entry’s ID ............................................................. 139

Changing the State .................................................................. 140

Turning on Editable State ......................................................... 140

Enabling and Disabling Other Input ......................................... 145

Returning to Display State ....................................................... 146

Saving Changes ................................................................................ 148

The Status Animation ...................................................................... 149

Starting the Animation ............................................................. 150

The doStatusAnim Method ...................................................... 151

The Fake Back-end Page ................................................................... 152

Using YAML ............................................................................ 152

The PHP Code ......................................................................... 154

Response Examples .................................................................. 154

Parsing YAML in JavaScript ...................................................... 155

Handling the Response ..................................................................... 156

Stopping the Status Animation ........................................................ 157

Cleaning Up with stopReset .................................................... 157

Adding a New Entry ........................................................................ 158

Adding the New Entry divs ..................................................... 159

Canceling the New Entry ......................................................... 161

The Placeholder ID .................................................................. 162

Future Enhancements ....................................................................... 163

Loading Existing Entries ........................................................... 163

Concurrency and Locking ......................................................... 164

Errors and Timeouts ................................................................. 165

Summary ......................................................................................... 165

v

Licensed to siowchen@darke.biz

6. Web Services and Slide-and-hide ........................................................ 167

Slide-and-hide Window .................................................................... 168

Web Services: an Overview ............................................................... 168

APIs and Protocols ........................................................................... 169

REST ....................................................................................... 169

XML-RPC ................................................................................ 170

SOAP ...................................................................................... 171

Network-centric vs Application-centric ..................................... 171

Amazon Web Services Client ............................................................ 172

Amazon Web Services Accounts ............................................... 173

Amazon E-Commerce Service ................................................... 174

The Client Class ............................................................................. 175

Initial Setup ............................................................................. 176

Cross-site AJAX ................................................................................ 177

XMLHttpRequest and Security .................................................. 177

An AJAX Relay ......................................................................... 178

The Proxy Script ...................................................................... 179

Sending the Request to Amazon Web Services .................................. 182

Getting the Search Text ............................................................ 183

Sending the Request ................................................................ 183

Handling the Results from Amazon .................................................. 184

Using xml2ObjArray ................................................................ 185

Formatting the Results ..................................................................... 187

Performing the Slide-and-hide .......................................................... 188

The Slide-and-hide Effect ......................................................... 190

AJAX Fat-client Code ....................................................................... 191

Legacy Browsers and Accessibility ............................................ 191

Usability: the Back Button Problem .......................................... 192

Debugging Client-side AJAX ..................................................... 194

Further Reading ............................................................................... 196

Cross-site Scripting (XSS) ........................................................ 196

Mashups .................................................................................. 197

Summary ......................................................................................... 197

7. More Web Services and a Back Button ............................................... 199

The Search Application .................................................................... 200

Accessibility and Backward Compatibility ................................. 201

Fixing the Back Button ............................................................. 201

Setting Up the Search Class ............................................................. 202

The init Method ............................................................................ 202

Disabling and Enabling Buttons ............................................... 205

Enabling Search ............................................................................... 205

vi

Build Your Own AJAX Web Applications

Licensed to siowchen@darke.biz

The submitSearch Method .............................................................. 206

Passing to the Proxy Script ....................................................... 207

Submitting the Search .............................................................. 207

The Proxy Script .............................................................................. 208

Requirements ........................................................................... 209

Initial Setup ............................................................................. 209

Amazon Web Services ...................................................................... 210

Printing the Response ...................................................................... 211

Google Web APIs ............................................................................. 211

Using a SOAP Library .............................................................. 211

The eBay Platform ........................................................................... 214

A Few Hurdles ......................................................................... 215

The Code ................................................................................. 216

Testing the Proxy Script .................................................................... 217

Handling the Results ........................................................................ 218

Amazon ................................................................................... 218

Google ..................................................................................... 220

eBay ........................................................................................ 223

Displaying the Results .............................................................. 223

Fallback for Non-JavaScript Browsers ....................................... 223

Screen Reader Code ......................................................................... 225

Alerting Users to Page Changes ................................................ 226

The Back Button Problem ................................................................ 227

The Two Options ..................................................................... 227

SearchHistory Class ............................................................... 228

Adding to the History .............................................................. 229

Navigating the History ............................................................. 231

Displaying the History Entry ................................................... 232

Building your own Back Button ........................................................ 233

Adding the Buttons .................................................................. 233

Using the Browser’s Back Button ...................................................... 234

Using the Location Hash .......................................................... 235

Setting Up the Fix .................................................................... 235

Setting the Hash ...................................................................... 237

Watching the Hash .................................................................. 238

Displaying the Entry ................................................................ 239

Decisions, Decisions ................................................................. 240

Search App Enhancements ............................................................... 240

Paging ...................................................................................... 240

History Menu .......................................................................... 240

Further Reading ............................................................................... 241

Apache2 and OpenSSL on Linux .............................................. 241

vii

Licensed to siowchen@darke.biz

Apache2 and OpenSSL on Windows ........................................ 241

WSDL ..................................................................................... 241

Summary ......................................................................................... 242

8. Drag and Drop with AJAX Chess ......................................................... 243

AJAX Chess ...................................................................................... 243

Problems to Solve .................................................................... 244

The Chess Class ............................................................................... 245

Starting the Application ................................................................... 246

Setting Up the Board ....................................................................... 247

The Status Panel ...................................................................... 249

Loading a Game ............................................................................... 250

Using JSON ..................................................................................... 251

Encoding an Object with JSON ................................................ 251

Decoding JSON Strings ............................................................ 252

Displaying Game State ..................................................................... 253

The handleLoadGame Method .................................................. 253

The displayGame Method ........................................................ 255

Global Event Handlers ..................................................................... 258

Going Global ........................................................................... 259

Handling Mouse Clicks ............................................................ 259

Moving Pieces .................................................................................. 261

The mousemove Handler ........................................................... 262

The mouseup Handler ............................................................... 262

The Draggable Class ........................................................................ 263

The Click Offset ....................................................................... 264

Viewport Positions and Board Positions .................................... 264

The move Method .................................................................... 265

The drop Method .................................................................... 266

The doMove Method ......................................................................... 269

Making a Backup ..................................................................... 270

Error Checking ......................................................................... 270

Aborting the Move on Error ..................................................... 271

Saving the Move ...................................................................... 272

The handleMove Method ................................................................. 274

Polling for Server State ..................................................................... 276

Wiping the Board ............................................................................. 278

AJAX Chess Back End ...................................................................... 280

Future Enhancements ....................................................................... 280

Summary ......................................................................................... 281

viii

Build Your Own AJAX Web Applications

Licensed to siowchen@darke.biz

A. AJAX Toolkits .................................................................................... 283

Index ....................................................................................................... 287