Ajax Starter Kit Quick Start Guide Phil Ballard 800 East 96th Street,Indianapolis,Indiana 46240 Ajax Starter Kit Quick Start Guide Copyright © 2007 by Sams Publishing All rights reserved.No part of this book shall be reproduced,stored in a retrieval system,or transmitted by any means,electronic,mechanical,photocopying, recording,or otherwise,without written permission from the publisher.No patent liability is assumed with respect to the use of the information contained herein.Although every precaution has been taken in the preparation of this book,the publisher and author assume no responsibility for errors or omissions. Nor is any liability assumed for damages resulting from the use of the informa- tion contained herein. ISBN-10:0-672-32960-3 ISBN-13:978-0-672-32960-9 Library of Congress Cataloging-in-Publication data is on file. Printed in the United States of America First Printing:June 2007 09 08 07 4 3 2 1 Trademarks All terms mentioned in this book that are known to be trademarks or service marks have been appropriately capitalized.Sams Publishing cannot attest to the accuracy of this information.Use of a term in this book should not be regarded as affecting the validity of any trademark or service mark. Warning and Disclaimer Every effort has been made to make this book as complete and as accurate as possible,but no warranty or fitness is implied.The information provided is on an “as is”basis.The author and the publisher shall have neither liability nor respon- sibility to any person or entity with respect to any loss or damages arising from the information contained in this book or from the use of the CD or programs accompanying it. Reader Services Visit our website and register this product at www.samspublishing.com/ registerfor convenient access to any updates,downloads,or errata that may be available. ii Table of Contents Welcome to Ajax! 1 Part I:A Refresher onWeb Technologies 1: Anatomy of a Website 7 Workings of the World Wide Web. . . . . . . . . . . . . . . . . . 7 2: Writing Web Pages in HTML 13 Introducing HTML . . . . . . . . . . . . . . . . . . . . . . . . . 13 Elements of an HTML Page . . . . . . . . . . . . . . . . . . . . 15 A More Advanced HTML Page. . . . . . . . . . . . . . . . . . . 20 Some Useful HTML Tags . . . . . . . . . . . . . . . . . . . . . . 22 Cascading Style Sheets in Two Minutes. . . . . . . . . . . . . . 23 3: Sending Requests Using HTTP 25 Introducing HTTP. . . . . . . . . . . . . . . . . . . . . . . . . . 25 The HTTP Request and Response. . . . . . . . . . . . . . . . . 26 HTML Forms. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 4: Client-Side Coding Using JavaScript 33 About JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . 33 In at the Deep End . . . . . . . . . . . . . . . . . . . . . . . . . 35 Manipulating Data in JavaScript. . . . . . . . . . . . . . . . . . 44 5: Server-Side Programming in PHP 47 Introducing PHP . . . . . . . . . . . . . . . . . . . . . . . . . . 47 Embedding PHP in HTML Pages. . . . . . . . . . . . . . . . . . 48 Variables in PHP. . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Controlling Program Flow . . . . . . . . . . . . . . . . . . . . . 51 6: A Brief Introduction to XML 53 Introducing XML . . . . . . . . . . . . . . . . . . . . . . . . . . 53 XML Basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 JavaScript and XML. . . . . . . . . . . . . . . . . . . . . . . . . 57 The Document Object Model (DOM) . . . . . . . . . . . . . . . 58 iii Ajax Starter Kit Quick Start Guide Part II:Introducing Ajax 7: Anatomy of an Ajax Application 61 The Need for Ajax. . . . . . . . . . . . . . . . . . . . . . . . . . 61 Introducing Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . 63 The Constituent Parts of Ajax . . . . . . . . . . . . . . . . . . . 66 Putting It All Together . . . . . . . . . . . . . . . . . . . . . . . 68 8: The XMLHTTPRequest Object 71 More About JavaScript Objects . . . . . . . . . . . . . . . . . . 71 Introducing XMLHTTPRequest . . . . . . . . . . . . . . . . . . 73 Creating the XMLHTTPRequest Object. . . . . . . . . . . . . . 73 9: Talking with the Server 81 Sending the Server Request. . . . . . . . . . . . . . . . . . . . 81 Monitoring Server Status. . . . . . . . . . . . . . . . . . . . . . 86 The Callback Function . . . . . . . . . . . . . . . . . . . . . . . 87 10: Using the Returned Data 91 The responseText and responseXML Properties. . . . . . . . . 91 Another Useful JavaScript DOM Property . . . . . . . . . . . . 95 Parsing responseXML. . . . . . . . . . . . . . . . . . . . . . . . 96 Providing User Feedback. . . . . . . . . . . . . . . . . . . . . . 97 11: Our First Ajax Application 101 Constructing the Ajax Application. . . . . . . . . . . . . . . . 101 The HTML Document. . . . . . . . . . . . . . . . . . . . . . . 102 Adding JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . 103 Putting It All Together . . . . . . . . . . . . . . . . . . . . . . 107 Part III:More Complex Ajax Technologies 12: Returning Data as Text 111 Getting More from the responseText Property. . . . . . . . . 111 13: AHAH—Asynchronous HTML and HTTP 119 Introducing AHAH. . . . . . . . . . . . . . . . . . . . . . . . . 119 Creating a Small Library for AHAH. . . . . . . . . . . . . . . . 120 Using myAHAHlib.js. . . . . . . . . . . . . . . . . . . . . . . . 122 iv Contents 14: Returning Data as XML 129 Adding the “x”to Ajax. . . . . . . . . . . . . . . . . . . . . . . 129 The responseXML Property. . . . . . . . . . . . . . . . . . . . 130 Project—An RSS Headline Reader. . . . . . . . . . . . . . . . 133 15: Web Services and the REST Protocol 143 Introduction to Web Services . . . . . . . . . . . . . . . . . . 143 REST—Representational State Transfer . . . . . . . . . . . . . 144 Using REST in Practice . . . . . . . . . . . . . . . . . . . . . . 146 REST and Ajax. . . . . . . . . . . . . . . . . . . . . . . . . . . 150 16: Web Services Using SOAP 151 Introducing SOAP (Simple Object Access Protocol) . . . . . . 151 The SOAP Protocol . . . . . . . . . . . . . . . . . . . . . . . . 152 Using Ajax and SOAP. . . . . . . . . . . . . . . . . . . . . . . 155 Reviewing SOAP and REST. . . . . . . . . . . . . . . . . . . . 156 17: A JavaScript Library for Ajax 157 An Ajax Library . . . . . . . . . . . . . . . . . . . . . . . . . . 157 Reviewing myAHAHlib.js. . . . . . . . . . . . . . . . . . . . . 158 Implementing Our Library . . . . . . . . . . . . . . . . . . . . 159 Using the Library . . . . . . . . . . . . . . . . . . . . . . . . . 163 Extending the Library. . . . . . . . . . . . . . . . . . . . . . . 166 18: Ajax “Gotchas” 167 Common Ajax Errors . . . . . . . . . . . . . . . . . . . . . . . 167 The Back Button. . . . . . . . . . . . . . . . . . . . . . . . . . 167 Bookmarking and Links. . . . . . . . . . . . . . . . . . . . . . 168 Telling the User That Something Is Happening. . . . . . . . . 169 Making Ajax Degrade Elegantly . . . . . . . . . . . . . . . . . 169 Dealing with Search Engine Spiders. . . . . . . . . . . . . . . 170 Pointing Out Active Page Elements . . . . . . . . . . . . . . . 170 Don’t Use Ajax Where It’s Inappropriate. . . . . . . . . . . . . 171 Security . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172 Test Code Across Multiple Platforms. . . . . . . . . . . . . . . 172 Ajax Won’t Cure a Bad Design . . . . . . . . . . . . . . . . . . 173 Some Programming Gotchas. . . . . . . . . . . . . . . . . . . 173 v Ajax Starter Kit Quick Start Guide Part IV:Commercial and Open Source Ajax Resources 19: The prototype.js Toolkit 175 Introducing prototype.js . . . . . . . . . . . . . . . . . . . . . 175 Wrapping XMLHTTPRequest—the Ajax Object. . . . . . . . . 178 Example Project—Stock Price Reader. . . . . . . . . . . . . . 180 20: Using Rico 183 Introducing Rico. . . . . . . . . . . . . . . . . . . . . . . . . . 183 Rico’s Other Interface Tools. . . . . . . . . . . . . . . . . . . . 187 21: Using XOAD 193 Introducing XOAD. . . . . . . . . . . . . . . . . . . . . . . . . 193 XOAD HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196 Advanced Programming with XOAD . . . . . . . . . . . . . . 199 Index 201 vi Welcome to Ajax! Ajax is stirring up high levels of interest in the Internet development community. Ajax allows developers to provide visitors to their websites slick,intuitive user interfaces somewhat like those of desktop applications instead of using the tradi- tional page-based web paradigm. Based on well-known and understood technologies such as JavaScript and XML,Ajax is easily learned by those familiar with the mainstream web design technologies and does not require users to have any browser plug-ins or other special software. About This Book Part of the Sams Publishing Teach Yourself in 10 Minutesseries,this book aims to teach the basics of building Ajax applications for the Internet.Divided into bite- sized lessons,each designed to take no more than about 10 minutes to complete, this volume offers ■ A review of the technologies on which the World Wide Web is based ■ Basic tutorials/refreshers in HTML,JavaScript,PHP,and XML ■ An understanding of the architecture of Ajax applications ■ Example Ajax coding projects After completing all the lessons you’ll be equipped to write and understand basic Ajax applications,including all necessary client- and server-side programming. What Is Ajax? Ajax stands for Asynchronous Javascript and XML.Although strictly speaking Ajax itself is not a technology,it mixes well-known programming techniques in an uncommon way to enable web developers to build Internet applications with much more appealing user interfaces than those to which we have become accustomed. When using popular desktop applications,we expect the results of our work to be made available immediately,without fuss,and without us having to wait for the whole screen to be redrawn by the program.While using a spreadsheet such as Excel,for instance,we expect the changes we make in one cell to propagate immediately INTRODUCTION: Welcome to Ajax! through the neighboring cells while we continue to type,scroll the page, or use the mouse. Unfortunately,this sort of interaction has seldom been available to users of web-based applications.Much more common is the experience of entering data into form fields,clicking on a button or link,and then sitting back while the page slowly reloads to exhibit the results of the request.In addition,we often find that the majority of the reloaded page consists of elements that are identical to those of the previous page and that have therefore been reloaded unnecessarily;background images,logos,and menus are frequent offenders. Ajax promises us a solution to this problem.By working as an extra layer between the user’s browser and the web server,Ajax handles serv- er communications in the background,submitting server requests and processing the returned data.The results may then be integrated seam- lessly into the page being viewed,without that page needing to be refreshed or a new one loaded. In Ajax applications,such server requests are not necessarily synchro- nized with user actions such as clicking on buttons or links.A well-writ- ten Ajax application may already have asked of the server,and received, the data required by the user—perhaps before the user even knew she wanted it.This is the meaning of the asynchronouspart of the Ajax acronym. The parts of an Ajax application that happen “under the hood”of the user’s browser,such as sending server queries and dealing with the returned data,are written in JavaScript,and XMLis an increasingly pop- ular means of coding and transferring formatted information used by Ajax to efficiently transfer data between server and client. We’ll look at all these techniques,and how they can be made to work together,as we work through the lessons. About This Starter Kit The Ajax Starter Kitincludes everything a web developer needs to learn the basics of Ajax and its building-block technologies—HTML, JavaScript,PHP,and XML. Aimed primarily at web developers seeking to build better interfaces for the users of their web applications,this book also should prove use- ful to web designers eager to learn how the latest techniques can offer new outlets for their creativity. 2 About This Starter Kit Although the nature of Ajax applications means that they require some programming,all the required technologies are explained from first princi- ples within the book,so even those with little or no programming experi- ence should be able to follow the lessons without a great deal of difficulty. Quick Start Guide The Ajax Starter Kit Quick Start Guideis the best starting point for the would-be Ajax developer. Divided into 21 short,easy-to-read lessons, the booklet offers an overview of the basics and ■ A review of the technologies on which the World Wide Web is based ■ Basic tutorials/refreshers in HTML,JavaScript,PHP,and XML ■ An understanding of the architecture of Ajax applications ■ Example Ajax coding projects After completing all the lessons you’ll be equipped to write and under- stand basic Ajax applications,including all necessary client- and server- side programming. Reference Library The Ajax Starter Kit’s CD-ROM includes—in easy to search and read PDF format — a complete library of tutorials and how-to’s on all the main technologies that make up Ajax: ■ Sams Teach Yourself JavaScript in 24 Hours ■ Sams Teach Yourself HTML in 10 Minutes ■ Sams Teach Yourself XML in 10 Minutes ■ Sams Teach Yourself PHP in 10 Minutes Toolkit The CD-ROM also includes a complete toolkit of all the technologies you need to set up a testing environment on your Windows,Mac,or Linux computer,so you can work with the examples from the book and begin to create your own: ■ XAMPP for Windows,Mac OS X,and Linux—an easy-to-install package to set up a PHP- and MySQL-enabled Apache server on your computer 3