ajax和comet

一，XMLHttpRequest对象
　　IE5是最早引入XHR对象的浏览器，XHR对象是通过MSXML库中的一个ActiveX对象实现的
　　使用MSXML库中的XHR对象，编写一个函数如下

　　function ceateXHR(){
　　　　if(typeof argument.callee.activeXString != "String"){
　　　　　　var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],i,len;
　　　　　　for(i=0;len=versions.length;i<len;i++){
　　　　　　　　try{
　　　　　　　　　　new ActiveXObject(versions[i]);
　　　　　　　　　　arguments.callee.activeXString = versions[i];
　　　　　　　　　　break;
　　　　　　　　}catch(ex){
　　　　　　　　　　//跳过
　　　　　　　　}
　　　　　　}
　　　　}
　　　　return new ActiveXObject(argument.callee.activeXString);
　　}

　　IE7+，Firefox,Opera,CHrome和safari中支持原生XHR对象，
　　var xhr = new XMLHttpRequest();
　　为了兼容以上所有，使用下列函数

　　function createXHR(){
　　　　if(typeof XMLHttpRequest != "undefined"){
　　　　　　return new XMLHttpRequest();
　　　　}else if(typeof ActiveXobject != "undefined"){
　　　　　　if(typeof argument.callee.activeXString != "String"){
　　　　　　　　var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],i.len;
　　　　　　　　for(i=0,len=versions.length;i<len;i++){
　　　　　　　　　　try{
　　　　　　　　　　　　new ActiveXObject(versions[i]);
　　　　　　　　　　　　argument.callee.activeXString = versions[i];
　　　　　　　　　　　　break;
　　　　　　　　　　}catch(ex){
　　　　　　　　　　　　//跳过
　　　　　　　　　　}
　　　　　　　　}　　
　　　　　　}
　　　　　　return new ActiveXObject(argument.callee.activeXString);
　　　　}else{
　　　　　　throw new Error("No XHR object available");
　　　　}
　　}

