Web-Applications & AJAX BCHB697
Outline Web-Applications AJAX enables browser-based applications Traditional server-based model Browser-based application model AJAX enables browser-based applications Static, empty HTML page as application shell Javascript requests data from web-service Javascript constructs HTML on the fly Parameters from URL or from events BCHB697 - Edwards
Traditional Web-Application Each click (link / anchor / button / input field) generates a HTTP request Web-server runs Perl/Python/PHP to: Connect to database Query data Generate HTML page from data Send HTML etc. back to browser BCHB697 - Edwards
Browser-based Web-app Each click generates Javascript events in the browser Javascript executes code to: Request new data Wait for data to arrive Redraw page Server provides web-service only (no presentation) BCHB697 - Edwards
AJAX Asynchronous Javascript and XML Enables browser-based Web-app JSON used more widely than XML now Enables browser-based Web-app Presentation resides in the browser Seamless, asynchronous, event driven UI/UX Web-service just provides the data c.f. document store Streamline support for: Cell-phone apps, web-browser, automated systems BCHB697 - Edwards
Single Page Web-Application Single HTML page links: CSS style sheet Javascript code to respond to events, and render page in HTML Body of HTML page: Basic page layout DIV containers for dynamic HTML rendering URL-based history mechanism is lost! Application state no longer in the browser. BCHB697 - Edwards
Event Driven Applications Events associated with HTML elements can be handled by a javascript function Event: onload: Fires when the page is finished loading (incl. supporting Javascript and CSS documents) Event: onclick: Fires when the HTML element is clicked AJAX data requests take time, provide function to run when data is available. BCHB697 - Edwards
Event Driven Applications <html> <script> function render() { json_ws_get(wsurl,function(data) { var tablestr = construct_table(data); var container = document.getElementById('container') container.innerHTML = tablestr; } </script> <body onload="render()"> <div id="container"/> <br/> <A href="#" onclick="render()">Refresh</A> </body> </html> BCHB697 - Edwards
Useful Javascript Snippets alert("message") console.log("message"), console.log(obj) Objects are the same as dictionaries: data["accession"] == data.accession Use Web-Developer tools to figure out where your Javascript is broken. BCHB697 - Edwards
Example: Protein Browser BCHB697 - Edwards
Example: Protein Browser BCHB697 - Edwards
Example: Protein Browser BCHB697 - Edwards
Example: Protein Browser BCHB697 - Edwards
Example: Protein Browser BCHB697 - Edwards
Example: Protein Browser BCHB697 - Edwards
Example: Protein Browser proteins.html Single HTML file, loads css and javascript onload event on body element proteins.js Functions to render proteins table and protein detail pages Uses anchors with onclick event for request new rendering style.css, util.js BCHB697 - Edwards
Example: Protein Browser proteins.html BCHB697 - Edwards
Example: Protein Browser proteins.js BCHB697 - Edwards
Example: Protein Browser proteins.js BCHB697 - Edwards
Exericse Add a search input field to the protein table Use the onchange event to filter the table Combine ideas from Lecture 11 & 12 BCHB697 - Edwards