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
Web Page
Script
requests server-side script to be run
info parsed from
XML and used to
update DOM by
Javascript
script run, XML
created
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, 3interactive, 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 );
});