CGI and AJAX

CS-260

Dick Steflik

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

• 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 user’s 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 user’s browser)

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.

FieldStorage

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

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)

General Technique

Web PageServer-side

Script

requests server-side script to be run

script run, XML created

XML document returnedinfo parsed from XML and used to update DOM by Javascript

Sending a request for a URL

• xmlHttpRequest Object– mozilla

• objXMLHttp=new XMLHttpRequest()

– IE• objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")

• create the URL• tell the browser the name of the function to

handle the response• send the url to the server

example

var url="servertime.php" xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true) xmlHttp.send(null)

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

sample PHP script

<? // a time document header("Content-type: text/xml"); print("<time>"); print("<currtime>".time()."</currtime>"); print("</time>"); ?>

stateChange

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

stateChanged

function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { //update the DOM with the data document.getElementById("time").innerHTML=xmlHttp.responseText } }

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

(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

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

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

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“ } ] }

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.responseText); } }; http_request.send(null);

My_JSON_object.firstname=“John”;My_JSON_object.lastname=“Smith”;My_JSON_object.age=25;My_JSON_object.address.streetaddress=“21 2nd Street”;My_JSON_object.address.city=“New York”;.....

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.

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 <script) tag

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/libs/jquery/1.6.2/jquery.min.js'); s.setAttribute('type', 'text/javascript'); document.getElementsByTagName('head')[0].appendChild(s); }

jQuery/AJAX

$.ajax({ type: "POST", url: "example.php", data: "name=John&location=Boston“ }).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 ); });