Discuss in detail HTML5 various web communication techniques.

Subject: Advanced Internet Technology

Topic: Responsive web design with HTML5 and CSS3

Difficulty: High

1 Answer


  • “HTML5” is so much more than just markup. There’s also an army of associated JavaScript APIs. Among the ranks are a few new technologies that open up how we communicate between client and server and across documents.
  • available technologies for HTML5 Web communication:

    1. XHR & XHR2 with CORS

    • XHR can be both synchronous and asynchronous. XHR is the only API that (purposely) supports synchronous requests, meaning the execution of code will block until the callback fires.
    • There’s nothing particularly new about XHR, but in XHR2 we can handle uploads, and there’s a progress event to tell you how the upload or download is getting on.
    • The super shiny new toy in XHR2 is its support for Cross-Origin Resource Sharing (CORS). This means you can make an XHR request across domains, but only if the server you’re connecting to allows it.

    2. Web Messaging

    • This API is older, but it’s very useful if you want to get around the XHR same-origin rules.
    • If you have an <iframe> document that can accept onmessage events from your origin (i.e., your site), then you can communicate across domains (and origins).
    • This gives you the ability to send strings across two mutually trusted domains.

    3. Web Sockets

    • Web Sockets are used to send messages to and from the server — i.e., a bi-directional socket.
    • with Web Sockets, you can go across domains, and you’re not bound by the same-origin policy.
    • This means you can host your normal “apps” server while another server is for streaming content. Or you could host your own pages and connect to a live Twitter stream if your users turn on Web Socket support.

    4. Server Sent Events

    • The Server-Sent Events API is something that originated from Opera back in 2006 and is used for pushing events from the server to the client.
    • The key to your server is ensuring it doesn't close the connection on the client - the browser. Most of the examples around the web are doing this: closing the connection which tells the API to switch in to polling mode.

    5. Web Workers

    • Web Workers are a way of creating a new thread of execution inside the browser.
    • As an example of when to use a Web Worker, say you’re running a lot of JavaScript and the UI becomes unresponsive. The browser UI hangs because, in a way, it’s a “single-threaded application”. This JavaScript task could be given to a Web Worker so that the UI can continue functioning.
    • It’s vital to understand that a Web Worker lives in a sand-boxed environment that doesn’t have access to things like the DOM.
Please log in to add an answer.