CGI and AJAX

1
CGI and AJAX

• CS-260
• Dick Steflik

2
CGI

• Common Gateway Interface
• A set of standards that define how information is
  exchanged between a web server and a ccustom
  script
• CGI Spec is maintained by NCSA (National Center
  for Supercomputing Applications
• A standard for external gateway programs to
  interface with information servers such as HTTP
  servers

3

• When running a python program as a CGI program
  sysin , sysout and syserr are redefined to
• sysin instead of coming from the keyboard is the
  incoming data stream from the tcpip socket (the
  remote host, the users browser). This will
  actually be handled via CGI Environment variables
• sysout instead of printing to the screen prints
  to the tcpip outgoing data stream, to the users
  browser)

4
Input

• Input for your CGI program will be handled by the
  HTTP server (Apache) and will be placed in a set
  of HTTP environment variables, and in a special
  data structure called FieldStorage.

5
FieldStorage

• Methods
• add_field(name,value
• clear()
• get(name, default)
• getfirst(name,default)
• getlist(name)
• has_key(name)
• Items()
• keys()

6
What is AJAX

• Asynchronous Javascript And XML
• allows the updating of a web page without doing a
  page reload
• creates much nicer user experience
• AJAX is not really a technology by itself
• combination of Javascript, XML and some
  server-side scripting to create the XML
• server-side scripting could be done in PHP, .NET,
  Java Servlet or Java Server Page (JSP)

7
General Technique
Server-side Script
Web Page
requests server-side script to be run
script run, XML created
info parsed from XML and used to update DOM by
Javascript
XML document returned
8
Sending a request for a URL

• xmlHttpRequest Object
• mozilla
• objXMLHttpnew XMLHttpRequest()
• IE
• objXMLHttpnew ActiveXObject("Microsoft.XMLHTTP")
• create the URL
• tell the browser the name of the function to
  handle the response
• send the url to the server

9
example
var url"servertime.php" xmlHttp.onreadystat
echangestateChanged xmlHttp.open("GET",url,tr
ue) xmlHttp.send(null)
10
The server-side script

• creates a well formed XML document
• sets the content type to text/xml
• can be written in any language
• Python
• PHP
• ASP
• .NET
• Java
• JSP

11
sample PHP script
lt? // a time document header("Content-type
text/xml") print("lttimegt")
print("ltcurrtimegt".time()."lt/currtimegt")
print("lt/timegt") ?gt
12
stateChange

• when the document is received by the browser
  control is transferred to where ever we told it
  to
• xmlHttp.onreadystatechangestateChanged
• in this case the function named stateChanged

13
stateChanged
function stateChanged() if
(xmlHttp.readyState4 xmlHttp.readyState"com
plete") //update the DOM with the
data document.getElementById("time").innerH
TMLxmlHttp.responseText
14
XMLHttpRequest Object

• Methods
• abort() - stop the current request
• getAllResponseHeaders - Returns complete set of
  headers (labels and values) as a string
• getResponseHeader(headerLabel) returns the
  string value of the requested header field
• open(method,URL) sets a pending request
• send(content) transmits the request
• setRequestHeader(label,value) sets
  label/value in the header

15
(continued)

• Properties
• onreadystatechange - event handler to use
• readyState (0-uninitialized, 1-loading, 2-loaded,
  3-interactive, 4- complete)
• responseText string version of the data
  returned
• responseXML DOM compatible document object
  returned by server
• status http response header code (200 good)
• statusText string message of status code

16
Popular Ajax Frameworks

• Prototype
• http//www.prototypejs.org/
• free
• Script.aculo.us
• http//script.aculo.us/
• Used with the Prototype Framework, mainly for
  animations and interface development
• free
• Backbase
• Enterprise Ajax Framework
• not free

17
JSON

• JavaScript Object Notation
• Text based open standard for human readable data
  interchange
• Often used in AJAX interchange techniques
• RFC-4627 ( http//www.ietf.org/rfc/rfc4627.txt )
• An alternative to using XML for AJAX

18
Sample JSON Object
"firstName" "John", "lastName"
"Smith", "age" 25, "address"
"streetAddress" "21 2nd Street", "city"
"New York", "state" "NY",
"postalCode" 10021 , "phoneNumbers"
"type" "home",
"number" "212 555-1234 ,
"type" "fax",
"number" "646 555-4567
19
var my_JSON_object var http_request new
XMLHttpRequest() http_request.open("GET", url,
true) http_request.onreadystatechange function
() var done 4, ok 200 if
(http_request.readyState done
http_request.status ok)
my_JSON_object JSON.parse(http_request.responseT
ext) http_request.send(null)
20
My_JSON_object.firstnameJohn My_JSON_object.la
stnameSmith My_JSON_object.age25 My_JSON_obj
ect.address.streetaddress21 2nd
Street My_JSON_object.address.cityNew
York . . . . .
21
jQuery

• Multi-browser javascript library to simplify
  client-side scripting.
• Used by over 55 of the top 10000 most visited
  web sites
• Goal is to make it easier to navigate html
  documents, select DOM elements, create
  animations, handle events and develop AJAX
  applications.

22
jQuery

• Features
• DOM element selection
• DOM traversal and modification (including CSS)
• DOM manipulation based on CSS selectors
• Events
• AJAX
• Extensibility via plug-ins
• Utilities (user-agent info and feature detection)
• Compatibility methods for compatibility with
  older browsers
• Multi-browser (not cross browser) support
• To use you must include jquery.js (available from
  jquery.com) via the src attribute of the html
  ltscript) tag

23
Feature Detection
// check if jQuery is included, if not then
include it if(!(window.jQuery
window.jQuery.fn.jquery '1.6.2')) var s
document.createElement('script')
s.setAttribute('src', ajax.googleapis.com/ajax/lib
s/jquery/1.6.2/jquery.min.js')
s.setAttribute('type', 'text/javascript')
document.getElementsByTagName('head')0.appendChi
ld(s)
24
jQuery/AJAX
.ajax( type "POST", url
"example.php", data "nameJohnlocationBosto
n ).done( function(msg) alert( "Data
Saved " msg ) ).fail( function(
xmlHttpRequest, statusText, errorThrown )
alert( "Your form submission
failed.\n\n" "XML Http
Request " JSON.stringify( xmlHttpRequest )
",\nStatus Text " statusText
",\nError Thrown " errorThrown
) )