html5 笔记5 通信api

1、主要探讨用于构建实时跨源通信的两个重要模块：
。跨文档消息通信
。XMLHttpRequestLevel2  - XMLHttpRequest的改进版

2、跨文档消息通信

可以确保iframe、标签页、窗口间安全地进行跨源通信。
1）它把postMessage API定义为发送消息的标准方式，向通信页面发送信息。
2）接收消息时仅需在页面中增加一个事件处理函数，当某个消息到达时，通过检查消息的来源决定是否对这条消息进行处理。
实例：
1）向另外一个iframe发送消息

var message = 'hello，RIA' + (new Date().getTime());window.parent.frames[1].postMessage(message, '*');

iframe1向iframe2发送消息，所以是window.parent.frames[1]，如果是向父页面发送消息就是window.parent。
postMessage接收两个参数，缺一不可，第一个参数就是要发送的数据；第二个参数主要是处于安全的考虑，填写的是允许通信的域名，“*”就是不对访问的域进行判断。
2）另外一个iframe监听消息事件

var onmessage = function(e) {    // 在发送的时候即指定域：window.parent.frames[1].postMessage(message, 'http://www.snda.com');    if(event.origin !== 'http://www.snda.com')     return;    var data = e.data;    p = document.createElement_x('p');    p.innerHTML = data;    document.getElementById('display').appendChild(p);};

消息事件中一个拥有data和origin属性的DOM事件。data属性是发送方传递的实际消息，而origin属性是发送来源，可以判断来源是否合法。

3、理解源安全

源是在网络上用来建立信任关系的地址的子集，源有规则（http还是https）、主机、端口组成。跨源通信通过源来确定发送者，这就使得接收房可以忽略或者拒绝来自不可信源的消息。

4、检测浏览器支持情况

if (typeof window.postMessage === undefined) {   alert("your brower does't support postMessage function.");}

 

5、XMLHttpRequestLevel2

level2是由XMLHttpRequest发展而来的，主要的改进在于：跨源的XMLHttpRequests和进度事件。

跨源的XMLHttpRequests：XMLHttpRequest仅限于同源通信，level2通过CORS（跨源资源共享）实现跨源的XMLHttpRequests。
跨源HTTP请求包括了一个Origin头部，它为服务器提供HTTP请求的源信息。头部由浏览器保护，不能被应用程序代码更改。本质上讲，它与跨文档消息通信中消息事件的origin属性作用相同。使用跨源XMLHttpRequest可以构建基于非同源服务的web应用程序。

进度事件：在传送数据的时候，有一个progress事件，用来返回进度信息。
它分成上传和下载两种情况，下载的进度事件属于XMLHttpRequest对象，上传的progress事件属于XMLHttpRequest.upload对象。
。load：传输成功完成
。loadstart：传输开始
。loadEnd：传输结束，但是不知道成功还是失败
。error：传输中出现错误
。abort：传输被用户取消
。progress：传输正在进行

6、构建跨源请求

var crossOriginRequest = new XMLHttpRequest();crossOriginRequest.open("GET","http://www.baidu.com",true);

在请求过程中无比确保能够监听到错误，请求不成功的原因很多。

7、使用进度事件

在表示请求和响应的不同阶段方面，XMLHttpRequestLevel2不再使用数值型状态表示法，而是提供了命名进度事件。为事件处理程序属性设置相应的回调函数后，就可以对这些事件进行监听了。

crossOriginRequest.process = function(e){    var total = e.total;var loaded = e.loaded;if(e.lengthComputable){   //}}

8、XMLHttpRequest简易教程（老）

XMLHttpRequest是Ajax的核心，通过调用XMLHttpRequest对象的属性和方法可以实现在客户端和浏览器之间进行数据的异步传输，从而实现页面的无刷新效果。

XMLHttpRequest对象的使用的步骤：初始化XMLHttpRequest对象；指定响应处理函数；发送HTTP请求；处理服务器返回的信息。
初始化XMLHttpRequest对象：在使用XMLHttpRequest对象前需要将XMLHttpRequest对象实例化，由于各个浏览器对这个实例化过程的实现不同，因此实例化的方式也不同。

function createXMLHttpRequest(){       if(window.XMLHttpRequest){   // 非IE          xmlHttp = new XMLHttpRequest();        }else if(window.ActiveXObject){    // 针对IE        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");       }   }  

指定响应处理函数：接下来就是指定当服务器返回信息时客户端的处理方式

xmlHttp.onreadystatechange = function(){       // Do something...   } 

发送HTTP请求：在指定响应处理函数后，就可以向服务器发出HTTP请求了。是用open()和send()方法。
open()：建立对服务器的调用。

//XMLHttpRequest对象的open()方法原型   void open(string method, string URL , boolean asynch, string username, string password);  

它有2个必要的参数，还有3个可选的参数。method表示向服务器发送信息的方式，可以为Get或Post；URL表示所调用的服务器资源的URL；asynch是一个布尔值，指示这个调用时异步还是同步，默认为true；username和password允许我们指定一个特定的用户名和口令。 一般使用时只取前三个参数即可。

send()：向服务器发送请求。如果请求声明为异步的，这个方法就会立即返回，否则它会等待，知道接收到响应为止。参数content是可选的，可以是一个DOM对象的实例、一个输入流或一个串。传入的内容会作为请求体的一部分发送。
处理服务器返回的信息：

function callBack(){      if(xmlHttp.readyState==4){         if(xmlHttp.status==200){            //do something with xmlHttp.responseText;            xmlHttp.responseText;         }         }   }  

readyState：表示请求的状态
    "0"：表示未初始化，即对象已经建立，但是尚未初始化(尚未调用open()方法)；
    "1"：表示正在加载，此时对象已建立，尚未调用send()方法；
    "2"：表示请求已发送，即send()方法已调用；
    "3"：表示请求处理中；
    "4"：表示请求已完成，即数据接收完毕。

status：返回当前请求的HTTP状态码(只读)；
statusText：返回当前请求的响应行状态(只读)。
responseText属性表示服务器的文本响应，其处理结果以字符串形式返回。
responseXML属性表示服务器响应，其结果将格式化为XML Document对象。