1 / 24

CGI and AJAX

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

waite
Download Presentation

CGI and AJAX

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

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

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

More Related