Beginning Ajax with PHP: From Novice to Professional

Description

Ajax breathes new life into web applications by transparently communicating and manipulating data in conjunction with a server-based technology. Of all the server-based technologies capable of working in conjunction with Ajax, perhaps none are more suitable than PHP, the world's most popular scripting language.

Beginning Ajax with PHP: From Novice to Professional is the first book to introduce how these two popular technologies can work together to create next-generation applications. Author Lee Babin covers what you commonly encounter in daily web application development tasks, and shows you how to build PHP/Ajax-enabled solutions for forms validation, file upload monitoring, database-driven information display and manipulation, web services, Google Maps integration, and more.

You'll also be introduced to other key topics like conquering cross-platform issues, countering potential security holes, and testing and debugging JavaScript with efficiency. All examples are based on real-world scenarios, so you'll be able to apply what you learn to your own development situations.

 Table of Contents
* Introducing Ajax
* Ajax Basics
* PHP and Ajax
* Database-Driven Ajax
* Forms
* Images
* A Real-World Ajax Application
* Ergonomic Display
* Web Services
* Spatially Enabled Web Applications
* Cross-Browser Issues
* Security
* Testing and Debugging
* The DOM

CONTENTS:

Contents
About the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix
About the Technical Reviewer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi
Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv

CHAPTER 1 Introducing Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
From CGI to Flash to DHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Pros and Cons of Today's Web Application Environment . . . . . . . . . . . . . . . 3
Enter Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Ajax Requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

CHAPTER 2 Ajax Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
HTTP Request and Response Fundamentals . . . . . . . . . . . . . . . . . . . . . . . . 11
The XMLHttpRequest Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
XMLHttpRequest Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
XMLHttpRequest Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Cross-Browser Usage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Sending a Request to the Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Basic Ajax Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

CHAPTER 3 PHP and Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Why PHP and Ajax? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Client-Driven Communication, Server-Side Processing . . . . . . . . . . . . . . . 26
Basic Examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Expanding and Contracting Content . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Auto-Complete . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Form Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Tool Tips . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

CHAPTER 4 Database-Driven Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Introduction to MySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Connecting to MySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Querying a MySQL Database . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
MySQL Tips and Precautions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Putting Ajax-Based Database Querying to Work . . . . . . . . . . . . . . . . . . . . . 58
Auto-Completing Properly . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Loading the Calendar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

CHAPTER 5 Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Bringing in the Ajax: GET vs. POST . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Passing Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Form Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86

CHAPTER 6 Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Uploading Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Displaying Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Loading Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Dynamic Thumbnail Generation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99

CHAPTER 7 A Real-World Ajax Application . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
The Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
How It Looks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
How It Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122

CHAPTER 8 Ergonomic Display . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
When to Use Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Back Button Issues . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Ajax Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Hiding and Showing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Introduction to PEAR . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
HTML_Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134

CHAPTER 9 Web Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Introduction to SOAP Web Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Bring in the Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
Let's Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
How the SOAP Application Works . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147

CHAPTER 10 Spatially Enabled Web Applications . . . . . . . . . . . . . . . . . . . . . 149
Why Is Google Maps so Popular? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Where to Start . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
How Our Mapping System Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174

CHAPTER 11 Cross-Browser Issues . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Ajax Portability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Saving the Back Button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Ajax Response Concerns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
Degrading JavaScript Gracefully . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
The noscript Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Browser Upgrades . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185

CHAPTER 12 Security . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
Increased Attack Surface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
Strategy 1: Keep Related Entry Points Within the Same Script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
Strategy 2: Use Standard Functions to Process and Use User Input . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
Cross-Site Scripting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Strategy 1: Remove Unwanted Tags from Input Data . . . . . . . . . . . 191
Strategy 2: Escape Tags When Outputting Client-Submitted Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Strategy 3: Protect Your Sessions . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Cross-Site Request Forgery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Confirming Important Actions Using a One-Time Token . . . . . . . . 193
Confirming Important Actions Using the User's Password . . . . . . . 195
GET vs. POST . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
Accidental CSRF Attacks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
Denial of Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
Strategy 1: Use Delays to Throttle Requests . . . . . . . . . . . . . . . . . . 197
Strategy 2: Optimize Ajax Response Data . . . . . . . . . . . . . . . . . . . . 198
Protecting Intellectual Property and Business Logic . . . . . . . . . . . . . . . . 200
Strategy 1: JavaScript Obfuscation . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Strategy 2: Real-Time Server-Side Processing . . . . . . . . . . . . . . . . 201
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204

CHAPTER 13 Testing and Debugging . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
JavaScript Error Reporting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Firefox Extensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Web Developer Toolbar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
The DOM Inspector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
LiveHTTPHeaders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Venkman JavaScript Debugger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
HTML Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
Internet Explorer Extensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Internet Explorer Developer Toolbar . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Fiddler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216

CHAPTER 14 The DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Accessing DOM Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
document.getElementById . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
getElementsByTagName . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
Accessing Elements Within a Form . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Adding and Removing DOM Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Manipulating DOM Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Manipulating XML Using the DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222
Combining Ajax and XML with the DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
How the Ajax Location Manager Works . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235