1. Introduction to CGI and ajax
SCMP Special Topic: Software Development
Spring 2017
James Skon

2. Web Applications Client/Server applications Client: browser
Server: web server
Client submits request
Server processes client’s request
Server responds
Client process and display server’s response

3. Server‐Side Applications
Processing is done at the server
Server responds with HTML code
Client only renders HTML code
Example: CGI (PHP, ASP.net, Perl, CodeFusion)

4. Client‐Side Applications
Processing is done at the client
Server sends code to be executed on client
Examples: JavaScript, CSS, Java applets, Flash

5. Hybrid Applications Not pure client side or server side
Most web applications combine both
Server side for data processing
Client side for interactive user interface

6. Common Gateway Interface (CGI)
Standard interface between external
applications and web servers
Web server execute CGI program in real time
set some environment variables
execute program (fork, exec)
redirect sdtin to program, stdout to browser

7. Common Gateway Interface (CGI)

8. CGI Environment Variables
REQUEST_METHOD
GET: data is sent as part of URL
POST: data sent in stdin
QUERY_STRING
list of variable names and their values
CONTENT_LENGTH
length of data in bytes (for POST method)

9. Request Method: GET

10. URL Encoding Variables are separated by “&”
Alphanumeric characters not encoded
Most non‐alphanumeric encoded as %XX
XX is the hex ASCII value of character
Space: encoded as “+”
e.g. data = “Salam Alykom!”
form.cgi?data=Salam+Alykom%21
“=” is encoded as “%3D”
“+” is encoded as “%2B”

11. Request Method: POST POST /cgi‐bin/post1.cgi HTTP/1.1
Data (query string) is sent to stdin
Data is encoded using same URL encoding
CONTENT_LENGTH set to byte length of data

12. US Census Names AJAX Demo
/home/class/SoftDev/namesclientserver
Apache
cslab.kenyon.edu
bibleajax.html
cslab.kenyon.edu/ class/softdev/skon/name_stats_ajax.html
Bibleajax.cgi

13. Web Request
Last name to look up data for: <INPUT NAME="name" TYPE="text" id=name MAXLENGTH=30></TD> <p> <input type="button" onclick="javascript: getresponse ()" name="submit" value="Submit" />

14. Web Request
function getresponse () { var ts = getCheckedValue(document.radioResultsSelect.type_select); var name = document.getElementById('name').value; if (name.length < 1) return; XMLHttp.open("GET", "/cgi-bin/skon_namefetchajax.cgi?" + "&type_select=" + ts + "&name=" + name,true); XMLHttp.onreadystatechange=function() { var table = nameTable(XMLHttp.responseText); document.getElementById('response_area').innerHTML = table; } XMLHttp.send(null); }