Sending data from client to server

From Knowledge Kitchen
Jump to navigation Jump to search


In order for a client, such as a web browser, to send data to a web server, that data must be included in the HTTP request the client makes to the web server. This data is included either somewhere in the headers of the HTTP request (e.g. in an HTTP GET request), or in the body that is included in the request (e.g. in an HTTP POST request).

Types of requests

There are two basic types of HTTP request methods that all web browsers support:

  • GET
    • intended to be used to request an online resource
    • this is the default method used by web browsers to make requests unless code instructed to do otherwise.
    • any data sent to the server along with the request is present either in the URL query string, or in a cookie header
  • POST
    • intended to be used to ask the server to save new data about an online resource
    • any data included in the request is present either in the body of the request, the query string, or in a cookie header

Browser capabilities

Web browsers offer four basic mechanisms that can be used to place data into the HTTP GET or POST request the browser makes to the server:

  • links
    • clicking a link triggers a GET request to be made to the server
  • forms
    • submitting a form can trigger either a GET or POST request to be made to the server
  • javascript
    • a Javascript technique known as AJAX can be used to trigger either a GET or POST request to the server
  • cookies
    • a web server can ask the web browser to keep a piece of data (for example, an ID number) that is then repeatedly sent back to the server with every subsequent request

Using links

Query strings are designed to allow data to be passed from a client to a server along with any request. When a visitor clicks a link, the browser makes an HTTP GET request to the server for the linked file.


Client-side code

The link in the following HTML has some data embedded in the query string of its URL. That data is sent to the server along with the HTTP request for the page when the user clicks the link.

Note that the destination of the link in the example below is to a PHP script. If linking to a script in a different server-side programming language, only the name of the file being linked to would change. The client-side code would not need to change.

1 <!doctype html>
2 <html>
3 	<head>
4 		<title>Use a Link to send data to a server</title>
5 	</head>
6 	<body>
7                <a href="show_data.php?wonderful_data=this+is+meaningless">Click me to magically send data to the server</a>
8        </body>
9 </html>

Server-side code

PHP example

The following server-side script would receive a request, and be able to access the data that was included in the query string using PHP's built-in $_GET array.

show_data.php:

1 <?php
2   //show the data that was received from the client along with the request
3   print($_GET['wonderful_data']); //outputs 'this is meaningless'
4 ?>

Python example

The following server-side script would receive a request, and be able to access the data that was included in the query string using the cgi module's FieldStorage object:

show_data.py:

1 #!/usr/local/bin/python3
2 
3 import cgi
4 
5 data = cgi.FieldStorage() 
6 print(data.getfirst('wonderful_data'))

Using forms

When a visitor submits a form, the browser makes either an HTTP GET request or an HTTP POST request to the server for the linked file. Which type of request is made depends on the value of the "method" attribute of the HTML form tag.

Client-side code

The following HTML page allows a user to initiate a request by clicking a form's submit button.

  • If the form method has been set to "GET", then the data the user enters into the form will be placed into the URL query string of the ensuing request.
  • If the form method has been set to "POST", then the data will be passed to the server as an HTTP header, and will not be visible in the query string of the URL.

Note that the destination of the link in the example below is to a PHP script. If linking to a script in a different server-side programming language, only the name of the file being linked to would change. The client-side code would not need to change.

 1 <!doctype html>
 2 <html>
 3 	   <head>
 4 	   	   <title>Use a Form to send data to a server</title>
 5 	   </head>
 6 	   <body>
 7         <!-- the form can either use method="GET" or method="POST".  this choice    has implications for the PHP code -->
 8 	   	   <form action="show_data.php" method="GET">
 9 	   	   	<label for="my_wonderful_data">Enter some data into this:</label>
10 	   	   	<input type="text" id="my_wonderful_data" name="my_wonderful_data" />
11 	   	   	<input type="submit" value="Click me to send this data to the    server    along with a request!" />
12 	   	   </form>
13     </body>
14 </html>

Server-side code

PHP example

If the request method was set as "GET", the following server-side script would receive that request, and be able to access the query string data in PHP's built-in $_GET array.

show_data.php:

1 <?php
2   //show the data that was received from the client along with the request
3   print($_GET['wonderful_data']); //outputs whatever the user entered into the text input of the form
4 ?>

If the request method was "POST", use PHP's built-in $_POST array to access the data:

show_data.php:

1 <?php
2   //show the data that was received from the client along with the request
3   print($_POST['wonderful_data']); //outputs whatever the user entered into the text input of the form
4 ?>

Python example

The following server-side script would receive a request, and be able to access the data that was included in the query string using the cgi module's FieldStorage object:

show_data.py:

1 #!/usr/local/bin/python3
2 
3 import cgi
4 
5 data = cgi.FieldStorage() 
6 print(data.getfirst('wonderful_data'))

Using Javascript

AJAX is a fancy term for the technique by which a web browser sends either an HTTP GET or an HTTP POST request to a server via Javascript. The server-side code would be no different from the examples above.

This technique is useful when you don't want the browser to abandon the current page and load an entirely new page load in the browser. The page can be maintained while the request to the server is made in the background.

Using cookies

Cookies are custom HTTP request headers that the client sends to the server and vice-versa. They are used to "secretly" pass messages back and forth between a web browser and a web server.

The interaction is usually as follows:

  • A web browser requests a file from a server, as it normally does
  • The server responds, as it usually does, but also includes a "Set-Cookie" HTTP response header with an arbitrary key/value pair as the value of this header.
  • The web browser stores this key/value pair, obligingly
  • Every time the web browser subsequently requests another file from the same server, this same key/value pair is included in a "Cookie" header of the HTTP request sent to the server.
  • The server can now customize its responses based on the data in this header

See reading and writing cookies on the server-side for more.


What links here