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 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); }