8. HTTP and Server-Side Processing


  1. HTTP/1.0 Overview
  2. HTTP Interaction
  3. HTTP/1.1 Persistent Connections
  4. Pipelining
  5. HTTP Client Requests
  6. HTTP Server Responses
  7. Some request and response headers
  8. Example of request and response
  9. Example using HTML form
  10. HTML for form
  11. HTML form processing
  12. Sessions and Cookies
  13. Cookies
  14. Server-side processing technologies
  15. Node.js
  16. Node.js example
  17. Running and using Node
  18. PHP
  19. PHP code for www-inventor.php
  20. Processing XML with PHP (1)
  21. Processing XML with PHP (2)
  22. Retrieving JSON
  23. REST
  24. PHP and JSON
  25. PHP code for Nobel Prizes (1)
  26. PHP code for Nobel Prizes (2)
  27. PHP code for Nobel Prizes (3)
  28. Ajax
  29. XMLHttpRequest object
  30. Asynchronous requests
  31. Cross-Origin Resource Sharing (CORS)
  32. CORS in PHP
  33. Google Suggest lookalike
  34. searchSuggest function
  35. searchSuggest.php (1)
  36. searchSuggest.php (2)
  37. handleSearchSuggest function
  38. handleSearchSuggest function (for loop)
  39. Mouse over, mouse out and click functions
  40. Exercises
  41. Links to more information

8.1. HTTP/1.0 Overview

8.2. HTTP Interaction

8.3. HTTP/1.1 Persistent Connections

HTTP persistent connections

8.4. Pipelining

HTTP pipelining

8.5. HTTP Client Requests

8.6. HTTP Server Responses

8.7. Some request and response headers

8.8. Example of request and response

Machine responses are this colour below:

Peter-Woods-MacBook-Pro:~ ptw$ telnet www.dcs.bbk.ac.uk 80
Trying 193.61.29.21...
Connected to www.dcs.bbk.ac.uk.
Escape character is '^]'.
GET / HTTP/1.0

HTTP/1.1 200 OK
Date: Fri, 18 Nov 2011 17:44:06 GMT
Server: Apache/2.2.16 (Unix) mod_ssl/2.2.16 OpenSSL/0.9.8o DAV/2 SVN/1.6.5 mod_fcgid/2.3.6 mod_perl/2.0.4 Perl/v5.8.4
Connection: close
Content-Type: text/html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Computer Science and Information Systems Birkbeck University of London</title>

...

</body>
</html>

Connection closed by foreign host.
Peter-Woods-MacBook-Pro:~ ptw$

8.9. Example using HTML form

8.10. HTML for form

<form action="http://titan.dcs.bbk.ac.uk/~ptw/teaching/IWT/server/www-inventor.php"
      method="GET">
  <label for="www-inventor">Who invented the WWW (surname only)?</label>
  <input type="text" id="www-inventor" name="inventor" />
  <input type="submit" value="Submit answer" />
  <input type="reset" value="Erase answer" />
</form>

8.11. HTML form processing

8.12. Sessions and Cookies

8.13. Cookies

8.14. Server-side processing technologies

8.15. Node.js

8.16. Node.js example

8.17. Running and using Node

8.18. PHP

8.19. PHP code for www-inventor.php

<html>
<head><title>WWW Inventor</title></head>
<body>
<h1>
<?php
if ($_GET['inventor'] == "Berners-Lee")
   echo "Congratulations, you answered correctly.";
else
   echo "Sorry, the correct answer is Berners-Lee.";
?>
</h1>
</body>
</html>

8.20. Processing XML with PHP (1)

8.21. Processing XML with PHP (2)

8.22. Retrieving JSON

8.23. REST

8.24. PHP and JSON

8.25. PHP code for Nobel Prizes (1)

<html>
<body>
<h1>Nobel Prize Winners</h1>
<?php
  $year = $_GET['year'];
  if ($year >= 1901 && $year <= 2017) {
    $url = 'http://api.nobelprize.org/v1/prize.json?year=' . $year;
    $string = file_get_contents($url);

    # Read the JSON output into an associative array
    $result  = json_decode($string, true);

    print "<p>In $year, the prizes were awarded as follows:</p><ul>\n";
     ...  # see next slide
    print "</ul>";
  }
  else {
    print "<p>Year value out of range; years range from 1901 to 2017</p>";
  }
?>
</body>
</html>

8.26. PHP code for Nobel Prizes (2)

returned JSON data is as follows (for year 1991):

