Discuss in detail HTML5 various web communication techniques.

Subject: Advanced Internet Technology

Topic: Responsive web design with HTML5 and CSS3

Difficulty: High

ait(26) • 4.1k  views


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

Continue reading

Find answer to specific questions by searching them here. It's the best way to discover useful content.

Find more