Fundamentals of Web a Programming An Ajax Application Teodor Rus [email protected]

The University of Iowa, Department of Computer Science a

Copyright 2009 Teodor Rus. These slides have been developed by Teodor Rus using material published by Sebesta, R.W., Programming the World Wide Web 2009.

They are copyrighted materials and may not be used in other course settings outside of the University of Iowa in their current form or modified form without the express written permission of the copyright holder. During this course, students are prohibited from selling notes to or being paid for taking notes by any person or commercial firm without the express written permission of the copyright holder.

Introduction System Software. Copyright Teodor Rus – p.1/21

Contents • The application; • The XHTML Document; • Ajax Request Phase; • The Response Document; • The Receiver Phase;

Introduction System Software. Copyright Teodor Rus – p.2/21

The Application • Here we reimplement "popcorn sale document" using Ajax; • The goal of Ajax here is to allow the client to fill-out only zip-code; • Server holds a database where State/City information can be determined using zip-code; • Hence, after the popcorn buyer fill-out her zip, the event processing of the onblur-event generates an Ajax request that fill-out the rest of buyer address information.

Introduction System Software. Copyright Teodor Rus – p.3/21

The HTML Document Popcorn Sale Form img {position: absolute; left: 400px; top: 50px;} Booster Club Popcorn Sales (Ajax) Buyer’s Name:

Introduction System Software. Copyright Teodor Rus – p.4/21

Document Body

Street Address:

Zip code :

City State "City, State"

• Consequently, the response document is a PHP scripts which determine the City and State from zip then print them in the response.

Introduction System Software. Copyright Teodor Rus – p.9/21

The PHP Script The PHP script that delivers Ajax answer is: getCityState.php. The actions to be performed by this script are: 1. Gets the form value from the "zip" widget; 2. Looks up the city and state for that zip code; 3. Prints it for the form into an array that allows access to its elements.

Introduction System Software. Copyright Teodor Rus – p.10/21

getCityState.php