Building a Web Site with Ajax Visual QuickProject Guide by Larry Ullman Visual QuickProject Guide Building a Web Site with Ajax Larry Ullman Peachpit Press 1249 Eighth Street Berkeley, CA 94710 510/524-2178 510/524-2221 (fax) Find us on the Web at: www.peachpit.com To report errors, please send a note to: [email protected] Peachpit Press is a division of Pearson Education. Copyright © 2008 by Larry Ullman Editor: Rebecca Gulick Copy Editor: Liz Welch Production Editors: Lisa Brazieal and Tracey Croom Compositor: Roberta Great Indexers: Ron Strauss and Ann Rogers Technical Reviewer: Arpad Ray Cover photo: Quigley Photography/iStockphoto.com Notice of Rights All rights reserved. No part of this book may be reproduced or transmitted in any form by any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior written permission of the publisher. For information on getting permission for reprints and excerpts, contact [email protected]. Notice of Liability The information in this book is distributed on an “As Is” basis, without warranty. While every precaution has been taken in the preparation of the book, neither the author nor Peachpit Press shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the instructions contained in this book or by the computer software and hardware products described in it. Trademarks Visual QuickProject Guide is a registered trademark of Peachpit Press, a division of Pearson Education. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and Peachpit was aware of a trademark claim, the designations appear as requested by the owner of the trademark. All other product names and services identifi ed throughout this book are used in editorial fashion only and for the benefi t of such companies with no intention of infringement of the trademark. No such use, or the use of any trade name, is intended to convey endorsement or other af liation with this book. ISBN-13: 978-0-321-52441-6 ISBN-10: 0-321-52441-1 9 8 7 6 5 4 3 2 1 Printed and bound in the United States of America To Zoe Isabella and Sam Atticus Special Thanks to... Rebecca Gulick, the best editor in the land, without whom this book would not exist. Everyone else at Peachpit Press who help make a “book” an actual book: Lisa Brazieal, Tracey Croom, Roberta Great, Liz Welch, Glenn Bisignani, Ron Strauss, and Ann Rogers. Arpad Ray, who performed a top- notch technical review. Jessica, for everything and every- thing and everything. Nicole, for helping with the kids so I could actually get some work done (even if I didn’t want to). contents introduction ix how Ajax works x required tools xiii what you’ll learn xi companion web site xvi how this book works xii the next step xvii 1. access MySQL 1 access MySQL 2 populate the tables 7 make the database 3 extra bits 9 make the tables 5 2. browsing employees 11 what we’ll do 12 connect to the database 18 create an HTML page 13 create a style sheet 19 add the HTML form 14 use the style sheet 20 start a PHP page 15 test the pages 21 print the employees 16 extra bits 22 report on any errors 17 v contents 3. browsing using Ajax 25 what we’ll do 26 print the employees 33 make a function 27 handle the response 35 check for Ajax support 28 display the results 36 call the function 29 modify the HTML 37 set up the Ajax 30 test the Ajax layer 38 begin the PHP page 32 extra bits 39 4. adding records 43 what we’ll do 44 validate the form data 50 start the HTML page 45 update the database 53 add the form 46 report any errors 54 add the form elements 47 test the non-Ajax version 55 start a PHP page 49 extra bits 57 5. adding records via Ajax 59 what we’ll do 60 update the database 72 add the Ajax elements 62 complete the XML 73 apply the Ajax layer 63 handle the response 75 set up the Ajax 64 prepare the page 76 prepare the form data 65 handle the XML 77 complete the function 66 display the results 79 prepare for HTML 67 test the Ajax layer 80 validate the form data 68 extra bits 82 vi contents 6. creating a search 87 what we’ll do 88 print the results 94 start the HTML page 89 report any errors 95 add the form 91 test the non-Ajax version 96 start a PHP page 92 extra bits 97 query the database 93 7. enabling an Ajax search 99 what we’ll do 100 prepare the page 112 add the Ajax elements 102 handle the XML 113 apply the Ajax layer 103 display the results 114 set up the Ajax 105 handle the name 116 complete the function 106 handle the department 117 prepare for XML 107 handle the email 119 query the database 108 display no results 121 fetch the results 109 complete the function 122 complete the PHP 110 test the Ajax layer 123 handle the response 111 extra bits 124 appendix 129 Ajax issues 130 web resources 139 Ajax alternatives 131 JavaScript frameworks 140 introducing JSON 132 PHP-Ajax frameworks 141 sending JSON 134 debugging JavaScript 142 accessing JSON data 136 extra bits 146 using JSON data 137 index 149 contents vii This page intentionally left blank introduction The Visual QuickProject Guide you hold in your hands off ers a unique way to learn about new technologies. Instead of drowning you in theoretical possbili- ties and lengthy explanations, this Visual QuickProject Guide uses big illustra- tions coupled with clear, concise step-by-step instructions to show you how to complete a specifi c project in a matter of hours. This particular book in the Visual QuickProject series teaches you how to “roll your own” Ajax-enabled application. The specifi c example will involve managing employees in a company, organized by departments into a type of address book. But the actual example is secondary to the technologies and ideas being taught. By the end of this book, you’ll have a nice, working example; tons of usable code; and an education in Ajax that you can apply to your own projects. ix