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

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

9. example var url="servertime.php"
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
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 <? // a time document
header("Content-type: text/xml");
print("<time>");
print("<currtime>".time()."</currtime>");
print("</time>");
?>

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

13. stateChanged function stateChanged() {
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
//update the DOM with the data
document.getElementById("time").innerHTML=xmlHttp.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
free
Script.aculo.us
Used with the Prototype Framework, mainly for animations and interface development
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 ( )
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": },
"phoneNumbers": [
"type": "home",
"number": " “ },
"type": "fax",
"number": " “ } ]

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

20. 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”; .

21. jQuery
Multi-browser javascript library to simplify client-side scripting.
Used by over 55% of the top 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 <script) 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/libs/jquery/1.6.2/jquery.min.js');
s.setAttribute('type', 'text/javascript');
document.getElementsByTagName('head')[0].appendChild(s); }

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