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 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

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