Marc Bächinger, profile picture
Uploaded byMarc Bächinger
PPTX, PDF2,059 views

Html5 communication

The document discusses the architecture and components of modern HTML5 web applications, highlighting the use of technologies such as AJAX, RESTful services, and WebSockets for communication between clients and servers. It covers various aspects of client-side development, including data formats (JSON, XML), JavaScript implementations, and server-side integration with frameworks like JAX-RS. The content also touches on responsive user interfaces, error handling, and the integration of JavaScript libraries for enhanced functionality.

Embed presentation

Downloaded 60 times
HTML5 communications
Classic web application12. August 2011HTML5 communications | marcbaechingerDBHTTP App-ServerWebbrowserHTTP GET/POSTSQLserve page assets
authentication
authorization
access data storage
enterprise integration
maintain user state
process business logic
process UI logic
render markup
process CRUD
(stored procedures)
display markup
request pages
send form dataSlide 2
Lifecycle of modern HTML application12. August 2011HTML5 communications | marcbaechingeronbeforeunloadonunloadGET /index.html HTTP/1.1onloadUI setupapplication use casesstate synchronization DOMContentLoadedXHR POST
JSON/XML REST
Websockets
Local storage
JSON/XML REST
Websockets
Local storage
File I/O
(HTTP GET/POST)
XHR GET/POST
JSONP
HTTP GET
XHR GET/POSTSlide 3
Modern HTML5 web application12. August 2011HTML5 communications | marcbaechingerDBHTTP App-ServerWebbrowserHTTPSQLserve page assets
authentication
authorization
access data storage
enterprise integration
provide services
process CRUD
display markup
request pages
send form data
access remote data
access local data
maintain user sstate
process business logic
process UI logic
render markupSlide 4
XMLHttpRequest and friends12. August 2011Slide 5
‘native’ JavaScriptvarxhr= newXMLHttpRequest(); xhr.open("GET", url, true); xhr.onreadystatechange= function() { if(xhr.readyState === 4) { if(xhr.status< 300) { document.querySelector("#main").innerHTML=encodeHTML(xhr.responseText); } }}; xhr.send(null);XMLHttpRequestHTML5 communications | marcbaechinger12. August 2011Slide 6
BenefitsAbstracts browser deviations (from standard)