　　创建对象，var xhr = createXHR();
1，XHR的用法
　　open(请求的类型（get或post），请求的URL，是否异步发送的布尔值),
　　要点：URL相对于执行代码的当前页面（可以使用绝对路径），open方法不会真的发送请求只是启动一个请求以备发送
　　send(作为请求主体发送的数据),发送特定的请求，可以传人null，调用函数后请求会被派送到服务器
　　如果请求时同步的，js代码会等到服务器响应之后执行，响应的数据会自动填充XHR对象的属性
　　　　responseText：作为响应主体被返回的文本
　　　　responseXML：如果响应的内容类型是text/xml,application/xml，这个属性会保存包含响应数据的XML DOM文档
　　　　status：响应的http状态
　　　　statusText：http状态的说明
　　响应后，首先检查status属性，http状态200表示成功，此时responseText属性的内容就绪，内容类型正确的同时，responseXML也可以访问了
　　状态304表示请求的资源没有被修改，可以直接使用浏览器中缓存的版本，
　　xhr.open("get","example.text",false);
　　xhr.send(null);
　　if((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304){
　　　　alert(xhr.responseText);
　　}else{
　　　　alert("Request was unsuccessful:" + xhr.status);
　　}
　　一般情况下使用异步请求，此时js会继续执行不必等待服务器的响应，此时检测XHR的readyState属性，属性值如下
　　0：未初始化，尚未调用open方法
　　1：启动，调用了open方法，未调用send方法
　　2，发送，调用了send方法，未接受到响应
　　3，接收，接收到部分响应数据
　　4，完成，接收到全部的响应数据，而且在客户端使用了
　　只要readyState属性的值发生变化就会触发readystatechange事件，可以利用这个事件检测每次状态后的readyState的值
　　必须在open()之前指定onreadystatechange事件处理程序才能保证跨浏览器兼容

　　var xhr = createXHR();
　　xhr.onreadystatechange = function(){
　　　　if(xhr.readyState == 4){
　　　　　　if((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304{
　　　　　　　　alert(xhr.responseText);
　　　　　　}else{
　　　　　　　　alert("Request was unsuccessful：" + xhr.status);
　　　　　　}
　　　　}
　　};
　　xhr.open("get","example",true);
　　xhr.send(null);

　　响应之前调用xhr.abort(),可以取消异步请求，由于内存原因，不建议重用XHR对象
2，HTTP头部信息
　　每个http请求和响应都会带有相应的头部信息，XHR对象也提供了操作这两种头部信息的方式
　　发送XHR请求的同时，会发送下列头部信息
　　　　Accept：浏览器能够处理的内容类型
　　　　Accept-Charset：浏览器能够显示的字符集
　　　　Accept-Encoding：浏览器能够处理的压缩编码
　　　　Accept-Language：浏览器当前设置的语言
　　　　Connection：浏览器与服务器之间连接的类型
　　　　Cookie：当前页面设置的任何cookie
　　　　Host：发送请求的页面所在的域
　　　　Referer：发送请求的页面的URL
　　　　User-Agent：浏览器的用户代理字符串
　　　　setRequestHeader(头部字段的名称，头部字段的值)方法可以自定义设置头部信息，在open和send方法之前调用此方法

　　　　var xhr = createXHR();
　　　　xhr.onreadystatechange = function(){
　　　　　　if(xhr.readyState == 4){
　　　　　　　　if((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304){
　　　　　　　　　　alert(xhr.reponseText);
　　　　　　　　}else{
　　　　　　　　　　alert("Request was unsuccessful :" + xhr.status);
　　　　　　　　}
　　　　　　}
　　　　};
　　　　xhr.open("get","example.php",true);
　　　　xhr.setRequestHeader("MyHeader","MyValue");
　　　　xhr.send(null);

　　调用XHR对象的getResponseHeader()方法，传人头部字段名称，可以返回相应的响应头部信息
　　getAllResponseHeaders()方法，取得一个包含所有头部信息的长字符串
　　var myheader = xhr.getResponseHeader("myHeader");
　　var allheader = xhr.getAllResponseHeader();
　　服务器端，可以利用头部信息向浏览器发送额外的，结构化的数据，没有自定义的情况下，getAllResponseHeader()方法会返回如下
　　　　Date：sun,14 Nov 2004 18:04:03 GMT
　　　　Server: Apache/1.3.29(Unix)
　　　　Vary:Accept
　　　　X-Powered-By:PHP/4.3.8
　　　　Connection:close
　　　　Content-Type:text/html;charset=iso-8859-1
3，GET请求
　　用于向服务器查询某些信息，可以将查询字符串追加到URL末尾，
　　查询字符串，每个参数的名称和值使用encodeURIComponent()进行编码，而且所有名值对使用&分隔
　　xhr.open("get","example.php?name1=value&name2=value2",true);
　　使用下面函数向现有的URL末尾添加查询字符串参数
　　function addURLParam(url,name,value){
　　　　url += (url.indexof("?") == -1 ? "?" : &);
　　　　url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
　　　　return url;
　　}
　　使用下面函数来构建请求URL示例
　　var url = "example.php";
　　url = addURLParam(url,"name","Nicholas");
　　xhr.open("get",url,true);
4，POST请求
　　用于向服务器发送应该被保存的数据，
　　post请求将数据作为请求的主体提交，请求的主体可以包含非常多的数据，格式不限
　　发送post请求，要向send()方法中传人某些数据，可以是XML DOM文档，可以使字符串
　　XHR模仿表单提交，首先将Content-type头部信息设置为application/x-www-form-urlencoded，然后以适当的格式创建一个字符串，可以使用serialize()　　   函数来创建字符串
　　function submitData(){
　　　　var xhr = createXHR();
　　　　xhr.onreadystatechange = function(){
　　　　　　if(xhr.readystate == 4){
　　　　　　　　if((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304){
　　　　　　　　　　alert(xhr.responseText);
　　　　　　　　}else{
　　　　　　　　　　alert("Request was unsuccessful:" + xhr.status);
　　　　　　　　}
　　　　　　}
　　　　};
　　xhr.open("post","postexample.php",true);
　　xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
　　var form = document.getElementById("user-info");
　　xhr.send(serialize(form));
　　}
　　php文件通过$_POST取得提交的数据
　　　　<?php
　　　　　　header("Content-type:text/plain");
　　　　　　echo <<<EOF
　　　　　　Name:{$_POST["user-name"]}
　　　　　　Email:{$_POST['user-email']}
　　　　　　EOF;
　　　　?>
　　如果不设置Content-type头部信息，那么发送给服务器的数据不会出现在$_POST超级全局变量中，
　　要访问同样的数据，使用$HTTP_RAW_POST_DATA
二，XMLHttpRequest2级
1，FormData
　　为了实现表单数据的序列化，FormData类型为序列化表单以及创建与表单格式相同的数据
　　var data = new FormData();
　　data.append("name","Nicholas");
　　append()方法接收两个参数，键值对，
　　通过向FormData构造函数中传人表单元素，可以用表单元素的数据预先向其中填入键值对
　　var data = new FormData(document.forms[0]);
　　创建了FormData实例，直接传给XHR的send()方法

　　var xhr = createXHR();
　　xhr.onreadystatechange = function(){
　　　　if(xhr.readyState == 4){
　　　　　　if((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304){
　　　　　　　　alert(xhr.responseText);
　　　　　　}else{
　　　　　　　　alert("Request was unsuccessful :" + xhr.status);
　　　　　　}　　　　
　　　　}
　　};
　　xhr.open("post","postexample.php",true);
　　var form = document.getElementById("user-info");
　　xhr.send(new FormData(form));

　　XHR对象能够识别传人的数据类型是FormData的实例，并配置适当的头部信息
2，超时设定
　　XHR对象的timeout属性，表示请求在等待响应多少时间之后就终止，给timeout属性设置一个值，在超过了这个值后，
　　就会调用ontimeout事件处理程序

　　var xhr = createXHR();
　　xhr.onreadystatechange = function(){
　　　　if(xhr.readyState == 4){
　　　　　　try{
　　　　　　　　if((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304){
　　　　　　　　　　alert(xhr.responseText);
　　　　　　　　}else{
　　　　　　　　　　alert("Request was unsuccessful:" + xhr.status);
　　　　　　　　}
　　　　　　}catch(ex){
　　　　　　　　//假设由ontimeout事件处理程序处理
　　　　　　}
　　　　}
　　};
　　xhr.open("get","timeout.php",true);
　　xhr.timoeout = 1000;
　　xhr.ontimeout = function(){
　　　　alert("Request did not return in a second.");
　　};
　　xhr.send(null);

3，overrideMimeType()方法
　　Firefox最早引入了overrideMimeType()方法，用于重写XHR响应的MIME类型，可以把响应当做XML而非纯文本来处理
　　var xhr = createXHR();
　　xhr.open("get","text.php",true);
　　xhr.overrideMimeType("text/XML");
　　xhr.send(null);
三，进度事件
　　Progress Events规范定义了与客户端服务器通信有关的事件
　　loadstart：在接收到响应数据的第一个字节时触发
　　progress：在接收响应期间持续不断的触发
　　error：在请求发生错误时触发
　　abort：因为调用abort()方法而终止连接时触发
　　load：在接收到完整的响应数据时触发
　　loadend：在通信完成，或者触发了error，abort，load事件后触发（尚未被任何浏览器支持）
1，load事件
　　firefox引入了load事件，用于替代readystatechange事件
　　响应接收完毕后触发load事件，没有必要去检测readyState属性了，
　　onload会接收到event对象，target属性就指向XHR对象，可以访问到XHR对象的所有方法和属性
　　对于不支持的浏览器

　　var xhr = createXHR();
　　xhr.onload = function(){
　　　　if((xhr.status >=200 && xhr.status <= 300) || xhr.status == 304){
　　　　　　alert(xhr.responseText);
　　　　}else{
　　　　　　alert("Request was unsuccessful:" + xhr.status);
　　　　}
　　};
　　xhr.open("get","alertEvents.php",true);
　　xhr.send(null);

2，progress事件
事件在浏览器接收数据期间周期性触发，
onprogress事件处理程序会接收到一个evnet对象，其target属性是XHR对象
包含额外的三个属性：lengthComputable(进度信息是否可用的布尔值),position(已经接收的字符数),totalSize(根据Content-Length响应头部确定的预期字节数)

var xhr = createXHR();
xhr.onload = function(){
　　if((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304){
　　　　alert(xhr.responsText);
　　}else{
　　　　alert("Request was unsuccessful" + xhr.status);
　　}
};
xhr.onprogress = function(event){
　　var divStatus = document.getElementById("status");
　　if(event.lengthComputable){
　　　　divStatus.innerHTML = "Recevied " + event.position + "Of" + event.totalSize + "bytes";
　　}
};
xhr.open("get","alertEvent.php",true);
xhr.send(null);

四，跨源资源共享(CORS)
　　思想是使用自定义的http头部，让浏览器与服务器进行沟通，从而决定请求或响应的成功与否
　　请求的origin头部，包含请求页面的源信息（协议，域名，端口），
　　如果服务器认为是可接受的，在Origin-Control-Allow-Origin头部中回发相同的源信息，如果是公共资源，可以回发*
1，IE对CORS的实现
　　IE8引入XDR类型，类似XHR对象，但能实现安全可靠的跨域通信，区别如下
　　cookie不会随请求发送，也不会随响应返回
　　只能设置请求头部信息中的Content-type字段
　　不能访问响应头部信息
　　只支持GET和POST请求
　　XDR使用方法，创建一个XDomainRequest的实例，调用open()方法，再调用send()方法，
　　open()方法只接收两个参数，请求类型的UR，XDR请求都是异步的，
　　请求返回之后会触发load事件，响应的数据保存在responseText属性中
　　var xdr = new XDomainRequest();
　　xdr.onload = function(){
　　　　alert(xdr.responseText);
　　};
　　xdr.open("get","http://www.somewhere-else.com/page/");
　　xdr.send(null);
　　接收到响应后，只能访问响应的原始文本，没有办法确定响应的状态代码，只要响应有效就会会触发load事件，
　　失败就会触发error事件，遗憾的是，除了错误本身外，没有其他信息可用，因此唯一能够确定的就是请求未成功，
　　检测错误可以指定一个onerror事件处理程序
　　var xdr = new XDomainRequest();
　　xdr.onload = function(){alert(xdr.responseText)};
　　xdr.onerror = function(){alert("An error occurred.")};
　　xdr.open("get","http://www.somewhere-else.com/page/");
　　xdr.send(null);
　　返回请求前调用abrot()方法会终止请求
　　同样支持timeout属性和ontimeout事件
　　var xdr = new XDomainRequest();
　　xdr.onload = function(){alert(xdr.responseText);};
　　xdr.onerror = function(){alert("An Error Occurred");};
　　xdr.timeout = 1000;
　　xdr.ontimeout = function(){alert("Request took too long.");};
　　xdr.open("get","http://www.somewhere-else.com/page/");
　　xdr.send(null);
　　为了支持POST请求，XDR对象提供了contenType属性，用来表示发送数据的格式
　　var xdr = new XDomainRequest();
　　xdr.onload = function(){};
　　xdr.onerror = function(){};
　　xdr.open("post","http://www.somewhere-else.com/page/");
　　xdr.contentType = "application/x-www-form-urlencoded";
　　xdr.send("name1=value1&name2=value2");
2，其他浏览器对CORS的实现
　　通过XMLHttpRequest对象实现对CORS的原生支持，请求另一个域中的资源，使用标准的XHR对象并在open方法中传人绝对的URL

　　var xhr = createXHR();
　　xhr.onreadystatechange = function(){
　　　　if(xhr.readyState == 4){
　　　　　　if((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304){
　　　　　　　　alert("xhr.responseText");
　　　　　　}else{
　　　　　　　　alert("Request was unsuccessful:" + xhr.status);
　　　　　　}
　　　　}
　　};
　　xhr.open("get","htt://www.somewhere-else.com/page/",true);
　　xhr.send(null);

　　跨域XHR对象有限制，
　　不能使用setRequestHeader()设置自定义头部
　　不能发送和接受cookie
　　调用getAllResponseHeader()方法总会返回空字符串
3，Preflighted Request
　　透明服务器验证机制支持开发人员使用自定义的头部，
　　使用下列高级选项来发送请求时，就会向服务器发送一个Preflight请求，使用OPTIONS方法，发送下列头部
　　　　Origin：与简单的请求相同
　　　　Access-Control-Request-Method：请求自身使用的方法
　　　　Access-Control-Request-Header：自定义的头部信息，多个头部用逗号分隔
　　　　Origin：http://www.nczonline.net
　　　　Access-Control-Request-Method:POST
　　　　Access-Control-Request-Header:NCZ
　　发送这个请求后，服务器可以决定是否允许这种类型的请求，服务器通过在响应中发送如下头部与浏览器进行沟通
　　　　Access-Control-Allow-Origin:与简单请求相同
　　　　Access-Control-Allow-Method：允许的方法，多个方法以逗号分隔
　　　　Access-Control-Allow-Header：允许的头部，多个头部以逗号分隔
　　　　Access-Control-Max-Age：应该将这个Prefight请求缓存多长时间（秒）
　　　　Access-Control-Allow-Origin:http://www.nczonline.net
　　　　Access-Control-Allow-Method：POST,GET
　　　　Access-COntrol-Allow-Header:NZC
　　　　Access-Control-Max-Age:1728000
　　第一次发送这种请求时会多一个http请求
4，带凭据的请求
　　默认情况下跨源请求不会提供凭据（cookie，HTTP认证，客户端SSL证明）
　　通过将withCredentials属性设置为true，可以指定某个请求应该发送凭据
　　如果服务器端接收带凭据的请求，会使用Access-Control-Allow-Credentials:true来响应
　　如果服务器的响应中没有这个头部，浏览器就不会把响应交给javascript，responseText中将是空字符串status的值为0，调用onerror事件处理程序
5，跨浏览器的CORS

　　function createCORSRequest(method,url){
　　　　var xhr = new XMLHttpRequest();
　　　　if("withCredentials" in xhr){
　　　　　　xhr.open(method,url,true);
　　　　}else if(typeof XDomainRequest != "undefined"){
　　　　　　vxhr = new XDomainRequest();
　　　　　　xhr.open(method,url);
　　　　}else{
　　　　　　xhr = null;
　　　　}
　　　　return xhr;
　　}
　　var request = createCORSRequest("get","http://www.somewhere-else.com/page/");
　　if(request){
　　　　request.onload = function(){
　　　　//
　　};
　　request.send();
　　}

　　firefox,safari,chrome中的XMLHttpRequest对象和IE中XDomainRequest对象类似，共有属性方法如下
　　abort(),用于停止正在进行的请求
　　onerror()，用于替代onreadystatechange()检测错误
　　onload(),用于替代onreadystatechange()检测成功
　　responseText(),用于取得响应内容
　　send(),用于发送请求
五，其他跨域技术
1，图像Ping
　　使用img标签，动态的创建图像，使用onload和onerror事件处理程序来确定是否接收到了响应
　　图形Ping是与服务器进行简单，单向，的跨域通信的一种方式
　　请求的数据通过查询字符串形式发送的，响应的是任意内容，通常是像素图或204响应
　　var img = new Image();
　　img.onload = img.onerror = function(){};
　　img.src = "http://www.example.com/test?name=Nicholas";
　　请求从设置src属性那一刻开始，请求中发送了name参数
　　图像Ping用于跟踪用户点击页面或动态广告曝光次数，
　　两个缺点，只能发送get请求，无法访问服务器的响应文本，只能单向通信
2，JSONP
　　被包含在函数调用中的JSON，
　　callback({"name":"Nicholas"});
　　JSONP包含两部分，回调函数和数据，回调函数是当响应到来时应该在页面中调用的函数，函数名一般在请求中指定
　　数据就是传人回调函数中的JSON数据，例如:http://freegeoip.net/json/?callback=handleResponse，指定的函数名为handleResponse()
　　JSONP是通过动态script元素使用的，使用时可以为src属性指定一个跨域URL
　　function handleResponse(response){
　　　　alert("you're at IP address" + resopnse.ip + ",which is in" + response.city + "," + response.region_name);
　　}
　　var script = document.createElement(script);
　　script.src="http://freegeoip.net/json/?callback=handleResponse";
　　document.body.insertBefore(script,document.body.firstChild);
　　可以直接访问响应文本，支持在浏览器与服务器之间双向通信，但不能保证安全，确定JSONP请求是否失败不是很容易
　　html5给script提供onerror事件处理程序，尚未得到任何任何浏览器支持，为此常通过设置计时器检测指定时间内是否收到了响应
3，Comet
　　Ajax是一种从页面向服务器请求数据的技术，Comet是一种服务器向页面推送数据的技术
　　Comet能够让信息近乎实时的被推送到页面上，非常适合处理体育比赛的分数和股票报价
　　两种实现Comet的方式：长轮询和流
　　　　长轮询：页面发起一个到服务器的请求，然后服务器一直保持连接打开，直到有数据可发送，
　　　　发送完数据之后，浏览器关闭连接，随即又发起一个到服务器的新请求，这一过程在页面打开期间持续不断
　　　　长轮询是服务器等待发送响应后发送数据
　　HTTP流：浏览器向服务器发送一个请求，服务器保持连接打开，然后周期性向浏览器发送数据
　　DOM浏览器中，通过监听readystatechange事件及检测readyState的值是否为3，利用XHR对象实现流

　　function createStreamingClient(url,progress,finished){
　　　　var xhr = new XMLHttpRequest(),received = 0;
　　　　xhr.open("get",url,true);
　　　　xhr.onreadystatechange = function(){
　　　　　　var result;
　　　　　　if(xhr.readyState == 3){
　　　　　　　　//只取得最新数据并整理计数器
　　　　　　　　result = xhr.responseText.substring(received);
　　　　　　　　received += result.length;
　　　　　　　　//调用progress回调函数
　　　　　　　　progress(result);
　　　　　　}else if(xhr.readyState == 4){
　　　　　　　　finished(xhr.responseText);
　　　　　　}
　　　　};
　　　　xhr.send(null);
　　　　return xhr;
　　}
　　var client = createStreamingClient("streaming.php",function(data){
　　　　alert("Received:" + data);},function(data){
　　　　alert("Done!");
　　});

4，服务器发送事件
1）SSE API
　　创建到服务器的单向连接，服务器通过这个连接可以发送任意数量的数据，
　　服务器响应的MIME类型必须是text/event-stream，支持长短轮询，和http流
　　首先创建一个新的EventSource对象，并传进一个入口点：
　　var source = new EventSource("Myevent.php");url要与创建对象的页面同域
　　EventSource实例有个readyState属性，0表示正连接到服务器，1表示打开了连接，2表示关闭了连接
　　还有open事件,在建立连接时触发，message事件，在服务器接收到新事件时触发，error事件，在无法建立连接时触发
　　服务器发回的数据以字符串形式保存在event.data中
　　默认情况下，EventSource对象会保持与服务器的活动连接，连接断开会重新连接
　　强制断开使用close()方法，source.close()
2）事件流
　　服务器事件会通过一个持久的http响应发送，这个响应的MIME类型为text/event-stream
　　响应的格式为纯文本，最简单的情况是每个数据项前有data
　　对于多个连续的以data开头的数据行，将作为多段数据解析，每个值之间有一个换行分隔符
　　只有包含data：的数据行后有空行，才会触发messge事件，
　　通过id：前缀可以给特定的事件指定一个关联的ID,位于data：行前面和后面皆可
　　设置了ID，EventSource对象会跟踪上一次触发的事件，连接断开时，会向服务器发送一个包含名为last-Event-ID的特殊HTTP头部的请求，以便服务器知道　　   下一次触发的事件
5，Web Socket
　　在一个单独的持久的连接上提供全双工，双向通信
　　一个http请求发送到服务器已发起连接，取得服务器响应后，建立的连接使用http升级从http协议交换为web Socket协议
　　ws://;wss://
　　1）Web Socket API
　　首先实例一个WebSocket对象并传人要连接的URL
　　var socket = new WebSocket("ws://www.example.com/sever.php");
　　必须给websocket构造函数传人绝对的URL，
　　浏览器在实例化websocket对象后，马上尝试创建连接，readyState属性
　　　　WebSocket.OPENING(0)：正在建立连接
　　　　WebSocket.OPEN(1)：已经建立连接
　　　　WebSocket.CLOSING(2)：正在关闭连接
　　　　WebSocket.CLOSE(3)：已经关闭连接
　　没有readystatechange事件，readyState永远是从0开始的
　　关闭WebSocket，使用close方法
　　2）发送和接收数据
　　send()方法
　　var socke = new WebSocket("ws://www.example.com/server.php");
　　socket.send("hello world");
　　websocket只能发送纯文本数据，对于复杂的结构，将数据序列化为JSON字符串，使用stringify()方法
　　当服务器向客户端发来消息时，WebSocket对象会触发message事件，这个message事件与其他传递消息的协议类似，
　　也是把返回的数据保存在event.data属性中
　　socket.onmessage = function(event){
　　　　var data = event.data;
　　　　//处理数据
　　}
　　3）其他事件
　　　　open：在成功建立连接时触发
　　　　error：在发生错误时触发，连接不能持续
　　　　close：在连接关闭时触发
　　WebSocket对象不支持DOM2级事件监听器，必须使用DOM0级语法分别定义每个事件处理程序
　　var socket = new WebSocket("ws://www.example.com/server.php");
　　socket.onopen = function(){};
　　socket.onerror = function(){};
　　socket.onclose = function(){};
　　只有close事件对象包含额外的三个属性
　　　　wasClean：布尔值，表示连接是否已经明确的关闭
　　　　code：服务器返回的数据状态码
　　　　reason：字符串包含服务器发回的消息
6，SSE与Web Socket
　　SSE,支持单向的从服务器读取数据
　　WebSocket，支持双向通信
　　SEE和XHR组合也可以实现双向通信
六，安全
　　确保XHR访问的URl安全，通行的做法是验证发送请求者是否有权限访问相应的资源
　　要求以SSL连接来访问可以通过XHR请求的资源
　　要求每一次请求都附带经过相应算法计算得到的验证码
　　要求发送POST而不是GET请求（对CSRF攻击没有作用）
　　检查来源URL以确保是否可信，（对CSRF攻击没有作用，来源记录很容易伪造）
　　基于cookie信息进行验证（对CSRF攻击没有作用，容易被伪造）