{"prizes":
 [
  {"year":"1991",
   "category":"physics",
   "laureates":[
    {"id":"141",
     "firstname":"Pierre-Gilles",
     "surname":"de Gennes",
     "motivation":"...",
     "share":"1"}]},
  {"year":"1991",
   "category":"chemistry",
   "laureates":[
    {"id":"276",
     "firstname":"Richard R.",
     "surname":"Ernst",
     "motivation":"...",
     "share":"1"}]},
  {"year":"1991",
   "category":"medicine",
   "laureates":[
    {"id":"444",
     "firstname":"Erwin",
     "surname":"Neher",
     "motivation":"...",
     "share":"2"},
    {"id":"445",
     "firstname":"Bert",
     "surname":"Sakmann",
     "motivation":"...",
     "share":"2"}]},
  {"year":"1991",
   "category":"literature",
   "laureates":[
    {"id":"668",
     "firstname":"Nadine",
     "surname":"Gordimer",
     "motivation":"...",
     "share":"1"}]},
  {"year":"1991",
   "category":"peace",
   "laureates":[
    {"id":"553",
     "firstname":"Aung San Suu Kyi",
     "motivation":"...",
     "share":"1",
     "surname":""}]},
  {"year":"1991",
   "category":"economics",
   "laureates":[
    {"id":"707",
     "firstname":"Ronald H.",
     "surname":"Coase",
     "motivation":"...",
     "share":"1"}]}
 ]
}

8.27. PHP code for Nobel Prizes (3)

8.28. Ajax

8.29. XMLHttpRequest object

8.30. Asynchronous requests

8.31. Cross-Origin Resource Sharing (CORS)

8.32. CORS in PHP

8.33. Google Suggest lookalike

8.34. searchSuggest function

var searchReq = getXmlHttpRequestObject();

function searchSuggest() {
 if (searchReq.readyState == 4 || searchReq.readyState == 0) {
  var str = escape(document.getElementById('txtSearch').value);
  searchReq.open("GET", 'searchSuggest.php?search=' + str, true);
  searchReq.onreadystatechange = handleSearchSuggest;
  searchReq.send(null);
 }
}

8.35. searchSuggest.php (1)

<?php
header("Content-Type: application/json; charset=utf-8");
...
$suggestions = array("Ajax","ASP","Javascript","JSP","XML","XPath","XSD","XSLT");
$result = array();

// Make sure that a value was sent.
if (isset($_GET['search']) && $_GET['search'] != '') {
   $search = $_GET['search'];
   ... // see next slide
}
?>

8.36. searchSuggest.php (2)

...
   foreach ($suggestions as $suggestion) {
      // Add each suggestion to the $result array
      if (strpos($suggestion,$search)===0)
         $result[] = $suggestion;
   }
   echo json_encode($result);
...

8.37. handleSearchSuggest function

//Called when the AJAX response is returned.
function handleSearchSuggest() {
 if (searchReq.readyState == 4) {
  var ss = document.getElementById('search_suggest');
  ss.innerHTML = '';
  var str = JSON.parse(searchReq.responseText); // PTW modified for JSON
  // For loop to build list of suggestions goes here (next slide)
 }
}

8.38. handleSearchSuggest function (for loop)

...
  // Returned suggestions are in array str
  for(i=0; i < str.length; i++) {
   //Build our element string.  This is cleaner using the DOM,
   //but IE doesn't support dynamically added attributes.
   var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
   suggest += 'onmouseout="javascript:suggestOut(this);" ';
   suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
   suggest += 'class="suggest_link">' + str[i] + '</div>';
   ss.innerHTML += suggest;
  }
...

8.39. Mouse over, mouse out and click functions

//Mouse over function
function suggestOver(div_value) {
  div_value.className = 'suggest_link_over';
}
//Mouse out function
function suggestOut(div_value) {
  div_value.className = 'suggest_link';
}
//Click function
function setSearch(value) {
  document.getElementById('txtSearch').value = value;
  document.getElementById('search_suggest').innerHTML = '';
}

8.40. Exercises

8.41. Links to more information

HTTP is covered briefly in Section 4.6 of [Comer]. Section 7.3 of [Tanenbaum] covers HTML forms and HTTP, and mentions CGI and PHP. Servlets are covered in Chapter 9 and JSP in Chapter 10 of [Moller and Schwartzbach]. Server-side processing of XML using PHP (and VB.NET) is covered in Chapters 11 (12) and 13 in [Jacobs]. AJAX is covered in Chapter 9 in [Jacobs]. It is also mentioned in Section 7.3.3 of [Tanenbaum].