HTML Form Processing
Weasel pp 247-270 (reference)
Kookaburra pp 199-222 (read)
Web Client-Server Model
http request
Specify the URL of the “file” you want.
http response
Send back the “file” to the client.
What is in an http request?
• Obviously, the URL of the “file” you want.
• Anything else?
• Note: A URL not only helps you find the
server, but it also tells the server what file you
want.
What is in an http request?
• Information about the client browser
– Firefox, IE, Safari, etc.
– Browser Version
– Platform (Windows, Unix, MacOS, etc.)
• Also the URL itself can include variables
– http://www.site.com/makepage.php?pageid=48&display=wide
URL Variables
http://www.site.com/makepage.php?pageid=48&display=wide
• ? Defines the URLs query string
• pageid and display are query variables
• & is a delimiter, i.e., put between query
variables
Can an http request send anything else?
Yes,
• It can send form variables to the server.
• HTML includes elements for creating forms
–
–
–
–
Text boxes <input type=“text” />
Buttons <input type=“submit” />
Check boxes
Etc.
• The data entered into these form elements can
be sent to the server using an http request.
HTML Forms
• Consider the following HTML code
<form action=“script.php”>
Enter Email: <input type=“text” name=“email”/> <br />
<input type=“submit” />
</form>
• When you click the submit button, the browser
– requests the file “script.php”
– and sends the server the data that user enters
email = “myname@place.org”
Summary: Data sent by client
1.
2.
3.
4.
URL itself
URL variables
Information about the client browser
Any form data
What does the server do with the data?
The Server
1. receives an http request
2. parses URL and message body of the http request
3. puts the data into variables (associative arrays) that
can be used by any scripting language
Variables provided by the server.
• $_GET – stores all the URL variables
• $_POST – stores all the Form variables
• $_SERVER – stores server information
including info about the client browsers that
just made the request.
Example
• http://www.site.com/add.php?xval=5&yval=7
• add.php
<?php
$xValue = $_GET['xval'];
$yValue = $_GET['yval'];
$sum = $xValue + $yValue;
5+ 7 = 12
echo $xValue,' + ', $yValue, ' = ', $sum;
?>
Example
<form action="add.php" method="get">
<input name="xval" /> +
<input name="yval“ />
<input type="submit" value="equals" />
</form>
4
5
<?php
$xValue = $_GET['xval'];
$yValue = $_GET['yval'];
$sum = $xValue + $yValue;
echo $xValue,' + ', $yValue, ' = ', $sum;
?>
4+5=9
Get vs. Post
<form action="add.php" method=“post">
<input name="xval" /> +
<input name="yval“ />
<input type="submit" value="equals" />
</form>
4
5
<?php
$sum = $_POST['xval'] + $_POST['yval']
echo $_POST['xval'],' + ', $_POST['yval'], ' = ', $sum;
?>
4+5=9
GET vs. POST
GET – First way
• Browser adds the form
variables to the URL
• Then sends the http request
• Form variables are visible in
the URL
• Browsers limit the length a
URL
• Limit for IE is 2,048
characters
POST – Improved way
• Browser adds the form
variables to the message
body of the http request
• Then sends the http request
• Must be used when sending
non-text data, binary files,
images, etc.
• Must be used when sending
long data (> 2KB)
Details
Client-side: The web browser
• extracts the form data, i.e.,
the values the user types,
and the variables, i.e., the
names of the form
elements.
• places variables and values
in either
– the URL (if method=“get”) or
– the body of the http request
(if method=“post”).
Server-side: The web server
• receives the http request.
• Parses the header of the
http request which indicates
if there are form variables.
• extracts the variables
• places them in a data
structure, and
• passes the structure to the
requested script.
One more look
<form action="add.php" method=“post">
<input name="xval" /> +
<input name="yval“ />
<input type="submit" value="equals" />
</form>
4
5
<?php
$sum = $_POST['xval'] + $_POST['yval']
echo $_POST['xval'],' + ', $_POST['yval'], ' = ', $sum;
?>
4+5=9
Quirks of Web-page Based Interfaces
• Ever notice the delay in submitting a form?
• Ever notice that forms tend to always send
back a confirmation message, even when you
don’t need one?
• Ever notice the page entirely refreshes
whenever a button is clicked?
Mechanics of Web-based Interfaces
User requests a FORM (add.html)
Sends the FORM (add.html)
Time
User fills out the FORM and clicks submit
Send FORM variables and requests action “add.php”
Server receives the FORM variables
Server executes “add.php”
Sends back output of “add.php” could be a new FORM
User fills out the new FORM and clicks submit
Send FORM variables and requests new action
Synchronous Communication
• A Phone conversation is synchronous
– Generally, people wait for an answer before asking the
next question
– You talk, I talk, you talk, I talk, …
• Web analogy
– When submitting a form, you have to wait for a response
before you can move to the next action.
• This is why web-interfaces are sometimes quirky:
– We are used to asynchronous interaction.
– Web client-server interaction is actually synchronous.
– Note many “experts” mistakenly consider web clientserver interaction to be asynchronous. They are wrong!
Asynchronous Communication
• Email is a classic example of asynchronous
communication
– You do NOT have to wait for an email reply to send
out other emails.
• Web client-server analogy
– You do NOT have to wait for an http response to send
out another request, even to the same server
• When you look at it this way, web client-server
interaction seems asynchronous, but it is not.
Why it appears Asynchronous
• Consider opening multiple
browser windows and
connecting to different
servers
• Consider slow servers
• The response order is NOT
always the same as the
request order.
• This appears to be
asynchronous
communication like email,
but….
But…
• You can get an email out of the blue.
• A software application can send a message
out of the blue.
• Surprisingly, a web browser cannot get an http
response without first making a request.
• Pop-ups are actually initiated by spyware or
plug-ins that make requests without the user’s
explicit action.
http is Synchronous
• A server won’t do anything unless the client
makes a request.
• Then, the only thing the server can do is send
back exactly one response.
• Truly asynchronous communication would mean
– The server could initiate communication when
appropriate.
– A single request from a client could trigger more than
one response from the server at any time
Confused? Here is a Summary
• The general communication between web client
and web server has an asynchronous feel
– because clients and servers support multiple
simultaneous requests/responses
• However, http is a synchronous protocol
– Requests from clients drive all the responses from
servers
• Later in the semester, we’ll learn about AJAX,
which is a way to support true asynchronous
communication between client and server.
Still Confused?
• A phone conversation is synchronous
– You talk, I talk, you talk, I talk.
• Surfing the web is a synchronous conversation
– Click a link (request), get a page (response), click a link (request),
get a page (response)
• Web clients and servers support multiple simultaneous
conversations.
– Like having multiple mouths and sets of ears
– The conversations feel asynchronous because you can switch
from one to the other but they are really simultaneous
synchronous conversations.
– Take that! high paid web consultants who say http is
asynchronous.
Why is this important?
• Synchronous form interaction is annoying.
– You have to refresh an entire form just to update
one part of it.
– Then, you end up sending the entire form back
again even if only part of it changed.
• Without using asynchronous frameworks like
AJAX, synchronous form interaction is the only
way to build web applications.
Example
• If there is time, we’ll look at a neat example
• Registration Form