Communication API　　

　　     Cross Document Messaging (跨文档消息通信)

　　　　postMessage API   origin security(源安全)

chatFrame.contentWindow.postMessage(‘hello‘,‘‘); window.addEventListener(‘message‘,messageHandler,true); function messageHandler(e){ switch(e.origin){ case ‘‘: //处理消息 processMessage(e.data); break; defaule: //消息来源无法识别 //忽略消息 } } //消息事件是一个拥有data(数据)和origin(源)属性的DOM事件。 //data属性是发送方传递的实际消息 //origin属性是发送来源

　　

//判断浏览器是否支持postMessage API if(typeof window.postMessage === ‘undefined‘){ //不支持postMessage } //发送消息 window.postMessage(‘hello‘,‘‘); chatFrame.contentWindow.postMessage(‘hello‘,‘‘); //监听 var originWhiteList = [‘‘,‘‘,‘‘]; function checkWhiteList(origin){ for(var i = 0, n = originWhiteList.length; i < n; i++){ if(origin === originWhiteList[i]) return true; } return false; } function messageHandler(e){ if(checkWhiteList(e.origin)){ //处理消息 processMessage(e.data); }else{ //忽略消息 } }

　　HTML5定义的MessageEvent接口也是HTML5 WebSockets和HTML5 Web Workers的一部分。

　　 HTML5的通信功能中用于接收消息的API与MessageEvent接口是一致的。

　　 XMLHttpRequest Level 2

　　 　　跨源XMLHttpRequests  

　　　　 跨源HTTP请求包括一个origin头部，为服务器提供HTTP请求的源信息。

　　　　构建基于非同源服务的web应用程序

　　

　　　进度事件(Progress events)

//检测浏览器是否支持XMLHttpRequest level 2 var xhr = new XMLHttpRequest(); if(typeof xhr.withCredentials === ‘undefined‘){ //支持cross origin XMLHttpRequest }else{ //不支持 } //使用进度事件 xhr.onprogress = function(e){ if(e.lengthComputable){ var ratio = e.loaded / e.total; //处理进度信息 } } xhr.upload.onprogress = function(e){ if(e.lengthComputable){ var ratio = e.loaded / e.total; //处理进度信息 } } xhr.onload = function(e){ //完成 finished } xhr.onerror = function(e){ //错误 error } //跨源请求 xhr.open(‘GET‘,‘‘,true); xhr.send();

　　Framebusting　　

//Framebusting技术保证某些内容不被加载到iframe中 if(window !== window.top){ window.top.location = location; } var framebustTimer; var timeout = 3000; if(window !== window.top){ framebustTimer = setTimeout(function(){ window.top.location = location; },timeout); } window.addEventListener(‘message‘,function(e){ switch(e.origin){ case trustedFramer: clearTimeout(framebustTimer); break; } },true);

　　WebSockets API

　　WebSockets定义了一个全双工通信信道，通过web上的一个socket即可进行通信。

　　以前的实时web应用：客户端轮询、服务器推送

　　commet: 服务器主动以异步方式向客户端推送数据。

　　轮询：浏览器会定期发送HTTP请求，并随时接收响应。

　　长轮询：浏览器向服务器发送一个请求，服务器会在一段时间内将其保持在打开状态。

　　为了建立WebSocket通信，客户端和服务器在初始连接时，将HTTP协议升级到WebSocket协议。

　　一旦连接建立成功，就可以在全双工通信模式下在客户端和服务器之间来回传送WebSocket消息。

　　

//检测浏览器是否支持WebSocket if(window.WebSocket){ //支持WebSocket }else{ //不支持 } //WebSocket连接 (ws://) //安全的WebSocket连接 (wss://) var url = ‘ws://www.a.com:8080/websocket‘; var w = new WebSocket(url); w.onopen = function(e){ //打开 发送消息 //var a = new Uint8Array([8,6,5,4,3,2,1]); //w.send(a.buffer); w.send(‘hello‘); } w.binaryType = ‘arraybuffer‘; w.onmessage = function(e){ //e.data } w.onclose = function(e){ //关闭 } w.onerror = function(e){ //错误 }

　　Forms API 

　　新的输入型控件

email

url

number

range

Date pickers (date, month, week, time, datetime, datetime-local)

search

color

　　新的函数和特性

　　　新的 form 属性：

autocomplete

novalidate

　　新的 input 属性：

autocomplete

autofocus

form

form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)

height 和 width

list

min, max 和 step

multiple

pattern (regexp)

placeholder

required

　　Drag and Drop