Date post: | 26-Dec-2015 |
Category: |
Documents |
Upload: | jessica-rice |
View: | 215 times |
Download: | 1 times |
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 ); });