Download presentation
Presentation is loading. Please wait.
1
Web-Applications & AJAX
BCHB697
2
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
3
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
4
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
5
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
6
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
7
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
8
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
9
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
10
Example: Protein Browser
BCHB697 - Edwards
11
Example: Protein Browser
BCHB697 - Edwards
12
Example: Protein Browser
BCHB697 - Edwards
13
Example: Protein Browser
BCHB697 - Edwards
14
Example: Protein Browser
BCHB697 - Edwards
15
Example: Protein Browser
BCHB697 - Edwards
16
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
17
Example: Protein Browser
proteins.html BCHB697 - Edwards
18
Example: Protein Browser
proteins.js BCHB697 - Edwards
19
Example: Protein Browser
proteins.js BCHB697 - Edwards
20
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
Similar presentations
