INTRODUCTION TO CGI

AND AJAX
SCMP 391.00 Special Topic: Software
Development
Spring 2017
James Skon
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
Server‐Side Applications
• 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)
Client‐Side Applications
• Processing is done at the client
• Server sends code to be executed on
client
• Examples: JavaScript, CSS, Java applets,
Flash
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
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
Common Gateway Interface (CGI)
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)
Request Method: GET
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”
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
 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
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" />
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);
}